안녕하세요, 오늘은 프론트엔드 애플리케이션에서 소셜 로그인을 구현하는 과정에서 마주한 도메인 간 쿠키 문제와 그 해결 방안에 대해 상세히 공유해 드리고자 합니다.문제 상황React 기반의 프론트엔드 애플리케이션에 소셜 로그인 기능을 구현하는 과정에서 다음과 같은 문제가 발생하였습니다.사용자가 소셜 로그인을 완료한 후에는 정상적으로 로그인 성공 메시지가 표시되고 홈 화면으로 리다이렉트 되었습니다.그러나 페이지를 새로고침하거나 다른 페이지로 이동할 경우, 로그인 상태가 유지되지 않아 사용자가 다시 로그인해야 하는 불편함이 있었습니다.브라우저의 개발자 도구 콘솔에서는 다음과 같은 오류 메시지가 확인되었습니다.This attempt to set a cookie via a Set-Cookie header was ..

1. 서론안녕하세요. 소셜 로그인은 현대 웹 애플리케이션의 필수 요소가 되었습니다. 특히 국내에서는 카카오 로그인이 사용자 편의성을 크게 높이는 핵심 기능입니다. 이 글에서는 카카오 소셜 로그인 구현 아키텍처의 진화를 자세히 살펴보고, 각 방식의 장단점을 분석하겠습니다. 코드 예시와 흐름도를 통해 두 방식의 차이점을 명확히 이해할 수 있도록 도와드리겠습니다.2. 이전 방식: 프론트엔드 주도 카카오 로그인프론트엔드 주도 방식은 인증 흐름의 대부분을 프론트엔드에서 처리하는 방식입니다. 이 방식에서는 카카오 SDK를 직접 초기화하고, 인증 코드 요청부터 토큰 교환까지 프론트엔드에서 담당합니다.2.1 구현 흐름2.2 코드 구현 예시2.2.1 카카오 SDK 초기화// SocialLoginList.tsxuseEff..

안녕하세요! 오늘은 React 애플리케이션에서 카카오 소셜 로그인을 구현하는 방법에 대해 공유하려고 합니다. 프로젝트에서 카카오 로그인을 적용하면서 경험한 내용을 바탕으로 작성했습니다.목차준비 사항카카오 개발자 계정 및 앱 설정프로젝트에 카카오 SDK 추가하기카카오 로그인 버튼 컴포넌트 구현인증 코드 처리를 위한 콜백 페이지 구현라우팅 설정백엔드 연동발생 가능한 문제 및 해결 방법마치며1. 준비 사항카카오 소셜 로그인을 구현하기 위해 다음과 같은 기술 스택을 사용했습니다.ReactTypeScriptViteReact RouterAxios2. 카카오 개발자 계정 및 앱 설정먼저, 카카오 개발자 사이트에 접속하여 계정을 생성하고 앱을 등록합니다.앱 등록 및 설정 단계: 카카오 개발자 사이트에 로그인하고 "내 ..

안녕하세요.오늘은 최근 진행한 회원 탈퇴 기능 구현 과정에서 경험한 기술적 고민과 해결 과정, 그리고 그 속에서 배운 점들을 공유드리고자 합니다. 프로젝트 배경처음 회원 탈퇴 기능을 구현하라는 요청을 받았을 때, 단순히 API 연동만 하면 되는 간단한 작업이라 생각했습니다.하지만 실제 구현 과정에서 마주한 다양한 고민들이 있었습니다. :-)초기 요구사항 분석회원 탈퇴 전 주의사항 안내비밀번호 재확인진행 중인 예약이 있는 경우 탈퇴 제한이러한 요구사항들을 단순히 기능적으로만 구현하는 것이 아니라, 어떻게 하면 사용자에게 더 나은 경험을 제공할 수 있을지 고민했습니다.기술적 도전과 해결 과정1. 상태 관리의 진화처음에는 이렇게 단순한 로컬 상태로 시작했습니다.const Withdrawal = () => { ..