Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 쿠키란? 용도와 동작 원리 완벽 정리

쿠키(Cookie)란 무엇인가?

쿠키는 방문자의 선호 설정, 구매 내역, 커미션 정보 등 더 나은 사용자 경험과 사이트 통계 분석에 필요한 각종 데이터를 기록하고 추적하는 가장 효율적인 방법입니다. HTTP 프로토콜은 상태를 유지하지 않는(stateless) 특성을 가지기 때문에, 페이지를 이동할 때마다 사용자 정보가 사라지는데, 쿠키는 바로 이 문제를 해결해 주는 핵심 기술입니다.

쿠키의 작동 원리

서버는 방문자의 브라우저에 쿠키 형태로 데이터를 전송합니다. 브라우저는 이 쿠키를 수락할 수 있으며, 수락한 경우 방문자의 하드 드라이브에 일반 텍스트 파일 형태로 저장됩니다.

이후 방문자가 같은 사이트의 다른 페이지에 접속하면, 브라우저는 저장해 둔 쿠키를 서버로 다시 전송합니다. 서버는 이 쿠키를 조회함으로써 이전에 저장했던 정보를 그대로 확인하거나 기억할 수 있게 됩니다. 로그인 상태 유지, 장바구니 저장, 맞춤형 광고 제공 등이 모두 이 원리를 활용한 대표적인 예입니다.

쿠키의 구성 요소 5가지

쿠키는 가변 길이의 필드 5개로 이루어진 일반 텍스트 데이터 레코드입니다. 각 필드의 역할은 다음과 같습니다.

  • Expires (만료일) — 쿠키가 만료되는 날짜를 지정합니다. 값이 비어 있으면 방문자가 브라우저를 종료하는 시점에 쿠키도 함께 삭제되는데, 이런 쿠키를 '세션 쿠키(session cookie)'라고 부릅니다. 반대로 만료일이 지정된 쿠키는 '영속 쿠키(persistent cookie)'라고 합니다.
  • Domain (도메인) — 쿠키를 발급한 사이트의 도메인 이름으로, 해당 쿠키가 유효한 도메인 범위를 결정합니다.
  • Path (경로) — 쿠키를 설정한 디렉터리 또는 웹 페이지의 경로입니다. 사이트의 모든 경로에서 쿠키를 사용하려면 값을 '/'로 지정하거나 비워 두면 됩니다.
  • Secure (보안) — 이 필드에 "secure"라는 키워드가 포함되어 있으면 HTTPS와 같은 보안 연결(secure server)을 통해서만 쿠키를 주고받을 수 있습니다. 값이 비어 있다면 별도의 제한 없이 일반 연결에서도 전송됩니다.
  • Name=Value (이름=값) — 쿠키의 실질적인 데이터 부분으로, 키-값(key-value) 쌍의 형태로 설정하고 검색합니다.

자바스크립트에서 쿠키 다루기

자바스크립트에서는 document.cookie 속성을 이용해 쿠키를 생성하고 읽거나 수정·삭제할 수 있습니다. 아래는 쿠키를 생성하는 간단한 예시입니다.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 12:00:00 UTC; path=/";

이처럼 쿠키는 클라이언트 측에 소량의 데이터를 저장해 두었다가 필요할 때 다시 활용할 수 있는 편리한 메커니즘이지만, 민감한 개인정보를 담기에는 적합하지 않으므로 용도와 크기 제한(일반적으로 도메인당 약 4KB)을 고려해 신중하게 사용하는 것이 좋습니다.