Cookie & Session

HTTP (HyperText Transfer Protocol)

: HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 규약 (웹에서의 모든 데이터 교환의 기초)

• HTTP는 웹 브라우저와 서버가 서로 대화하기 위해 사용하는 공통 언어 또는 약속임
• 브라우저가 '이 페이지 보여줘'라고 요청(Request)을 보내면, 서버는 그에 맞는 HTML, 이미지 등을 응답(Response)으로 보내주는 방식으로 동작함

HTTP 특징

1. 비 연결 지향 (connectionless)

   • 서버는 요청에 대한 응답을 보낸 후 연결을 끊음
   • 클라이언트는 서버와 서로 연결되어 있는 상태가 아님

   

   

2. 무상태 (stateless)

   • 연결을 끊는 순간 클라이언트와 서버 간의 통신이 끝나며 상태 정보가 유지되지 않음

   • 무상태의 의미

     • 장바구니에 담은 상품을 유지할 수 없음
     • 로그인 상태를 유지할 수 없음

     

쿠키 (Cookie)

: 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각

• 쿠키는 웹사이트가 사용자의 브라우저에 남기는 작은 데이터 조각임

  이를 통해 서버는 “나는 이전에 이 사이트에 방문 했었고, 로그인도 했어”와 같이 사용자를 기억하고 식별 가능

  ex) 매번 아이디와 비밀번호 다시 입력 안해도 자동 로그인이 유지되거나, 장바구니에 담은 상품이 저장되는 것

• 쿠키 특징

  • 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각임
  • 사용자 인증, 추적, 상태 유지 등에 사용되는 데이터 저장 방식임
  • key-value 형식의 데이터임

• 쿠키 사용 예시

  • 로그인 유지(세션 관리)
  • 장바구니
  • 언어, 테마 등 사용자 설정 기억

• 쿠키 동작 예시

  1. 브라우저가 웹 서버에 웹 페이지를 요청함
  2. 웹 서버는 요청된 페이지와 함께 쿠키를 포함한 응답을 브라우저에게 전송함
  3. 브라우저는 받은 쿠키를 저장소에 저장하고, 쿠키의 속성(만료 시간, 도메인, 주소 등)도 함께 저장됨
  4. 이후 브라우저가 같은 웹 서버에 웹 페이지를 요청할 때, 저장된 쿠키 중 해당 요청에 적용 가능한 쿠키를 포함하여 함께 전송함
  5. 웹 서버는 받은 쿠키 정보를 확인하고, 필요에 따라 사용자 식별, 세션 관리 등을 수행함
  6. 웹 서버는 요청에 대한 응답을 보내며, 필요한 경우 새로운 쿠키를 설정하거나 기존 쿠키를 수정할 수 있음

  

  

• 쿠팡에서 쿠키를 이용한 장바구니 예시를 확인해보자

  쿠팡에서 로그인하지 않고 ‘제주삼다수 그린 무라벨’을 장바구니에 담아보자. 그리고 개발자 도구 확인하면

  

  여기에서 맨 위의 cartView.pang을 눌러보면

  

  ⇒ key - value 형식의 데이터가 보임. 단순히 값만 저장하는게 아니라 여러 속성 제어 가능

  하나의 웹사이트에서 많은 수의 쿠키를 동시에 사용

  이를 통해서 메인 페이지로 이동해도 장바구니가 유지됨.

  이번에는 Application 탭을 가보자

  

  

  ⇒ cart 쿠키를 마우스 오른쪽 버튼을 누르면 Clear 버튼이 나옴. 이를 누르면 장바구니가 초기화됨

• 쿠키의 작동 원리와 활용

  1. 쿠키 저장 방식

     • 브라우저(클라이언트)는 쿠키를 KEY-VALUE의 데이터 형식으로 저장함
     • 쿠키에는 이름, 값 외에도 만료 시간, 도메인, 경로 등의 추가 속성이 포함됨

  2. 쿠키 전송 과정

     • 서버는 HTTP 응답 헤더의 Set-Cookie 필드를 통해 클라이언트에게 쿠키를 전송함
     • 브라우저는 받은 쿠키를 저장해 두었다가, 동일한 서버에 재요청 시 HTTP 요청 Header의 Cookie 필드에 저장된 쿠키를 함께 전송함

  3. 쿠키의 주요 용도

     • 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용됨
     • 이를 이용해 사용자의 로그인 상태를 유지할 수 있음
     • 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜 주는 역할을 함

     ⇒ 서버에게 “나 로그인 된(인증된) 사용자야!”라는 인증 정보가 담긴 쿠키를 매 요청마다 계속 보내는 것

• 쿠키 사용 목적

  1. 세션 관리 (Session management)
     • 로그인, 아이디 자동완성, 공지 하루 안 보기, 팝업 체크, 장바구니 등의 정보 관리
  2. 개인화 (Personalization)
     • 사용자 선호 설정(언어 설정, 테마 등) 저장
  3. 추적, 수집 (Tracking)
     • 사용자 행동을 기록 및 분석

<aside> 💡

[Tip]

• 쿠키는 탈취될 수 있으니, 비밀번호 등 민감한 정보는 절대 직접 저장하면 안 됨 → 요즘은 브라우저 자체 수준이 높아서 큰 걱정은 없긴 함
• 쿠키는 모든 요청에 포함되어 전송되므로, 크기를 최소화해야 사이트 성능에 유리함 </aside>

세션