개발자를 희망하는 초보의 자기개발 이야기

카카오 로그인 구현하기 - 프론트엔드 (3)이전 글에서는 인가 코드 처리 및 스토리지를 활용한 JWT 토큰 저장을 다루었다. 하지만 스토리지에 저장하는 것은 보안상 문제가 생기기 때문에 최종적으로는 쿠키방식을 적용해야 한다. 이번 글에서는 withCredentials 설정과 HttpOnly 쿠키를 통한 로그인 유지 방식을 설명한다.  1. withCredentials: true 설정의 의미withCredentials이란?withCredentials: true를 설정하면, 클라이언트와 서버 간 쿠키를 포함한 요청을 주고받을 수 있다.또 백엔드 설정에 따라 헤더에 기본적으로 브라우저는 CORS 요청에서 쿠키를 전송하지 않는다. 이를 활성화하려면 프론트엔드와 백엔드 모두에서 설정해야 한다.// withCred..

카카오 로그인 구현하기 - 프론트엔드 (2)이전 글에서는 카카오 로그인 버튼을 만들고 로그인 페이지로 이동하는 과정을 다루었다. 이번 글에서는 인가 코드 처리 및 백엔드 연동을 이어서 다룬다. 1. 인가 코드 가져오기 (useSearchParams)카카오 로그인 후 사용자는 인가 코드(authorization code) 를 Query String으로 받게 된다.http://localhost:3000/callback?code=nuAFZmJvzl2a5Oz5acQckm8RzTmfSTea9y1SiczkbKjZNN9XyVDNeQAAAAQKPCPnAAABlXhW9uSi-KZYUq23DA이제 이 인가 코드(nuAFZmJ...)를 백엔드에 전달하여 JWT 토큰을 받아야 한다.import { useSearchParams..

카카오 로그인 구현하기 - 프론트엔드 (1)카카오 로그인을 구현하려면 OAuth 2.0의 인증 흐름을 이해해야 한다. 이 글은 Kakao Developers 설정에 이어 카카오 로그인 개념 및 기본적인 프론트엔드 설정을 다룬다.프론트엔드가 앱 등록과 카카오 로그인 활성화, 앱 키 등을 준비하기로 되어있다면 아래의 글을 먼저 확인한다.2025.03.05 - [프론트엔드(Front-end)] - [카카오 로그인] Kakao Developers 설정 1. 카카오 로그인 흐름카카오 로그인의 흐름은 다음과 같다.카카오 로그인 버튼 클릭 → 카카오 인증 페이지로 이동사용자가 로그인 및 동의 → 카카오가 인가 코드 발급인가 코드(Query String으로 전달됨) 확인백엔드에 인가 코드 전달 → 백엔드에서 카카오 A..

Kakao Developers 설정카카오 로그인을 구현하려면 Kakao Developers 콘솔에서 설정이 필요하다. 이 글에서는 카카오 로그인 기능을 활성화하는 방법과 필요한 설정 과정을 설명한다. 백엔드 개발자가 모든 처리를 담당하면, 프론트엔드에서 직접 설정할 필요가 없다. 하지만, 어떻게 동작하는지 이해하는 것이 중요하다. 1. 내 애플리케이션 등록Kakao Developers 콘솔에 접속한다."애플리케이션 추가하기" 버튼을 클릭한다.앱 이름과 사업자명을 등록한다.실제 서비스가 아닐 경우, 사업자명은 임의로 등록해도 된다. 2. 카카오 로그인 설정카카오 로그인 기능을 사용하려면 아래의 설정이 필요하다.1) 카카오 로그인 활성화내 애플리케이션 -> 제품 설정 -> 카카오 로그인 메뉴로 이동한다."카..

문제의 발단다른 개인 프로젝트에서 이전에 커밋 이력 합치기를 해봤던 경험으로 작업 브랜치에서 커밋 이력을 합쳐봤다.그런데 당연히 main도 같이 수정될거라 생각했지만 main은 변하지 않았다. (찾아보니 별도의 해시값으로 관리된다고..) 어차피 비공개 레포라 다시 원상복구 했었다.그런데 이번에도 vercel 배포 자동화와 관련해 yml 파일과 build.sh 파일 연동을 시도하다가 의미없는 커밋이 10개가량 발생했다.문제는 이미 merge까지 끝내고 난 후 생각이 났다는거.. 이번 케이스도 추후 발생할 수 있을 것 같아 기록을 남긴다.상황abc 브랜치(가상의 작업 브랜치명)의 10개 커밋을 하나로 합친다.main 브랜치에서도 해당 10개 커밋을 하나로 정리한다.리모트 저장소(GitHub/Vercel)에서..