<aside> 💬
개발자 및 취업준비생들이 자유롭게 모각코(모여서 각자 코딩) 모임을 생성 · 참여하고, 실시간 소통 및 장소 정보를 통해 협업을 지원하는 커뮤니티 플랫폼.
</aside>
[문제 1] 소셜 로그인 연동 중 사용자 정보 누락 및 인증 상태 유지 어려움
✷ 문제 Kakao, Naver 로그인 연동 초기 단계에서 사용자 프로필 정보를 받아오지 못하거나, access token 만료로 인해 인증 상태가 유지되지 않는 문제 발생
✷ 해결 OAuth 2.0 흐름과 각 플랫폼의 API 문서를 분석하여 정확한 콜백 처리를 구현. 프론트에서는 access token을 로컬에 저장하되, 민감한 로직은 백엔드에서 처리하도록 역할 분리.
✷ 결과 모든 소셜 로그인에서 사용자 정보를 안정적으로 수집할 수 있었고, 로그인 상태를 Context로 관리하여 페이지 이동 시에도 인증 상태를 유지
[문제 2] Next.js 사용 미숙으로 인한 SSR/CSR 혼동
✷ 문제 Next.js를 처음 사용하면서 클라이언트 렌더링의 차이를 이해하지 못해 초기 페이지에서 사용자 정보가 불안정하게 렌더링
✷ 해결 Next.js 공식 문서를 기반으로 렌더링 방식의 차이를 학습하고, 유저 인증이 필요한 페이지는 CSR 방식으로 전환하여 클라이언트에서 토큰 검증 후 처리되도록 구조를 재설계.
✷ 결과 인증 상태와 사용자 정보를 기반으로 한 UI 렌더링이 안정적으로 이루어졌고, 서버 렌더링이 불필요한 페이지에서의 성능도 향상되었습니다.
✷ OAuth 2.0 인증 플로우를 직접 이해하고 적용하여, Kakao 및 Naver 로그인 연동 기능을 구현
✷ 프론트엔드에서는 인가 코드 발급 후 백엔드로 전달, 백엔드에서는 인가 코드를 통해 access token 및 사용자 정보를 요청
✷ 로그인 성공 시, 백엔드에서 JWT access token 발급 → 프론트에서 localStorage에 저장 후 인증 상태 유지
✷ 로그인 상태에 따라 네비게이션 UI를 동적으로 변경하고, 사용자 정보를 Context API를 통해 전역 관리
✷ 로그인 유지 및 자동 로그인 기능을 위해, 앱 진입 시 localStorage에 저장된 토큰 유무를 검사하고, 유효한 경우 사용자 정보를 자동으로 불러오는 로직 구현
✷ 첫 로그인(회원가입) 시 정보수정페이지로, 기존 유저 로그인 시 메인 페이지로 신규/기존 유저 여부에 따라 동적으로 라우팅 처리
https://drive.google.com/file/d/1c-2gKwSsupaMIBbXNDX5nd9E9-Q3NMGo/view?usp=sharing