쿠키 설정하기

6월초에 했던건데 회사가 정신없이 돌아가서 "주말에 해야지" 생각만 하다 한달만에 쓰는 글.✍️

회사에서 진행중인 프로젝트에서, 전체 플로우의 정보를 쿠키로 관리하는 로직을 작성할 기회가 있었다. 이제 일년을 채우고 2년차가 될 예정인데, 쿠키를 설정하고 삭제하는 일련의 코드들은 처음 작성해봐서 소소하게 기록을 남긴다.

일단 내가 데이터를 쿠키로 관리하기 위해서 작성한 코드들은 가장 기본적인 형태의 유틸함수로 별도 JS 파일에 작성해놓고, 데이터가 필요한 모든 페이지에서 해당 파일을 import하여 사용했다. 모든 페이지가 php 파일이어서 설정이 쉬웠던 것 같다.

https://hjinn0813.tistory.com/120

세션, 토큰, 캐시, 쿠키, 로컬 스토리지, 세션 스토리지

---

쿠키 설정하기

function setCookie(name, value, options = {}) {
  options = { path: '/', ...options };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

• 스코프 내부에서 options가 전달되지 않으면, 기본적으로 빈 객체가 들어간다. 기본 옵션으로 들어있는 path는 쿠키가 사이트 전체에서 유효하다는 의미다. 만약 특정 디렉토리를 설정한다면 해당 디렉토리 하위에 있는 경로에서만 쿠키에 접근할 수 있다.
• 조건문은 만료일을 의미한다. options.expires가 Date 객체로 들어오면, toUTCString()으로 문자열 형태의 만료일로 바꿔준다. 브라우저가 쿠키의 만료일을 이해할 수 있게 포맷팅하는 과정.
• let updatedCookie 부분은 쿠키의 이름과 값을 URI 인코딩하여 한 줄로 만드는 과정. 예를 들어 cart={"item":1}라는 데이터였다면, 이걸 여기서 cart=%7B%22item%22%3A1%7D 같은 형식으로 변경한다.
• 반복문은 전달된 옵션들을 하나씩 쿠키 문자열에 추가하는 과정이다. 객체 느낌으로 만들어준다.
• 완성된 쿠키를 document.cookie에 할당한다. 이렇게 되면 브라우저는 쿠키를 저장하거나 최신 데이터로 덮어쓴다.

---

쿠키 가져오기

function getCookie(name){
  const cookies = document.cookie.split(';');
  for(let cookie of cookies){
    const [key, val] = cookie.trim().split('=');
    if (key === name) return decodeURIComponent(val);
  }
}

• 가장 먼저 브라우저에 저장된 모든 쿠키를 문자열로 반환해서 세미콜론(;) 기준으로 나누어 배열을 만든다.
• 그리고 반복문에서 쿠키 문자열 배열을 돌면서 탐색하는데,
  • 우선 각 쿠키의 문자열을 좌우공백 제거하고 등호(=) 기준으로 나눈다. 예를 들어 "theme=dark"였다면 이걸 ["theme", "dark"]로 나누는거고, 구조 분해 할당으로 key = 'theme', val = 'dark'의 형태로 저장한다.
  • 조건문에서 찾으려는 쿠키 이름(name)과 일치하는지 비교하여, 일치하면 해당 값을 URI 디코딩해서 반환한다.

---

쿠키 삭제하기

function deleteCookie(name) {
  document.cookie = encodeURIComponent(name) + "=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

쿠키는 브라우저에서 직접 지우는 기능이 없어서, 만료일을 과거로 설정해서 브라우저가 스스로 쿠키를 버리게 해야한다. 그래서 쿠키 이름을 URI 인코딩하고, 사이트 전체 경로에서 만료일을 과거로 설정한다.

---

일하면서 새롭게 얻게 되는 인사이트들을 꾸준히 블로그에 기록하려고 했는데, 요즘은 바빠서 쉽지가 않다. 올해 연초부터 신규 프로젝트가 시작되면서 야근을 하는 경우도 있고, 퇴근하면 사무실에서 치열했던 두뇌와 피곤한 육신 때문에 침대에 눕기 바쁘다. 그래도 이렇게 틈이 있으면 나중에라도 기록해야지..!