프로젝트 쿠키 이슈

이번 프로젝트 백엔드 분이랑 협의하면서 수정사항이 생겼다.
JWT 토큰을 url로 전달하는게 보안적으로 좋지 않아보인다는 이유였다.

그래서 우리는 쿠키를 통해 AccessToken을 전달받아 사용하는 방식을 채택하였다.

기존의 방식

기존의 코드는 어떻냐면,
useEffect를 사용하여서 router.query.access_token가 업데이트 되면, 아래 코드가 작동을 하고

AccessToken을 recoil과 localStorage를 사용하여서 상태관리를 해주었다.

하지만 여기서

const accessToken = router.query.access_token;

이 자리에 router가 아닌 쿠키를 넣어서
기존의 로직을 유지하면서 input만 바꿔주는 식으로 처리할 생각이었다.

쿠키 목록 확인하기

현재 쿠키를 보면 아래처럼 되어있다.

보면 이름, 값 Domain, path, Expires, 등등이 있다.

이전에 refresh Token은 미리 처리한 적이 있는데, 목록을 보면 HttpOnly라는 항목이 체크된 것을 볼 수 있다.
이것은 클라이언트에서 다를 수 없고, 서버 통신을 통해서만 다룰 수 있게 해주는 옵션이다.
그리고 AccessToken은 체크가 안되어있기때문에 클라이언트에서 읽을 수 있다고 판단하였다.

라이브러리를 쓰는 것보다 기존 메소드를 활용하여서 하는 것을 구현하였다.

document.cookie

function getAccessToken() {
  const name = "AccessToken=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookies = decodedCookie.split(";");

  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return "";
}

먼저 decodeURIComponent(document.cookie);를 활용해서 쿠키를 긁어오는데,

1번째 줄은 decodeURIComponent(document.cookie);
2번째 줄은 const cookies = decodedCookie.split(";");

의미한다.

위와같이 받아온다.
아까도 말했듯이 쿠키는 3개지만 httponly가 2개이기 때문에,
1개만 긁어와서 그렇다.
하지만 추후에 쿠키를 더 쓸 수도 있어서 위와 같이 작성하였다

로직을 처음 작성했을 때는 실패하였다.
왜냐면 domain이 달랐기 때문이다.

쿠키는 domain이 다르면 읽어오지 못한다.
이사실을.. 3일동안 알지 못했다..
하지만 domain을 수정하고 나서 성공하였다.

그래서 2가지 방법을 더 시도해보았고, 그와 관련된 내용을 정리하겠다.

react-cookie

import { useCookies } from "react-cookie";

const [cookies, setCookie] = useCookies(["AccessToken"]);

react-cookie는 리액트에서 자주쓰는 쿠키인데
로직이 깔끔해서 좋았다.
처음에는 react에서 쿠키를 인식하지 못해서 이것을 쓰는건가? 라고 생각을 했는데,
domain 문제였었다.

그래서 다시 정리하면서 드는 생각은
react-cookie를 쓰는 이유는 간편성이다.
로직이 단순하고 쉽게 나오기 때문에 메소드로 직접 구현하는 것보다 깔끔하다.

이런 객체형식으로 나오니 유의하자.

js-cookie

import Cookie from "js-cookie";

const jscookie = Cookie.get("AccessToken");
console.log(jscookie, "js-cookie");
    

이것도 마찬가지로 라이브러리이다.
위와 같은 로직을 사용하여서 구현하였고,

결과가 이쁘게 잘나왔다.

첫번째 방법으로..

로직이 간단한 것들은 2번 3번 방법이지만,
1번 방법을 쓰는 이유는 input만 잘넣어주면
이후 recoil을 로직을 이용해서 사용할 것이기 때문이었다.

쿠키 로직을 더이상 쓸 필요가 없어서이다.

그래서 라이브러리를 전부다 삭제하였고,
해당 메소드를 잘 구현하였다.

( recoil에 잘저장이 되어서 완성이 되었다. )

---

끝으로

쿠키를 사용할 때, 어떠한 것을 주의해야하는지 잘알지 못했는데, 이번 일로 잘 알게되었다.
내 로직에 대한 의심이 강했기때문에 로직을 계속해서 찾아봐도 없었는데, 나의 방향이 잘못되었기 때문에 없는 것이었다.

앞으로도 비슷한 상황을 겪는다면 다른 파트도 검토해보아야겠다.

또한 라이브러리를 사용하는 것에 대해 부정적이었는데,
DX를 향상시키고 가볍다면, 좀 더 열린마음으로 고려해보아야겠다는 생각도 하게 되었다.

끗!