로그인 상태가 갑자기 풀렸을 때 확인하는 법

로컬에서는 잘되는데 배포 환경에서만 문제다

로그인 상태가 유지되지 않는 문제는 보통 다음 셋 중 하나다:

• 토큰 저장소 설정 차이 (localStorage vs sessionStorage)
• 도메인 간 쿠키 정책 차이
• 환경 변수 차이로 인한 API 주소 불일치

내가 겪었던 케이스는 로컬에서는 http://localhost:3000에서 테스트했는데 배포 후 도메인이 https://example.com으로 바뀌면서 쿠키 설정이 달라진 경우였다.

브라우저에서 직접 확인하기

# 1. 개발자 도구 → Application 탭
# localStorage, sessionStorage 확인
# 토큰이 저장되어 있는가?

# 2. Cookies 탭에서 도메인별 쿠키 확인
# SameSite, Secure 설정이 맞는가?

# 3. Network 탭에서 API 요청 확인
# Authorization 헤더가 포함되는가?

상태 흐름 따라가기

React에서 상태 관리를 할 때는 다음 순서로 확인한다:

1. 로그인 API 응답이 정말 토큰을 반환하는가?
2. 그 토큰이 localStorage에 저장되는가?
3. 다음 페이지로 이동했을 때도 여전히 저장되어 있는가?
4. 각 API 요청에 토큰이 포함되는가?

이 중 어느 단계에서 끊어지는지 찾는 게 핵심이다.

모바일 화면에서는 더 주의 깊게

모바일 브라우저는 개인정보 보호 모드나 써드파티 쿠키 제한이 더 엄격할 수 있다. 개발자 도구에서 모바일 뷰포트로 전환해서 테스트해본다.

빌드해서 실제 환경에 배포한 후에 다시 확인하면 로컬과 다른 부분을 발견할 때가 있다. 기록을 남겨두면 팀원과 같은 문제를 겪을 때 도움이 된다.