🚨 문제 상황
로컬 개발 환경(http://localhost:3000)과 실제 API 서버(https://api.trendnow.me)는 브라우저에서 서로 다른 사이트(Site)로 인식됩니다. 이 때문에 브라우저의 SameSite 쿠키 정책에 따라, API 서버가 보내준 쿠키가 브라우저에 저장되지 않는 문제와, 이후 API 요청 시 쿠키가 함께 전송되지 않는 문제가 발생했습니다.
처음에는 이 문제를 해결하기 위해 Next.js의 rewrites를 활용했습니다.
rewrites는 특정 경로의 요청을 서버단에서 다른 주소로 대신 보내주는 프록시 역할을 합니다. 이를 통해 브라우저는 같은 출처와 통신하는 것처럼 인식하게 되어 쿠키 문제를 해결할 수 있었습니다.
하지만 이 방식은 TanStack Query를 사용해 SSR 과정에서 데이터를 미리 가져올 때, rewrites 설정이 적용되지 않아 문제가 발생했습니다.
hosts 파일을 이용해 로컬 환경에 커스텀 도메인 적용하기
기존의 Next.js rewrites 로직을 삭제하고, http://localhost:3000 대신 커스텀 도메인을 적용하여 배포환경과 거의 동일한 개발 환경을 구축했습니다.
hosts 파일에 아래와 같이 한 줄을 추가하여 local.trendnow.me라는 주소로 요청을 보내면, 내 컴퓨터(127.0.0.1)로 연결되도록 설정했습니다.
// etc/hosts (macOS) / C:\Windows\System32\drivers\etc\hosts (Windows)
127.0.0.1 local.trendnow.meNext.js에서 제공하는 -H 옵션을 사용하여 원하는 도메인을 설정할 수 있고, --experimental-https 옵션을 사용하여 HTTPS를 간단히 설정할 수 있습니다.
"scripts": {
"dev": "next dev --experimental-https -H local.trendnow.me",
},🚀 결과
hosts 파일을 이용해 로컬 환경에 커스텀 도메인 적용하여 Next.js의 rewrites 없이 쿠키 문제를 해결했습니다. 이를 통해서 로컬 개발 환경에서도 소셜 로그인에 대한 쿠키도 저장할 수 있게 되었습니다.
이번 쿠키 문제를 해결하면서, 쿠키 정책의 SameSite, Domain, Secure 문제를 경험해보고 이에 대해서 학습할 수 있는 좋은 기회였습니다.
출처
