NEXTJS와 TypeScript 프로젝트 일지 - 2 (JWT,Prisma)

전에말했던 개인프로젝트는 랜덤 채팅 페이지와 화상 랜덤 채팅 기능을 개발하는 것이었습니다. 이를 위해 가장 먼저 로그인과 회원가입 페이지를 구현하기로 결정했습니다. 다행히 예전에 만들어둔 CSS와 HTML 템플릿을 재사용할 수 있어 개발 속도를 높일 수 있었습니다.

 

 

Next.js를 이용한 깜박거림 없는 프론트엔드 구현

Next.js를 사용하여 프론트엔드를 구현할 때 가장 중요한 점은 깜박거림이 없어야 한다는 것입니다. 페이지 전환 시 깜박거림이 발생한다면 이는 Next.js의 장점을 제대로 활용하지 못한 것입니다. 깜박거림 없는 부드러운 사용자 경험을 제공하기 위해 Next.js의 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 기능을 적극 활용했습니다.

Next.js를 이용한 백엔드와 데이터베이스 통합

Next.js는 백엔드도 함께 구현할 수 있어 1인 개발자에게 매우 적합한 프레임워크입니다. 데이터베이스로는 MySQL을 사용하고, Prisma를 통해 데이터베이스와 연결했습니다. API 요청과 응답은 NextApiRequest와 NextApiResponse 객체를 사용하여 처리했습니다. 이를 통해 간단하고 효율적인 백엔드 로직을 구현할 수 있었습니다.

JWT를 이용한 회원관리 시스템

회원관리 시스템의 핵심은 JWT(JSON Web Token)를 사용한 인증입니다. 사용자가 로그인하면 서버는 액세스 토큰과 리프레시 토큰을 발급합니다. 액세스 토큰은 짧은 유효 기간을 가지며, 주로 사용자의 인증을 확인하는 데 사용됩니다. 반면 리프레시 토큰은 더 긴 유효 기간을 가지며, 액세스 토큰이 만료되었을 때 새로운 액세스 토큰을 발급하는 데 사용됩니다.

회원가입 페이지 구현

회원가입 페이지는 사용자가 필요한 정보를 입력하여 새로운 계정을 생성할 수 있도록 합니다. 회원가입 요청이 들어오면 서버는 입력된 비밀번호를 해싱하여 데이터베이스에 저장합니다. 이를 통해 비밀번호의 보안을 강화할 수 있습니다.

 

이와 같이 Next.js와 Prisma, JWT를 사용하여 로그인 및 회원가입 기능을 구현할 수 있습니다. 이러한 기능은 랜덤 채팅 페이지와 화상 랜덤 채팅 기능을 구현하기 위한 기초 작업으로 매우 중요합니다. Next.js의 강력한 기능을 활용하여 깜박거림 없는 사용자 경험을 제공하고, Prisma를 통해 효율적으로 데이터베이스와 상호작용할 수 있었습니다. JWT를 사용하여 안전한 인증 시스템을 구현함으로써, 사용자의 정보를 보호하고 원활한 서비스 제공이 가능하게하는것이 목표로 개발에 임하였다 3탄은 아마 웹소켓을이용하여 세션 소통을 다룰까한다.