commit.log

NextAuth.js는 Next.js 애플리케이션들을 위한 오픈소스 인증 솔루션이다.Google, Kakao 등 많은 서드파티 서비스들을 쉽게 연계할 수 있게 해주고, Prisma 등 각종 ORM에 대한 지원도 잘해주는 툴이다.나는 서드파티 fetch 없이 순수 이메일 가입 + Prisma + MySQL 형식으로 구현했다.1. NextAuth 설치아래 명령어를 사용해 NextAuth 및 Prisma 관련 패키지를 설치한다.npm install next-auth @prisma/client @auth/prisma-adapternpm install prisma --save-dev  2. app/api/auth/[...nextauth]/route.js 작성그 다음엔 api/api/auth/[...nextauth..

위 플로우 차트와 같은 회원가입 절차를 Next.js에서 구현하고자 했다.관건은 3가지이다.Next.js에서 인증 기능 구현을 어떻게 할 것인가메일 인증은 어떻게 받을 것인가개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가 각각에 대해 아래와 같은 해결법을 찾았다.1. Next.js에서 인증 기능 구현을 어떻게 할 것인가-> NextAuth라는 Next.js용 인증 라이브러리 사용2. 메일 인증은 어떻게 받을 것인가-> Sendmail 이라는 리눅스 프로그램을 사용하여 SMTP 서버 구축3. 개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가-> 메일 인증을 받지 않은 사람은 개인 정보 입력 페이지로 넘어갈 수 없게 하고자 한다.데이터..

문제 상황사진같은 스키마 때문에 User.id를 참조할 일이 생겼다.근데 서버측에서 아무리 session을 불러와도 name, email, image만 불러와지고 id가 작성이 안 됐다.해결법getServerSession 대신 getToken으로 id 불러오기import { NextResponse } from 'next/server';import { PrismaClient } from '@prisma/client';import { getServerSession } from 'next-auth';import { authOptions } from '../../auth/[...nextauth]/route';import { getToken } from 'next-auth/jwt';const prisma = ne..

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.레이아웃페이지는 기본적으로 header, content, footer로 구성된다.이 컴포넌트는 페이지 간의 공통 레이아웃을 정의하는 데에 사용되는데, 레이아웃 컴포넌트가 렌더링될 때 자식 페이지를 포함할 수 있도록 반드시 children prop을 받아야 한다.이러한 레이아웃을 적용하기 위해, 폴더 안에 layout.tsx 파일을 만들면 된다. layout.tsx 파일에서는 children prop을 통해 렌더링될 자식 페이지를 받아와서 레이아웃의 특정 위치에 그 자식 페이지를 렌더링하게 된다. 이 방법으로 각 페이지가 공통 레이아웃을 공..

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.Next.js란React + production이 바로 가능하게 라우팅, 최적화 렌더링, 데이터 fetching, 번들링, 컴파일링 등 지원왜 Next.js를 사용하는가Next.js는 아래와 같은 기능들을 지원함으로써 프로덕션을 위한 웹 애플리케이션을 간단히 빌드할 수 있다.1. 라우팅2. API 루트3. 렌더링4. 데이터 fetching5. 스타일링6. 최적화7. 개발 및 배포 빌드 시스템 // SSR 말하는 건가?Next.js 사용 시 전제 조건HTML, CSS, JavaScript 기반ES6 + featuresReact 기반Next...

이슈Ubuntu 서버에 특정 디렉토리 내 하위 디렉토리들을 주기적으로 삭제하는 cron을 등록해놓았는데, 실수로 하위 디렉토리만 삭제한다는 조건을 안 넣어서 상위 디렉토리들까지 싹 다 날아갔다.그래서 구축해놨던 CI/CD 파이프라인 및 Next.js 프로젝트가 통째로 삭제됐다. 주기적으로 Miniconda가 삭제되는 문제도 있었는데 전부 cron 스크립트가 원인이었다. ㅠㅠ 그나마 데이터베이스 계정에 이런 실수를 저지른 건 아니라 다행이다.코드 백업은 윈도우에 해두고 있었기 때문에 다시 git 서버를 구축하고 post-receive 훅을 등록하니 CI/CD는 빠르게 해결됐고, Next.js 프로젝트도 다시 옮길 수 있었다.폐쇄망이라 급하게 다른 우분투 서버에 프로젝트를 옮기고, npm install & ..