바꾸려고 했던 이유

기존 스낵게임에서는 액세스 토큰을 로컬 스토리지에 저장해 관리했다.

따라서 프론트에서 요청을 보낼 때 마다 토큰을 싣어줘야 했다.

이 과정에서 자꾸 헤더에 토큰이 실리지 않아 오류가 나기 십상이었다.

(여기서 말하는 세션은 사실 쿠키가 맞다. 잘못 말했다.)

쿠키에다가 싣으면 알아서 왔다갔다 한다는데?

서버에서 Set-Cookie 를 싣어 응답을 내려주면, 브라우저는 쿠키를 저장하고 다음 요청부터 알아서 쿠키를 싣는다.

너무 편리하지 않은가? 그래서 당장 쓰자고 했고, 작업을 후딱 진행해보았다.

하지만 간과한 것이 있었다.

바로 우리 서비스는 서버와 웹 클라이언트의 주소가 다르다는 것이다.

Chrome 80부터 바뀐 정책

Developers: Get Ready for New SameSite=None; Secure Cookie Settings

UPDATE (10/28/2019): We've revised the 2nd and 3rd bullet points in the section "How to Prepare; Known Complexities" below. In May, Chrome ...

blog.chromium.org

전에는 쿠키만 싣으면 장땡이었는데, 이제 SameSite가 아니라면 다음 두가지를 명시해야 한다:

SameSite=None; Secure

기존에 다른 사이트에서 쿠키가 접근 가능했던 이슈를 해결하려고 정책을 바꿨다는 것 같다.

다음 글에 정리가 잘 되어있다:

다른 도메인에 쿠키 설정하기

서버와 클라이언트의 도메인이 다를 때 쿠키를 설정하고 CORS 에러를 해결하기

velog.io

삽질 후 결론

쿠키 다 적용했고, 프로덕션에서 실제로 동작하는 것도 확인했다.

하지만 로컬(개발) 환경과 서버 주소가 아예 달라 개발 시 쿠키를 접근할 수 없는 문제로 쿠키 사용을 포기했다.

• 서버 주소 : api.snackga.me
• 로컬 주소 : localhost:3000

(쿠키를 삭제할 수 없어 로그아웃이 안되고, 쿠키를 읽을 수 없어 로그인 되어있는지 확인도 잘 안된다.)

이렇게 제어할 수 없는 요인을 만들기보다는,

기존 방식대로 recoil + localStorage로 관리하는 편이 나아보여 돌아가기로 결론내렸다.