안녕하세요

목차 1. 회원가입 구현 프론트에서 회원가임 폼 작성하기 서버에서 유효성 검사하고 DB에 데이터 저장 요청하기 2. CredentialsProvider()로 ID/Password 로그인 구현하기 (JWT 방식) 1) 로그인페이지로 form 생성 2) form을 통해 로그인 요청 시 db와 회원정보 대조 3) session: cookie에 session을 저장할 때 만료시간 설정 4) jwt callback - jwt token 생성 할 때 실행되는 코드: token에 정보 추가 +) session callback - session 생성할 때 실행되는 코드: session에 정보 추가 회원가입 구현하기 계정을 생성하는 과정은 일반적인 방식과 똑같이 구현하면 됩니다. 1. 프론트에서 회원가임 폼 작성하기 c..

Next.js 미들웨어(middleware) 목차 1. 미들웨어란 2. Next.js 에서 middleware 사용하는 법 middleware 세팅 NextResponse란 3. middleware가 적용될 경로 설정하기 react + express로 서버를 구현했을 때도 유저가 로그인했는지 정보를 확인하기 위해 middleware를 사용했듯 Next.js에서는 middleware를 어떻게 사용하는지 찾아보았다. 1. 미들웨어(middleware)란 특정 경로의 페이지로 접근할 때 또는 특정 api 를 실행하기 전 "이 함수를 실행"하는 역할을 한다. 인증이 되지 않은(비로그인) 유저가 url 주소를 통해 게시글 작성 페이지로 접근하려 할 때 (/manage/newpost) 회원 정보 수정 페이지로 접근..

목차 1. 소셜 로그인 구현 Github OAuth App 발급하기 next-auth 설치 및 세팅 로그인 로그아웃 구현하기 로그인 된 유저 정보 출력하기 2. MongoDB에 유저 정보와 session 로그인 정보 저장하기 mongodb-adapter 설치 및 세팅 DB에 저장된 유저 정보 확인하기 next-auth를 이용한 Github 소셜 로그인을 구현해 봅시다. 1. Github에서 유저 정보를 요청하기 위한 권한을 얻으려면 OAuth apps를 생성해야 합니다. Github에 로그인을 합니다. https://github.com/settings/developers (settings -> developer settings -> OAuth Apps)로 이동합니다. New OAtuh App 버튼을 눌러..

목차 1. Next.js에서 MongoDB 연결하기 설치 연결 Type 세팅 2. DB collection에 데이터 삽입 및 출력 3. DB에서 요청한 데이터로 게시물 목록, 게시물 상세 구현 요청할 데이터의 필드 제한하기 collection Type 에러 해결 Type extends findOne Type 에러 해결 1. MongoDB와 타입스크립트를 쓰기 위해 필요한 설정을 해봅시다. MongoDB를 설치합니다. npm install mongodb 타입스크립트로 진행하기 위해서는 mongodb에도 타입을 지정해주어야 합니다. MongoDB 에 연결하기 위해서는 다음과 같이 작성하면 됩니다. // src/utils/db/db.ts import { MongoClient } from "mongodb"; c..