Next.js 13을 이용하여 fullStack Web application을 개발 중입니다. 먼저 Web의 로그인으로 kakao login 기능을 구현해보기로 하였습니다.

이전 프로젝트에서 프론트 단에서 카카오 로그인을 구현하는 부분을 만들어보았기 때문에 이번에는 백 단에서 어떻게 구현할 지에 초점을 맞추어 진행하였습니다.

next.js를 처음 사용해보았고, 백 단도 처음으로 구현해보는 것이라 헤맨 부분이 많았습니다. 따라서 여기에 자세히 적음으로써 다음에 구현할 때 참고해보고 이를 보시는 분도 참고가 되었으면 좋겠습니다.

참고 자료

Kakao Developers

API Routes: Introduction | Next.js

구현 로직


기본적으로 kakao developer에 나온 rest api를 사용하여 로그인하는 과정을 따라서 구현해보았습니다. 따라서 아래 사진을 참고하여 각 과정을 어떻게 구현하였는지 자세히 적어보겠습니다.

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

Untitled

Step 0. 준비하기


next.js 준비

카카오 준비

Step 1. 인가 코드 받기