이 글을 작성하게 된 이유: 로그인시 아이디 기억하기 항목을 만들고 싶었다.
슬슬 프로젝트가 마무리를 향해 달려가고 있는데, 내가 만든 부분들의 코드들을 뜯어보다보니 아이디 기억하기가 없는게 아쉬워졌다. 그래서 서버단 시간이 많이 걸리지 않는다면 해보자 라고 이야기했고, 구현을 시작했는데...
체크박스 만들고 체크박스 유무를 넘겨줌과 동시에 쿠키에 username을 줬다. 그래서 쿠키에 username이 있으면 로그인 모달이 열릴 때 체크박스를 체크하고 아이디 input에 value로 주었다. 그래서 로컬에서는 잘 됐다. 근데 진짜 문제는 따로 있었다.
Cookie SameSite
문제가 된건 Cookie의 SameSite라는 속성이 기본 None에서 Lax로 바뀐게 문제였다. 바뀐 시점은 2020년 2월이라고 한다. Cookie의 SameSite 속성은 서로 다른 도메인간의 쿠키 전송에 대한 보안을 설정하는데, 문제는 우리가 배포할 때 서버 쪽과 다른 곳 도메인이 달라서 이 속성에서 걸려서 쿠키를 사용할 수 없었던 것이다.
그래서 어떻게 해야하나... 한참을 헤맸다. 결국에는 React-Cookie를 통해 클라이언트 단에서 쿠키를 만들어서 다루어주기로 했다. 어차피 아이디 저장과 체크박스에만 쓰일 것이니 클라이언트에서만 가지고 있어도 상관이 없었다.
그래서 이런 식으로 로그인을 하고 체크박스가 체크 되어있으면 쿠키를 생성해서 username을 저장해주고 아니면 쿠키를 제거한다.
앞으로 구축할 때에는 쿠키를 어떻게 사용할 것인가? 도 잘 고민을 해봐야겠다.
