react-cookie :: 서브 도메인이 다를 때, 같은 쿠키 값 공유하기

문제

react-cookie를 이용해서 여러 프로젝트에서 공유되는 쿠키값을 설정했다
개발할 때 local에서는 문제없었는데 개발 서버에 배포하고 나니
페이지 단위로 쿠키값이 다르게 설정되는 것을 발견했다

 

원인

도메인이 abc.com이라면
aaa.abc.com / bbb.abc.com / ccc.abc.com 이런 식으로
페이지마다 서브도메인이 달라지면서 발생한 이슈

local에서는 모든 도메인이 당연히 localhost로 시작하기 때문에
배포 전까지 발견하지 못했다

 

- 처음 작성한 코드

import { useCookies } from 'react-cookie';

const Test = () => {
  // cookie_test라는 키를 가지는 쿠키값 설정 
  const [cookies, setCookie] = useCookies(['cookie_test']);
  const [isOpen, setOpen] = useState(true);

  // 버튼을 클릭할때 마다 cookie_test키를 가지는 쿠키값이 변경됨
  const handleClickToggle = useCallback(() => {
    setCookie(`cookie_test`, !isOpen, {
      path: '/', // 모든 경로에 적용
      maxAge: 365 * 24 * 60 * 60 // 1년 유지
    });
  }, [isOpen, setCookie]);

  return (
    <div>
      <button onClick={handleClickToggle}>버튼</button>
    </div>
  );
};

처음에는 path에  '/'를 설정하면 모든 페이지에서 적용될 것이라 생각했는데 
내가 개발하는 페이지는 서브 도메인이 다양하다는 사실을 간과했다

만약 내가 aaa.abc.com에서 버튼 클릭을 통해 쿠키값을 설정했다면
aaa.abc.com/모든 경로에서만 값이 공유되고 bbb.abc.com에서는 공유되지 않았다

개발자도구 - 애플리케이션 탭에서 쿠키 값을 확인해 보면 Domain 탭이 있다
여기에 힌트가 있는데 Domain 탭에 값들을 보면 가장 앞에 마침표가 붙어있는 것을 볼 수가 있다
이 말은 즉 해당 도메인에 어떤 서브도메인이 들어가도 값을 공유하겠다는 뜻이다

해결

import { useCookies } from 'react-cookie';

const Test = () => {
  // cookie_test라는 키를 가지는 쿠키값 설정 
  const [cookies, setCookie] = useCookies(['cookie_test']);
  const [isOpen, setOpen] = useState(true);

  // 버튼을 클릭할때 마다 cookie_test키를 가지는 쿠키값이 변경됨
  const handleClickToggle = useCallback(() => {
    setCookie(`cookie_test`, !isOpen, {
      path: '/', // 모든 경로에 적용
      maxAge: 365 * 24 * 60 * 60 // 1년 유지
      domain: .abc.com // <- 추가 된 부분✨✨
    });
  }, [isOpen, setCookie]);

  return (
    <div>
      <button onClick={handleClickToggle}>버튼</button>
    </div>
  );
};

해결 방법은 간단했다
쿠키를 설정할 때 domain 옵션에 마침표와 함께 도메인을 설정해 주면 된다

domain : .abc.com을 설정해 주면
aaa.abc.com / bbb.abc.com / ccc.abc.com에서 
쿠키 값을 공유할 수 있다

로컬에서 개발하다가 간과한 사실,,,
조금 더 깊게 생각하면서 개발하자 🫠