쿠키는 맛있는 간식이기도 하지만, 현대 웹사이트에서 없어서는 안 될 핵심 요소이기도 합니다.
쿠키(Cookie)는 사용자에 관한 데이터를 웹 브라우저에 저장할 수 있게 해주는 기술입니다. 주로 로그인 세션 정보를 저장하는 데 활용되며, 덕분에 브라우저는 사용자가 해당 웹 페이지에 로그인했다는 사실을 기억할 수 있습니다.
이 가이드에서는 쿠키가 왜 필요한지, 어떤 종류의 쿠키가 있는지, 그리고 자바스크립트에서 쿠키를 어떻게 다루는지 하나씩 살펴보겠습니다. 그럼 시작해볼까요?
브라우저 쿠키란 무엇인가?
쿠키는 사용자에 관한 정보를 브라우저에 저장하는 문자열입니다. 이 개념은 1990년대 세계에서 가장 인기 있는 브라우저 중 하나를 개발했던 넷스케이프(Netscape)가 처음 도입했습니다. 넷스케이프는 사용자가 이미 사이트를 방문한 적이 있는지 추적하기 위해 쿠키를 개발했는데, 방문 기록이 있다면 사용자가 넷스케이프에 대해 어느 정도 알고 있다고 판단할 수 있었기 때문입니다.
쿠키에는 최소한 이름(name)과 값(value) 필드가 반드시 포함되어야 합니다. 이름 필드는 값 필드의 내용을 식별하는 역할을 합니다. 또한 애플리케이션에서 쿠키를 활용하는 방식에 따라 파일 경로나 만료 시점 같은 추가 속성을 저장할 수도 있습니다.
다음은 쿠키의 한 예입니다:
Name: Authentication Value: AUTHENTICATION_KEY Domain: careerkarma.com
쿠키는 키(key):값(value) 쌍으로 저장됩니다. 이 쿠키를 조회하면 다음과 같이 표시됩니다:
Authentication=AUTHENTICATION_KEY
이 쿠키는 브라우저에 AUTHENTICATION_KEY라는 값을 저장하며, careerkarma.com 도메인에 접속할 때마다 해당 사이트에서 이 쿠키를 사용할 수 있습니다.
한 사이트에 설정할 수 있는 쿠키의 개수에는 제한이 없지만, 실제로 대부분의 애플리케이션은 몇 개의 쿠키만 사용합니다. 쿠키는 주로 사용자의 세션을 추적하는 용도로 활용됩니다.
브라우저 쿠키 조회하기
자바스크립트에는 document.cookie라는 객체가 있으며, 여기에는 사이트에서 사용 가능한 모든 쿠키 정보가 담겨 있습니다. 쿠키를 설정, 수정, 삭제하려면 이 객체를 조작해야 합니다. 쿠키를 조회하려면 단순히 이 객체를 호출하기만 하면 됩니다:
console.log(document.cookie);
이 코드는 브라우저에 설정된 모든 쿠키 목록을 반환합니다. 별도의 커스텀 함수를 작성하지 않는 한, 이 목록에서 특정 쿠키 하나만 골라 가져올 수는 없다는 점에 유의하세요.
브라우저 쿠키 설정 방법
브라우저 쿠키는 어떻게 설정할까요? 미리 알아두면 좋은 사실이 하나 있습니다. 바로 진짜 쿠키를 굽는 것보다 오히려 더 쉽다는 점입니다.
예를 들어 사용자의 이메일을 쿠키에 저장하고 싶다고 가정해봅시다. 다음 자바스크립트 코드로 구현할 수 있습니다:
document.cookie = "email=user@email.com"; console.log(document.cookie);
이 코드는 이름이 "email"이고 값이 "user@email.com"인 쿠키를 생성합니다. console.log() 문은 다음과 같은 결과를 출력합니다:
email=user@email.com;
쿠키가 유효한 경로(path)를 지정할 수도 있습니다:
document.cookie = "email=user@email.com; path=/dashboard";
이렇게 하면 "email" 쿠키가 "/dashboard"로 시작하는 모든 경로에서 사용 가능하게 됩니다.
쿠키 만료 날짜 설정
기본적으로 쿠키는 브라우저가 닫히면 삭제됩니다. 쿠키를 설정할 때 만료 날짜를 추가하면 이 기본 동작을 재정의할 수 있습니다:
document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2025 12:00:00 UTC";
이 코드는 지정된 날짜와 시간에 만료되는 쿠키를 생성합니다. 만료 날짜는 반드시 UTC 시간 기준으로 명시해야 합니다.
만료 날짜를 설정하는 일반적인 방법 중 하나는 UTC 타임스탬프를 반환하는 자바스크립트 Date 객체를 활용하는 것입니다. 2020년 6월 30일에 만료되는 쿠키는 다음 코드로 설정할 수 있습니다:
const expiryDate = new Date(2020, 5, 30); document.cookie = "email=user@email.com; expires=" + expiryDate + ";";
참고로 Date 객체에서 월(month)은 0부터 시작하므로 6월은 5로 지정해야 한다는 점을 기억하세요. 이처럼 월 인덱싱 방식을 잘못 이해하면 의도하지 않은 만료 날짜가 설정될 수 있습니다.
document.cookie 객체는 쿠키의 최대 수명(Max-Age) 설정도 지원합니다. Max-Age는 쿠키가 생성된 후 얼마나 오래 유지될지를 초 단위로 지정합니다. 모든 브라우저가 지원하는 것은 아니지만, 쿠키가 생성된 시점을 기준으로 만료 시간을 손쉽게 지정할 수 있다는 장점이 있습니다:
const maxAge = 24 * 60 * 60 * 2; document.cookie = "email=user@email.com; max-age=" + maxAge + ";";
이 코드는 이틀 후에 만료되는 쿠키를 생성합니다.
쿠키 수정 및 삭제
쿠키를 수정하거나 삭제하는 전용 함수는 따로 존재하지 않습니다. 대신 document.cookie 객체를 직접 변경해야 합니다.
쿠키 수정은 생성할 때와 동일한 방식으로 수행할 수 있습니다:
document.cookie = "email=user@email.app;"
이 코드는 "email" 쿠키의 값을 "user@email.com"에서 "user@email.app"로 변경합니다.
쿠키 삭제도 비슷한 방식으로 처리합니다. 생성 또는 수정할 때와 같은 문법을 사용하되, 쿠키에 할당된 값을 비우고 만료 날짜를 과거로 지정하면 됩니다:
document.cookie = "email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
이때 올바른 쿠키를 정확히 삭제할 수 있도록 경로(path)를 함께 지정하는 것이 좋습니다.
쿠키의 종류
라즈베리, 초코칩, 퍼지… 아니죠, 그런 종류의 쿠키가 아닙니다! 브라우저에는 크게 세 가지 종류의 쿠키가 있습니다. 바로 세션(session), 영속(persistent), 서드파티(third-party) 쿠키입니다.
세션 쿠키(Session Cookie)
세션 쿠키는 브라우저가 닫힐 때까지 존재하는 쿠키입니다. 만료 날짜 없이 설정된 쿠키가 여기에 해당합니다. 일부 개발자들은 사용자 인증에 사용되는 모든 쿠키를 "세션 쿠키"라고 부르기도 하지만, 인증에 사용할 수 있는 쿠키가 세션 쿠키만 있는 것은 아니라는 점에 유의하세요.
영속 쿠키(Persistent Cookie)
영속 쿠키는 브라우저가 닫힌 후에도 남아 있는 쿠키입니다. 만료 날짜가 지정된 쿠키가 여기에 속합니다.
서드파티 쿠키(Third-party Cookie)
서드파티 쿠키는 현재 방문 중인 사이트가 아닌 다른 웹사이트에 의해 생성된 쿠키입니다. 대표적인 예로 Google Analytics 쿠키를 들 수 있습니다. 사이트에 Google Analytics를 설치하면 해당 서비스가 방문자를 추적하기 위한 쿠키를 설정할 수 있습니다.
마무리
쿠키는 사용자 정보를 브라우저에 저장할 수 있는 편리한 수단입니다. 사용자가 사이트를 방문한 적이 있는지 추적하거나, 로그인 상태 같은 인증 정보를 저장하는 용도로 널리 활용됩니다.
쿠키는 세션, 영속, 서드파티의 세 가지 유형으로 나뉩니다. 직접 애플리케이션을 개발할 때는 주로 세션 쿠키와 영속 쿠키를 다루게 되며, document.cookie 객체 하나만 잘 활용해도 쿠키의 생성, 조회, 수정, 삭제를 모두 처리할 수 있습니다.