쿠키와 세션에 대해 공부하고 있는데, 실제 쿠키가 어떻게 동작하는지 이해가 잘 안 가서 실습을 진행해보기로 결정했다.

쿠키 동작 과정 (기본 흐름)

• 1. 클라이언트(브라우저)가 페이지를 요청한다.
     ex)사용자가 사이트에 접속

GET /login

• 2. 웹서버는 쿠키를 생성한다.
     ex) 로그인 세션 ID 만들기

• 3. 서버는 응답(Response) 헤더에 쿠키를 담아서 보낸다.
  • 즉, 서버가 브라우저에게 해당 내용을 쿠키로 저장하라고 하는 것이다.

Set-Cookie: sessionId=abc123; Path=/; HttpOnly

• 4. 브라우저는 쿠키를 저장한다.

• 5. 이후 같은 사이트 요청 시 브라우저가 쿠키를 자동으로 첨부한다.
     ex) 사용자가 다시 요청한다.
     -> 브라우저는 자동으로 붙인다.

	Cookie: sessionId=abc123

• 6. 서버는 쿠키 값을 읽고 사용자를 식별한다.
     (서버는 sessionID를 보고 로그인 한 사용자라고 판단한다.)

• 7. 서버는 쿠키를 갱신하거나 삭제할 수도 있다
  • 만료 연장

    Set-Cookie: sessionId=abc123; Max-Age=3600

  • 삭제

    Set-Cookie: sessionId=; Max-Age=0

• 8. 브라우저는 만료되면 쿠키를 자동 삭제한다.
  • Max-Age, Expires 지나면 제거된다.

실습으로 쿠키 생성과정 확인하기

실습 순서는 다음과 같다.

1. 개발자 도구를 연다.

f12를 누르면 개발자 도구를 열 수 있다.

2. 개발자 도구에서 Network탭을 누른다.

3. 새로고침을 한 후, 요청들에서 type이 document인 줄 하나를 클릭한다.

4. 상세 Header 패널을 연다

5. Response Headers에서 Set-Cookie 항목을 확인한다

그럼 다음과 같이 set-cookies정보들을 볼 수 있다. 이것에 의미는 서버에서 쿠키를 내려줬다는 것이다.

6. Cookies 탭을 본다.

아까 Header에 들어가서 response Header에 있는 set-cookie에 있는 내용이 Response Cookies에 표 형태로 잘 들어가있는 것을 확인할 수 있다.

• Response Cookies: 서버가 내려준 쿠키

• Request Cookies: 브라우저가 다음 요청에 자동으로 첨부한 쿠키

즉, 쿠키는 서버에서 내려온 뒤 브라우저에 저장되고
이후 요청마다 자동으로 포함되어 서버로 전달되는 구조이다

정리

• Set-Cookie는 서버가 쿠키를 생성해서 내려주는 순간이다.
• Cookie는 브라우저가 저장된 쿠키를 자동으로 요청에 포함시키는 것이다.
• 개발자 도구 Network 탭을 통해 쿠키의 생성과 전달 흐름을 직접 확인할 수 있다.