쿠키, 세션, 웹스토리지

01. 쿠키(Cookies)란?

▶ 쿠키는 클라이언트(주로 웹 브라우저)에 저장되는 작은 데이터 조각입니다.
쿠키를 사용하면 서버가 클라이언트에 특정 데이터를 저장하도록 지시할 수 있으며, 클라이언트는 해당 데이터를 요청할 때마다 서버에 자동으로 전송합니다.

쿠키(Cookies)의 특징

1. 크기 제한: 쿠키는 일반적으로 최대 4KB의 데이터를 저장할 수 있습니다.
2. 수명: 쿠키는 만료 날짜를 지정할 수 있는데 이를 영구 쿠키라 하고 명시된 만료 날짜까지 유지됩니다. 반면에 만료 날짜가 지정되지 않으면 세션 쿠키가 되고 브라우저를 닫을 때 삭제됩니다.
3. 보안: 쿠키는 기본적으로 암호화되지 않으므로 민감한 데이터를 저장하는 데는 적합하지 않습니다. 하지만 HttpOnly 속성을 사용하면 JavaScript에서 접근할 수 없게 만들 수 있으며, Secure 속성을 사용하면 HTTPS를 통해서만 전송되도록 할 수 있습니다.
4. 범위: 쿠키는 도메인과 경로에 의해 범위가 정해지며, 동일 도메인과 경로 내의 요청에 대해서만 자동으로 전송됩니다.

쿠키(Cookies)의 사용 사례

1. 세션 관리: 사용자 로그인 정보 유지
2. 사용자 맞춤 설정: 테마, 언어 설정
3. 추적 및 분석: 사용자 활동 추적

02. 세션(Sessions)이란?

▶ 세션은 서버 측에서 사용자별로 상태를 유지하기 위해 사용되는 데이터 저장 방식입니다.
세션 데이터는 서버에 저장되며, 클라이언트는 세션 ID를 통해 서버에서 자신의 세션 데이터를 참조합니다.

세션(Sessions)의 특징

1. 서버 저장: 세션 데이터는 서버에 저장되며, 클라이언트는 세션 ID만을 가지고 있습니다.
2. 보안: 세션 데이터는 일반적으로 서버에 저장되기 때문에 비교적 안전합니다. 또한 세션 ID는 쿠키나 URL 파라미터를 통해 클라이언트와 서버 간에 전송될 수 있습니다.
3. 유효 기간: 세션은 일반적으로 일정 기간 동안 유효하며, 유휴 시간이 길어지면 자동으로 만료됩니다. 만료 기간은 서버 설정에 따라 달라집니다.
4. 스케일링 문제: 세션은 서버의 메모리를 차지하므로 많은 사용자를 동시에 처리하는 경우 서버 리소스가 부족해질 수 있으며, 이를 해결하기 위해 분산 세션 관리가 필요할 수 있습니다.

세션(Sessions)의 사용 사례

1. 인증: 로그인 상태 유지
2. 일시적인 데이터 저장: 장바구니 정보, 폼 입력 데이터

03. 웹 스토리지(Web Storage)란?

▶ 웹 스토리지는 HTML5에서 도입된 클라이언트 측 데이터 저장 방식으로, 웹 스토리지는 쿠키보다 더 많은 데이터를 저장할 수 있고 localStorage와 sessionStorage라는 두 가지 주요 유형이 있습니다.

(1) LocalStorage

▶ localStorage는 클라이언트에 데이터를 영구적으로 저장하는 방식으로 브라우저를 닫아도 데이터가 유지되며 다음과 같은 특징이 있습니다.

1. 크기 제한: 브라우저마다 다르지만, 일반적으로 5MB 이상을 저장할 수 있습니다.
2. 범위: 동일 출처 정책에 따라 같은 도메인과 프로토콜을 공유하는 모든 페이지에서 접근 가능합니다.
3. 지속성: 사용자가 명시적으로 삭제하지 않는 한 데이터는 영구적으로 저장됩니다.

LocalStorage의 사용 사례

1. 사용자 맞춤 설정: 사용자 설정, 테마
2. 오프라인 데이터 저장: 오프라인에서 사용할 데이터 저장

(2) SessionStorage

▶ sessionStorage는 현재 세션에 한해서 데이터를 저장하는 방식으로 탭이나 창을 닫으면 데이터가 삭제되며 다음과 같은 특징이 있습니다.

1. 크기 제한: 브라우저마다 다르지만, 일반적으로 5MB 이상을 저장할 수 있습니다.
2. 범위: 동일 출처 정책에 따라 같은 도메인과 프로토콜을 공유하는 페이지에서 접근 가능하나, 같은 브라우저의 다른 탭이나 창에서는 공유되지 않습니다.
3. 지속성: 브라우저 탭이나 창을 닫을 때 데이터가 삭제됩니다.

SessionStorage의 사용 사례

1. 일시적인 데이터 저장: 폼 데이터 임시 저장
2. 세션 간 데이터: 페이지 리로드 간 데이터 유지

비교 및 요약

용어	용어의 특징
쿠키	서버와 클라이언트 간에 작은 데이터를 주고받을 때 사용 및 보안과 크기 제한이 있지만, 세션 관리와 사용자 추적에 유용.
세션	서버 측에서 사용자 상태를 관리. 보안이 높고, 대량의 데이터를 처리하기에 적합하지만, 서버 리소스를 많이 소모.
LocalStorage	브라우저에 영구적으로 데이터를 저장. 비교적 큰 데이터를 저장 가능하며, 사용자가 명시적으로 삭제할 때까지 유지.
SessionStorage	현재 세션 동안 데이터를 저장. 탭이나 창을 닫으면 데이터가 삭제되며, 일시적인 데이터 저장에 유용.

이렇게 오늘은 쿠키, 세션, 웹스토리지에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문인만큼 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!