쿠키(Cookies), 세션(Sessions), 웹 스토리지(Web Storage)는 웹 개발에서 클라이언트 상태를 관리하기 위해 사용되는 기술이다
각각의 기술은 다른 방식으로 데이터를 저장하며,
각기 다른 목적과 제한 사항을 가지고 있다
쿠키 (Cookies)
- 클라이언트(브라우저)에 작은 데이터 조각을 저장하는 기술
- 서버는 HTTP 응답 헤더를 통해 쿠키를 클라이언트에 설정하고, 이후 클라이언트는 동일한 서버로의 모든 요청에 이 쿠키를 포함하여 전송
- 쿠키는 사용자 세션을 관리하고, 사용자 선호도를 저장하며, 추적 정보를 수집하는 데 주로 사용
- 제한 사항
- 크기 제한: 약 4KB
- 브라우저마다 저장할 수 있는 쿠키의 수가 제한적
- 보안
- 쿠키 데이터는 암호화되지 않고 일반 텍스트로 전송됨
- 그러므로 민감한 데이터를 저장하기에는 적합하지 않음
- Secure와 HttpOnly 플래그를 사용하여 보안 강화 가능
세션 (Sessions)
- 서버 측에서 사용자 정보를 저장하는 방법으로 클라이언트가 서버에 요청을 보낼 때 생성되며 사용자의 상태를 추적하고 관리하는 데 사용
- 클라이언트는 서버로 부터 받은 고유한 세션 ID를 쿠키를 통해 저장하며, 이 ID를 사용해 서버에 해당 사용자의 세션 데이터에 접근
- 세션은 사용자가 로그인 상태를 유지하는 데 주로 사용됨
- 제한 사항
- 서버의 메모리를 사용하기 때문에 대규모로 사용자가 증가할 경우 서버 자원에 부담을 줄 수 있다
- 보안
- 세션 ID가 쿠키를 통해 클라이언트와 서버 간에 전송됨
- 쿠키의 보안 취약점에 영향을 받을 수 있음
- 그러나 실제 데이터는 서버 측에 저장되므로 데이터 자체는 노출되지 않음
웹 스토리지 (Web Storage)
- HTML5에 도입된 기술
- 더 많은 양의 데이터를 클라이언트 측에 안전하게 저장 가능
- 웹 스토리지에는 두 가지 종류
- localStorage
- 데이터가 브라우저를 여닫거나 다시 시작해도 유지됨
- 사용자가 수동으로 삭제하지 않는 한 사라지지 않음
- sessionStorage
- 데이터는 페이지 세션 동안만 유지됨
- 탭이나 브라우저 닫으면 데이터 삭제
- localStorage
- 제한 사항
- 보통 5MB 내외의 데이터를 저장할 수 있으나, 웹 사이트마다 독립적으로 저장 공간을 가짐
- 보안
- 쿠키와 달리 HTTP 요청과 함께 자동으로 전송되지 않으므로 CSRF 공격 위험이 없음
- 그러나 XSS 공격에 취약할 수 있으므로 스크립트를 통한 접근을 신중히 관리해야 함
각 기술은 데이터 저장 방식, 생명주기, 보안 측면에서 차이를 보이므로
애플리케이션 요구 사항에 따라 적절한 기술을 선택해 사용해야 함
'Frontend' 카테고리의 다른 글
이벤트 루프와 태스크 큐 설명 (0) | 2024.03.06 |
---|---|
로그인 처리 시 쿠키와 세션 어떻게 사용하는가 (0) | 2024.03.06 |
CORS (0) | 2024.03.06 |
Webpack, Babel, Polyfill (0) | 2024.03.06 |
DNS (0) | 2024.03.06 |