Promise와 함께 사용하는 웹사이트의 쿠키 관리 기능 개발

13 Sep 2023

Promise

쿠키는 웹사이트에서 사용자의 웹 브라우저에 저장되는 작은 데이터 조각입니다. 이를 통해 웹사이트는 사용자에 대한 정보를 추적하고 세션 유지 및 사용자 경험 개선에 활용할 수 있습니다. 그러나 쿠키 관리는 사용자 개인 정보 보호 측면에서 중요한 문제가 될 수 있습니다.

이 글에서는 Promise를 사용하여 웹사이트의 쿠키 관리 기능을 개발하는 방법에 대해 알아보겠습니다. Promise는 비동기 처리를 간편하게 다룰 수 있는 JavaScript의 기능입니다.

1. 쿠키 설정하기

쿠키를 설정하기 전에, 사용자의 동의를 받아야 합니다. 이를 위해 웹사이트에서 동의 여부를 확인하는 체크박스 또는 동의 버튼을 제공해야 합니다.

function setCookie(cookieName, cookieValue, expiresInDays) {
  return new Promise((resolve, reject) => {
    if (!checkUserConsent()) {
      reject("사용자 동의가 필요합니다.");
    }

    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + expiresInDays);

    const cookieString = `${encodeURIComponent(cookieName)}=${encodeURIComponent(
      cookieValue
    )}; expires=${expiryDate.toUTCString()}; path=/;`;

    document.cookie = cookieString;
    resolve();
  });
}

위의 코드는 setCookie 함수를 정의한 것입니다. 이 함수는 cookieName, cookieValue, expiresInDays라는 세 개의 인자를 입력받습니다. 사용자가 동의한 경우, cookieString을 생성하여 document.cookie에 할당합니다. 그리고 Promise를 이용해 비동기 처리를 수행한 후, resolve를 호출하여 완료되었음을 알립니다.

2. 쿠키 가져오기

설정된 쿠키를 가져오는 함수를 만들어 봅시다.

function getCookie(cookieName) {
  return new Promise((resolve, reject) => {
    const cookies = document.cookie.split(";");

    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();

      if (cookie.startsWith(`${encodeURIComponent(cookieName)}=`)) {
        const cookieValue = decodeURIComponent(
          cookie.substring(cookieName.length + 1)
        );
        resolve(cookieValue);
      }
    }

    reject("해당 쿠키를 찾을 수 없습니다.");
  });
}

위의 코드에서는 getCookie 함수를 정의하며, cookieName을 인자로 받습니다. document.cookie에 저장된 모든 쿠키를 가져와 cookieName과 일치하는 쿠키를 찾습니다. 해당 쿠키가 존재하는 경우, cookieValue를 반환합니다. 그렇지 않은 경우, reject를 호출하여 오류 메시지를 반환합니다.

3. 쿠키 삭제하기

쿠키를 삭제하는 함수를 만들어 봅시다.

function deleteCookie(cookieName) {
  return new Promise((resolve) => {
    document.cookie = `${encodeURIComponent(
      cookieName
    )}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    resolve();
  });
}

위의 코드에서는 deleteCookie 함수를 정의하며, cookieName을 인자로 받습니다. document.cookie에 할당된 해당 쿠키를 삭제합니다. 그리고 Promise를 이용해 비동기 처리를 수행한 후, resolve를 호출하여 완료되었음을 알립니다.

마무리

위에서 살펴본 기능을 통해 웹사이트에서 쿠키를 관리할 수 있습니다. Promise를 사용하여 비동기 처리를 간편하게 관리할 수 있으며, 사용자의 동의를 받아 보안과 개인 정보 보호를 보장할 수 있습니다.

#webdevelopment #cookies