웹은 웹브라우저에서 웹사이트로 전송되는 모든 요청이 별개가 되도록 설계되었습니다. 웹은 설계상 '메모리'가 없습니다. 웹페이지를 열 때마다 방문 중인 웹사이트에서 마지막 세션의 정보를 기억할 수 없습니다. 이렇게 하면 요청과 응답을 추적하는 메커니즘이 필요하지 않으므로 웹을 효율적이고 간단하게 만들 수 있습니다.
하지만 웹의 잊어버리는 성격도 문제입니다. 예를 들어 방문 중인 웹사이트에서 방금 장바구니에 담은 상품을 기억할 수 없다면 장바구니가 어떻게 작동할 수 있을까요?
이 문제를 해결하기 위해 쿠키가 발명되었습니다.
쿠키는 웹사이트에 메모리를 제공합니다.
웹사이트의 페이지를 방문하면 웹브라우저가 웹사이트의 서버에 페이지에 포함된 리소스(예: HTML, CSS, JavaScript, 이미지)를 요청합니다.
웹브라우저와 웹사이트는 HTTP 프로토콜에 따라 상호작용합니다. 커뮤니케이션을 위한 표준화된 규칙 집합입니다.
리소스에 대한 HTTP 요청에 대한 응답으로 웹사이트 서버는 리소스 자체와 함께 헤더라는 추가 정보를 포함할 수 있습니다. HTTP 응답에 포함된 Set-Cookie 헤더는 브라우저에 이름과 값이라는 텍스트를 저장하도록 지시합니다. 이를 쿠키라고 합니다. 예를 들어 응답 헤더 Set-Cookie:cat=tabby는 브라우저에 'cat'이라는 이름과 'tabby'라는 값을 가진 쿠키를 저장하도록 지시합니다.
이 쿠키가 설정되면 브라우저에서 웹사이트로의 후속 요청에 Cookie:cat=tabby 헤더가 포함됩니다. 웹사이트의 서버는 요청 헤더에서 쿠키에 액세스하여 값을 사용할 수 있습니다.
쿠키의 작동 방식: 단계별
cats.example 웹사이트를 방문한다고 가정해 보겠습니다. 사이트에서 고양이 이미지를 무작위로 표시하고 어떤 고양이가 표시되었는지 기록하려고 합니다.
다음 단계에서는 쿠키를 사용하여 이를 수행하는 방법을 설명합니다.
1. 브라우저가 파일을 요청함
cats.example 웹사이트의 홈페이지를 방문합니다.
브라우저가 cats.example의 cat.jpg를 포함하여 페이지의 파일을 요청합니다.
2. 웹사이트 서버가 응답함
cats.example의 서버가 이미지 파일 cat.jpg로 응답합니다.
서버는 응답에 Set-Cookie:cat=tabby 헤더를 포함합니다.
3. 브라우저가 응답을 수신함
브라우저가 이미지 파일을 수신하고 여기에 포함된 Set-Cookie:cat=tabby 헤더를 처리합니다.
쿠키가 저장됩니다(이름 cat, 값 tabby).
4. 브라우저가 추가 요청을 보냅니다.
이제 브라우저에 cats.example 요청과 함께 Cookie:cat=tabby 헤더가 포함됩니다.
cats.example 웹 서버는 요청을 수신하면 쿠키를 처리하고 이 값으로 원하는 작업을 실행할 수 있습니다. 예를 들어 동일한 고양이 이미지를 다시 전송하지 않도록 할 수 있습니다.
다음은 전체 쿠키 프로세스입니다.
- 브라우저가 웹사이트에 파일을 요청합니다.
- 웹사이트의 서버는 요청에 대한 응답으로 전송하는 파일과 함께
Set-Cookie:cat=tabby와 같은 헤더를 포함할 수 있습니다. - 브라우저가 응답을 수신하면 쿠키를 저장합니다.
- 후속 요청이 있을 때마다 브라우저는
Cookie:cat=tabby헤더에 쿠키를 서버로 전송합니다.
JavaScript로 쿠키에 액세스
이전 예에서는 Set-Cookie 응답 헤더를 사용하여 쿠키를 설정합니다.
document.cookie 메서드를 사용하여 JavaScript로 쿠키를 만들 수도 있습니다.
데모(javascript-cookie.glitch.me/)를 사용해 보세요.
자세히 알아보기: 문서: 쿠키 속성
쿠키가 필요한 이유는 무엇인가요?
1994년 엔지니어 루 몬툴리는 1990년대 중반에 가장 인기 있는 웹브라우저를 개발한 소프트웨어 회사인 Netscape에서 근무하고 있었습니다.
그때 통신사인 MCI는 세계 최초의 온라인 상점 중 하나에 장바구니 기능을 구축하려고 했습니다. MCI는 Montulli에게 연락하여 문제를 설명했습니다. 이에 Montulli는 사이트가 사용자의 웹브라우저에 소량의 텍스트, 이름, 값(예: cart-id=123)을 저장할 수 있는 기능을 HTTP에 추가했습니다. 당시 프로그래머들은 데이터 통신에 포함된 작은 추가 정보에 '매직 쿠키'라는 단어를 사용했기 때문에 '쿠키'라고 불렀습니다.
루는 일주일도 채 되지 않아 HTTP 쿠키 작업을 완료했습니다. 쿠키가 광고, 로그인, 결제, 사기 감지, 기타 중요한 웹 서비스에 근본적인 역할을 하게 될 줄은 몰랐습니다. 쿠키는 매우 간단한 기술이지만 광범위한 부작용이 있습니다.
쿠키 사용
쿠키를 사용하면 브라우저가 사용자에 관한 소량의 정보를 저장하여 여러 요청에서 '기억'할 수 있습니다. 쿠키는 다음과 같은 여러 가지 용도로 사용됩니다.
- 세션 관리
웹사이트에서 사용자를 인식하도록 허용합니다(예: 여러 페이지에서 로그인 상태 유지). - 맞춤설정
언어, 테마, 최근 본 항목과 같은 사용자 환경설정을 저장하여 웹사이트 환경을 맞춤설정합니다. - 추적
과거에는 쿠키가 타겟팅 광고 및 기타 사용 사례를 위해 웹사이트 전반에서 사용자 행동을 추적하는 데 사용되었습니다.
대신 쿠키는 일반적으로 서버에서 처리되는 식별자를 저장하고 전달하는 데 사용됩니다. 예를 들어 웹 분석 서비스에 대한 요청이 포함된 헤더에는 다음과 같은 쿠키가 포함될 수 있습니다.
Cookie: _analytics=ANALYTICS1.2.34567890.123456789
요청을 수신하는 애널리틱스 서버는 페이지에 관한 기타 정보와 함께 식별자를 처리할 수 있습니다.