Timpossible history

0. 사이트맵(Sitemap)이란? 사이트맵은 site + map 단어의 조합으로 깊게 해석할 필요 없이, 웹사이트 지도라고 생각해볼 수 있다. 구글 검색 센터에 따르면, '사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일'이라고 한다. * 사이트맵 파일이 필요한 이유? 한 마디로 말하자면, SEO 최적화를 위함이다. 구글 및 네이버 같은 플랫폼들의 검색 엔진 크롤러가 웹사이트의 정보를 긁어 모을 때 아주 효율적으로 정보를 제공할 수 있도록 돕는다. 물론 이 파일이 없다고 검색 엔진에 노출되지 않지는 않지만, 최적화라는 말의 장점을 이뤄줄 수 있는 파일이라고 하겠다. 그렇기에 Sitemap.xml 파일은 검색 엔진이 웹 사이트를 크롤링할 때 사용하는 파일로, 사이트의 페..

참고 : https://nextjs.org/docs/app/building-your-application/optimizing/metadata Optimizing: Metadata | Next.js Use the Metadata API to define metadata in any layout or page. nextjs.org 1. 메타데이터와 그 장점 메타데이터가 무엇인지, 기능과 그 장점이 무엇인가? 메타데이터와 SEO 최적화는 웹 사이트나 앱의 검색 엔진에서의 노출을 높이고 사용자 경험을 향상시키는 중요한 요소이다. 이를 효과적으로 설정하면 다음과 같은 좋은 점을 얻을 수 있다. 1. 검색 엔진 노출 향상: 메타데이터를 적절하게 설정하면 검색 엔진에서 웹 페이지의 내용을 더 잘 이해하고 인덱싱할 수..

넥스트 프레임워크가 13버전으로 업데이트 된지 시간이 좀 지났지만, 뒤늦게 적응하려다가 기존 버전과는 약간 다르게 API route 구현해야 함을 깨닫고, 공식 웹사이트에서 살펴본 것들을 정리해보려고 한다. 참고 : https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments Routing: Route Handlers | Next.js Create custom request handlers for a given route using the Web's Request and Response APIs. nextjs.org 1. API routes? API Routes는 Next.js 애플리케이..

이 글에서는 Nodemailer로 메일 보낼 때 커스터마이징하는 방법을 알아보도록 한다. 1. Email Template 만들기 /src/component/emailTemplate 경로 안에 .jsx 파일을 만들어준다. .jsx 파일을 쓰는 이유는 그냥 편해서이다. Next JS 프레임워크를 쓰는 김에 emailTemplate도 리액트 컴포넌트 형식으로 만들어서 쓰면 직관적으로 보기 좋기 때문에 써보았다. 아래에서 살펴보겠지만, 원래 nodeMailer로 보내는 메일의 형식은 text로 작성되어야 하는데 스타일링 커스터마이징을 하려면 리액트처럼 작성하기 간편한게 없다. /src/component/emailTemplate/emailTemplate.jsx import React from "react"; co..

이번에는 NextJS 웹사이트를 대표적인 프론트엔드 웹사이트 무료 배포 서비스인 Cloudflare에 배포해보록 하겠다. 사실 NextJS는 Vercel이라는 아주 쉽고도 개쩌는 웹 배포 사이트가 있어서 Cloudflare에 왜 굳이 배포하느냐 싶기도 하지만, Cloudflare 또한 무료로 사용할 수 있는 프론트엔드 웹 배포 사이트 중 단연 탑티어라고 할 수 있기도 하고, next JS를 지원하는 툴이 업데이트 되어서 시도해보았다. 참고 Deploy a Next.js site - Cloudflare Docs 1. 프로젝트 준비 npm create cloudflare@latest my-next-app -- --framework=next cd my-next-app my-next-app이라는 이름의 프로젝트..

Middleware란? Middleware 사용사례 Middleware 설정 Middleware로 쿠키 관리하기 Middleware란? 미들웨어(Middleware)는 애플리케이션에서 서버에 들어오거나 나가는 req와 res 사이에 실행되는 코드이다. 미들웨어는 주로 req가 서버에서 routing될 때 res를 클라이언트에 보내기 전에 수정하거나 검사하는 데 사용된다. Node.js로 서버를 구성할 때에도 정말 자주 쓰이고 서버에 들어오는 모든 요청(request)들을 검사하고 인증할 수 있기 때문에 서버 보안 부분에 있어서도 아주 효율적인 로직이라고 볼 수 있다. Middleware 사용사례 봇 탐지 및 접근 제한 리다이렉트(rewrite) 쿠키(token)를 통한 인증 Middleware 설정 미..

이번에는 Next.js 프레임워크에서 Nodemailer를 이용하여 이메일을 보내는 기능을 구현해보았다. Nodemailer는 Node.js 기반의 라이브러리로, 이메일 전송 작업을 쉽게 처리할 수 있도록 도와준다. 이 기능을 통해서 웹사이트의 회원가입 시, 이메일 인증하는 기능을 구현해보고자 한다. Nodemailer 설치 먼저, Next.js 프로젝터에 nodemailer를 설치한다. npm install nodemailer Nodemailer 설정 Nodemailer는 Gmail을 통해서 메일을 보내는 라이브러리이기 때문에 사용하기 위해서는 Gmail 계정에서 '앱 비밀번호'를 생성해야 한다. '앱 비밀번호' 생성하는 법을 알아보려면 아래 글의 링크를 통해서 알아보자. Nodemailer 이용 시 ..