2021년 12월 26일
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다.
쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다.
쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다.
Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다.Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냅니다.document.cookie 프로퍼티를 이용하면 브라우저에서도 쿠키에 접근할 수 있습니다.
쿠키와 다양한 쿠키의 옵션을 다루는 일은 쉽지 않습니다. 이 챕터에선 이에 대해 자세히 알아보도록 하겠습니다.
지금 보고 있는 이 사이트와 관련된 쿠키가 브라우저에 저장되어있는지 알아봅시다.
// javascript.info에선 Google Analytics(GA)를 사용해 데이터를 수집하고 있습니다.
// 이와 관련된 쿠키를 확인해 봅시다.
alert( document.cookie ); // cookie1=value1; cookie2=value2;...
document.cookie는 name=value 쌍으로 구성되어있고, 각 쌍은 ;로 구분합니다. 이때, 쌍 하나는 하나의 독립된 쿠키를 나타냅니다.
;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있습니다. 정규 표현식이나 배열 관련 함수를 함께 사용해서 말이죠.
이에 관한 연습문제를 아래에서 풀어보길 권유합니다. 쿠키 조작에 쓰이는 몇 가지 헬퍼(도우미) 함수를 챕터 끝에 명시해 놓았으니, 이를 참고하셔도 좋습니다.
document.cookie에 직접 값을 쓸 수 있습니다. 이때 cookie는 데이터 프로퍼티가 아닌 접근자(accessor) 프로퍼티입니다. 앞서 프로퍼티 getter와 setter에서 학습한 바와 같이, 접근자 프로퍼티에 값을 할당하는 것은 데이터 프로퍼티에 값을 할당하는 것과는 조금 다르게 처리됩니다.
document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신합니다. 이때, 다른 쿠키의 값은 변경되지 않습니다.