MancityBallboy 흔적 남기기

쿠키와 세션

쿠키와 세션

오늘은 프론트엔드 기본 상식이라고 할 수 있는 쿠키와 세션에 대해 알아 보겠습니다.

쿠키와 세션이 필요한 이유

쿠키와 세션이 필요한 이유는 HTTP 특성 때문입니다.

  • connectless(비연결 지향)
    • 서버가 클라이언트에 데이터를 보내고 나서는 연결을 끊습니다.
  • stateless(상태정보유지안함)
    • HTTP 통신은 정보를 전달한 후 연결을 끊기 때문에 클라이언트의 상태를 알 수 없습니다.

이와 같은 HTTP 통신의 특성 때문에 상태를 유지 하기 위해서는 쿠키와 세션이 필요합니다.

쿠키

클라이언트 로컬에 저장되는 key-value 쌍으로 이루어진 작은 데이터 파일입니다.

구성요소

  • 쿠키이름
  • 쿠키 값
  • 만료 시간
  • 전송할 도메인 명
  • 전송할 경로
  • 보안연결 여부
  • HttpOnly 여부

작동방식

  1. 클라이언트가 서버에 로그인 요청을 합니다.

  2. 서버에서 로그인 요청 유효성을 검사한 후 서버가 클라이언트에 응답헤더쿠키에 저장할 정보를 포함하여 전달합니다.

    ex) set-cookie: user=username

  3. 클라이언트는 정보를 쿠키에 저장합니다.

  4. 그 이후 클라이언트가 서버에 요청할 때마다 쿠키정보를 요청헤더에 포함하여 요청합니다.

쿠키의 기한은 정해져 있지 않기 때문에 명시적으로 지우지 않는다면 반영구적으로 존재합니다.

쿠키 사용 사례

자동 로그인, 장바구니, ‘오늘 더이상 보지 않음’ … etc

쿠키 확인

크롬 이용자를 기준으로 설명을 하면 오른쪽 클릭 후 검사로 들어가서 application탭으로 들어가면 쿠키를 확인 할 수 있습니다.

쿠키는 쉽게 수정할 수 있으므로 암호화하여 저장하는 것이 안전합니다.

세션

세션은 브라우저가 끝날때까지 클라이언트를 상태를 유지하게 해주는 기술입니다.

작동 방식

  1. 클라이언트가 서버에 로그인 요청을 합니다.
  2. 서버가 로그인 요청을 유효성 검사를 한 후 유니크한 sessionId를 생성한 후 세션 저장소에 저장합니다.
  3. 서버가 응답할때 set-cookie: sessionId:qwfasfwegeg와 같은 방식으로 응답헤더에 포함 하여 응답합니다.
  4. 클라이언트가 요청할때 마다 요청헤더sessionId를 포함하여 요청합니다.
  5. 서버에서 sessionId가 유효한지 확인한 후 응답합니다.

세션은 서버에 저장하므로 계속 늘어날 경우 서버 과부하가 일어날 수 있습니다.

세션 사용 사례

로그인 유지

쿠키와 세션의 차이점

보안

쿠키는 로컬에 저장하고 세션은 서버에 저장하기 때문에 세션이 보다 안전하다.

속도

쿠키는 파일에서 읽고, 세션은 서버에서 찾아서 확인해야 하기 때문에 쿠키가 빠릅니다.

저장위치

쿠키는 로컬에 세션은 서버에 저장됩니다.

Life Cycle

쿠키는 로컬에 파일로 존재하지만 세션은 브라우저가 꺼지면 지워집니다.

다음에는 쿠키, 세션과 비슷한듯 다른 캐시에 대해서 알아 보도록 하겠습니다.

참고 사이트

  • https://chrisjune-13837.medium.com/web-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98%EC%9D%B4%EB%9E%80-aa6bcb327582
  • https://jeong-pro.tistory.com/80