[FE] 쿠키, 세션, 웹스토리지의 차이

🗣️ 쿠키, 세션, 웹스토리지의 차이를 설명해보세요.

• 의도: 클라이언트와 서버 사이의 상태 관리를 어떻게 하는지, 브라우저 API에 대한 이해도가 있는지 확인하는 질문

• 팁: 각 기술마다 사용 예시를 든다.

• 나의 답안

  쿠키, 세션, 웹스토리지는 모두 웹에서 데이터를 저장하고 관리하는 방법입니다.
  이들 각각은 고유한 특성과 용도를 가지고 있습니다.

  먼저, 쿠키는 서버가 클라이언트에 저장하는 작은 데이터 파일로, 주로 사용자 식별, 세션 유지, 사용자 설정 저장에 사용됩니다.
  쿠키는 클라이언트가 서버에 요청을 보낼 때마다 자동으로 요청 헤더에 포함되어 전송됩니다.
  이를 통해 서버는 사용자를 식별할 수 있습니다.
  쿠키는 보안에 취약할 수 있으므로 중요한 정보는 저장하지 않는 것이 좋습니다.
  보완 방법으로는 HttpOnly 속성을 사용하여 자바스크립트에서 쿠키에 접근하지 못하도록 할 수 있고, Secure 속성을 사용하여 HTTPS 연결에서만 쿠키가 전송되도록 할 수 있습니다.

  세션은 사용자와 웹 서버 간의 상호작용을 관리하는 서버 측 저장 방식입니다.
  세션 데이터는 클라이언트의 상태를 서버에 저장합니다.
  클라이언트에는 세션 ID가 쿠키로 저장되어 서버에 요청 시 함께 전송됩니다.
  세션 데이터는 서버에 저장되므로 클라이언트 측 저장 방식보다 보안이 더 강화됩니다.
  하지만 세션 하이재킹을 방지하기 위해 세션 ID를 안전하게 관리해야 합니다.

  웹스토리지는 HTML5에서 도입된 클라이언트 측 저장소로, 로컬 스토리지와 세션 스토리지로 구분됩니다.
  로컬 스토리지는 데이터가 명시적으로 삭제되지 않는 한 영구적으로 저장되는 반면, 세션 스토리지는 브라우저 세션이 종료되면 데이터가 삭제됩니다.
  웹스토리지 데이터는 서버에 자동으로 전송되지 않으므로, 필요에 따라 자바스크립트 데이터를 읽어 서버에 전송해야 합니다.
  웹스토리지는 클라이언트 측(웹 브라우저)에 저장되어 쉽게 접근할 수 있기 때문에 중요한 정보는 저장하지 않는 것이 좋습니다.

• 제공된 답안 (모범 답안)

  말씀해주신 쿠키, 세션, 웹 스토리지는 모두 웹에서 데이터를 저장하는 기술입니다. 각각 순서대로 특징을 설명드리겠습니다.

  쿠키는 클라이언트와 서버 간의 데이터를 저장하여 HTTP 통신에 사용합니다.
  HttpOnly 옵션을 통해 보안을 향상시킬 수 있는 특징을 가지고 있습니다.
  그래서 주로 로그인 인증 처리에 쓰이기도 하고, 우리가 최근 본 상품이나 관심 있는 주제를 저장해서 추천 서비스에 데이터를 제공하기도 합니다.
  어떤 웹사이트에 처음 방문하게 되면 쿠키 정책을 묻는 것도 다 데이터를 수집해서 맞춤 광고를 보여주려는 의도입니다.

  세션은 서버에서 사용자 정보를 유지하는 방법입니다.
  세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.

  웹 스토리지는 크게 로컬 스토리지, 세션 스토리지가 많이 쓰입니다.
  많은 데이터를 저장할 수 있고 서버로 전송되지 않는다는 장점이 있으나, 자바스크립트 코드를 통해 탈취될 위험이 있으므로 민감한 정보를 저장하는 것은 피하는 것이 좋습니다.
  둘의 차이점도 설명하자면, 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 반면, 세션 스토리지는 이름처럼 세션동안만 데이터가 유지되기에 브라우저를 닫으면 데이터는 사라집니다.
  저같은 경우에는 다크 모드의 여부를 판단하기 위해 로컬 스토리지를 사용하기도 했습니다.

---

📝 개념 정리

• 쿠키, 세션, 웹스토리지는 모두 데이터를 저장하고 관리하는 방법이다.

• 이들 각각은 고유한 특성과 용도를 가지고 있다.

🌟 쿠키 (Cookies)

• 정의
  • 서버가 클라이언트(웹 브라우저)에 저장하는 작은 데이터 파일
  • 주로 사용자 식별, 세션 유지, 사용자 설정 저장 등에 사용된다.

• 특징
  1. 크기 제한

     • 쿠키는 일반적으로 도메인당 약 4KB 정도의 데이터를 저장할 수 있다.

  2. 수명

     • 쿠키는 만료 날짜를 설정할 수 있다.
     • 만료 날짜가 설정되면, 해당 날짜까지 쿠키가 유지된다.
     • 만료 날짜가 없으면, 브라우저 세션이 종료될 때 쿠키가 삭제된다.

  3. 저장 위치

     • 쿠키는 클라이언트 측(웹 브라우저)에 저장된다. 각 도메인마다 별도로 관리된다.

  4. 전송

     • 쿠키는 클라이언트가 서버에 요청을 보낼 때마다 자동으로 요청 헤더에 포함되어 전송된다. 이를 통해 서버는 사용자를 식별할 수 있다.

  5. 보안

     • 쿠키는 보안에 취약할 수 있다. 중요한 정보는 저장하지 않는 것이 좋다.
     • HttpOnly 속성을 사용하면, 자바스크립트에서 쿠키에 접근하지 못하도록 할 수 있다.
     • Secure 속성을 사용하면, HTTPS 연결에서만 쿠키가 전송된다.

• 용도
  • 사용자 로그인 상태 유지
  • 사용자 설정 저장 (예: 언어 설정)
  • 세션 식별 및 관리

---

🌟 세션 (Sessions)

• 정의
  • 사용자와 웹 서버 간의 상호작용을 관리하는 서버 측 저장 방식
  • 세션은 클라이언트의 상태를 서버에 저장하고, 클라이언트는 세션 ID를 통해 자신의 세션을 식별한다.

• 특징
  1. 크기 제한

     • 세션 데이터는 서버에 저장되므로, 서버의 저장 공간에 따라 크기가 제한된다.

  2. 수명

     • 세션은 일반적으로 일정 시간이 지나면 만료된다. 이는 서버 설정에 따라 달라진다.
     • 사용자가 로그아웃하거나 브라우저를 닫으면 세션이 만료될 수 있다.

  3. 저장 위치

     • 세션 데이터는 서버에 저장된다.
     • 클라이언트에는 세션 ID가 쿠키로 저장되어 서버에 요청 시 함께 전송된다.

  4. 보안

     • 세션 데이터는 서버에 저장되므로, 클라이언트 측 저장 방식보다 보안이 더 강화된다.
     • 세션 하이재킹을 방지하기 위해 세션 ID를 안전하게 관리해야 한다.

• 용도
  • 사용자 인증 상태 유지
  • 쇼핑 카드 정보 저장
  • 사용자 세션별 데이터 관리

---

🌟 웹스토리지 (Web Storage)

• 정의
  • HTML5에서 도입된 클라이언트 측 저장소로, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 구분된다.

• 특징
  1. 크기 제한

     • 웹스토리지는 일반적으로 도메인당 5~10MB의 데이터를 저장할 수 있다.

  2. 수명

     • 로컬 스토리지 : 데이터가 명시적으로 삭제되지 않는 한 영구적으로 저장된다.
     • 세션 스토리지 : 브라우저 세션이 종료되면 데이터가 삭제된다.

  3. 저장 위치

     • 웹스토리지는 클라이언트 측(웹 브라우저)에 저장된다.

  4. 전송

     • 웹스토리지 데이터는 서버에 자동으로 전송되지 않는다.
     • 필요에 따라 자바스크립트로 데이터를 읽어 서버에 전송해야 한다.

  5. 보안

     • 웹스토리지에 중요한 정보를 저장하지 않는 것이 좋다.
     • 데이터는 클라이언트 측에 저장되므로 쉽게 접근될 수 있다.

• 용도
  • 브라우저에 영구적으로 데이터를 저장 (로컬 스토리지)
  • 브라우저 세션동안 임시 데이터를 저장 (세션 스토리지)
  • 사용자 설정, 캐시 데이터, 폼 데이터 저장 등

---

🌟 요약 (표로 비교)

특징	쿠키 (Cookies)	세션 (Sessions)	웹스토리지(Web Storage)
저장 위치	클라이언트	서버	클라이언트
데이터 크기	약 4KB	서버 저장 공간에 따름	약 5~10MB
수명	만료 날짜 또는 브라우저 종료 시	서버 설정에 따라 달라짐	로컬 스토리지: 영구적 세션 스토리지: 브라우저 종료 시
전송 방식	요청 시 자동 전송	요청 시 세션 ID 전송	자동 전송 없음 (필요 시 자바스크립트로 전송)
보안	보안에 취약, HttpOnly, Secure 속성 사용 가능	상대적으로 안전, 세션 ID 관리 필요	보안에 취약, 중요한 정보 저장 금지
주요 용도	사용자 로그인 상태 유지, 사용자 설정 저장	사용자 인증 상태 유지, 세션별 데이터 관리	로컬 스토리지: 브라우저에 데이터 영구 저장 세션 스토리지: 세션 동안 임시 데이터 저장