노마드코더 Next.JS 챌린지 - 로그인 기능 구현

 

https://codesandbox.io/s/nextjs-prisma-sqlite-forked-wsbegh

NextJS Prisma SQLite (forked) - CodeSandbox

 

주요 기능

https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

 

 

이번에 사용한 것은 SWR을 통한 상태관리이다.

사용된 것은 미리 유저의 상태 (로그인 했는)를 체크 후

 

했다면 -> Login.tsx로

하지 않았다면 -> account.tsx로

라우터 푸쉬를 하여 사용자에게 필요에 맞는 사이트를 방문하게 만들었다.

이전에 만들어봤던 로그인 창 구현 (with React-hook-form)을 이용해 로그인창을 구현 후

iron-session을 이용한 세션(쿠키)의 암호화하였고

 

백엔드와의 소통으로는 Prisma - Sqlite를 사용하였다.

 

이전 Prisma - Plantscale과 다른 서버였지만 프리스마가 규격을 통일해줘 사용하는데

 

새로운 기술을 익힐 필요는 없었다.

 

 

단지 아직 세션 - 쿠키의 상태관리와 더불어 백엔드와의 단순 데이터 api정보를 가져오는 게 아닌

 

내가 직접 업데이트 및 불러와 활용하는 것에 대해서는 많이 어려웠다.

 

이번 챌린지가 끝나고 다시 처음부터 복습해봐야 겠다.

 

제작 기간

4일

사용 스택

• Next.js
• Typescript
• React-Hook-Form
• Prisma
• iron-session
• SWR