intro

HTTP 통신(요청/응답)의 stateless 특징은 독립적이고 과거의 통신에 대한 내용을 가지고 있지 않는다. 쿠키, 세션, 캐시 등은 HTTP의 stateless 특성을 일부 정보에 대해 stateful 상태를 유지하기 위해 사용된다.

cookie

• 브라우저 환경(로컬 스토리지)에 저장되는 작은 텍스트파일
• 클라이언트에 최대 300개 저장이 가능하며 하나의 도메인당 20개의 값을 가질 수 있다.
• 서버와 통신시 http 헤더에 포함된다.(Set-Cookie)
• 쿠키는 사용자 이외에 접근 및 수정이 가능하기 때문에 노출되어도 상관없는 정보만 담는다.
• 브라우저를 종료해도 지워지지 않고 설정한 유효기간에 맞춰 로컬에 보관된다.

cookie example

• 비회원 장바구니,
• 팝업창 보지 않기
• 로그인 및 브라우저 상태(다크모드) 등

session

• 동일한 클라이언트가 브라우저를 통해 웹 서버에 접속한 시점부터 브라우저를 종료한 시점 혹은 설정한 유효기간까지의 일련의 Request를 하나의 상태로보고, 그 상태를 유지하여 클라이언트와 웹 서버가 논리적으로 연결된 상태를 의미한다.
• 쿠키와 다르게 로컬이 아닌 서버에서 상태를 유지하기 때문에 쿠키보다 상대적으로 안전하다.
• 서버에서 모든 클라이언트에 대한 세션을 유지해야 할때 부하가 걸리기 쉽다.

예를 들어 첫 통신에서 로그인을 요청하면 서버에서 세션을 발급하고 클라이언트는 Set-Cookie를 통해 이에 대한 데이터를 쿠키에 저장한다. cookie는 클라이언트, session은 웹 서버 측에서 데이터를 저장하는 일련의 과정이다.

session example

• 로그인 유지 상태

cache

• 첫 번째 통신에 대한 Response 중 리소스가 비교적 큰 파일들을 클라이언트(로컬)에 저장해두고 그 이후 통신부터 서버에 접근하는 대신 로컬에 로컬의 cache를 가져오는 방식
• 자주 변경되는 데이터를 cache방식으로 사용한다면 변경된 데이터가 출력되지 않고 이전에 저장된 cache가 출력될 수 있으므로 목적에 맞는 저장 방식을 사용해야 한다.

cache exmaple

• 이미지 파일,
• CSS

summary

HTTP의 Statless 특성을 stateful하게 사용하기 위해 쿠키,세션을 사용한다. 쿠키는 클라이언트 로컬에 저장되는 텍스트 데이터 파일을 의미하고 비회원 장바구니, 다크모드처럼 웹페이지 설정 상태 같은 노출되어도 상관없는 데이터를 저장한다. 세션은 서버 측에 저장되는데, 클라이언트의 Request들을 하나의 상태로 유지한다. 브라우저가 종료되거나 설정한 유효기간까지 유지된다. 세션은 서버에 저장되기 때문에 사용자가 많아지면 서버가 부하될 수 있는 단점이 있다.
클라이언트가 처음 로그인을 요청하면 서버에서는 로그인 상태(Session Id)를 세션에 저장하고 이를 Set-Cookie로 클라이언트에 보내게 된다. 클라이언트를 Session Id를 Cookie에 저장하고 request할 때 함께 전달하며 로그인 상태를 유지(stateful)할 수 있다.
캐시는 리소스 파일들의 저장소로 볼 수 있는데, 이미지, CSS 등 자주 변경되지 않고 리소스가 큰 파일들을 로컬에 저장하며 첫 통신 이후 부터 캐시를 사용하여 통신 리소스를 줄일 수 있다.