HTTP 프로토콜은 비연결지향(Connectionless), 무상태(Stateless)라는 특성을 가짐
-> 연결을 끊는 순간 클라이언트와 서버의 통신 끝나며 상태 정보 유지 X
따라서 서버는 클라이언트의 상태를 알 수 없으므로 쿠키와 세션을 사용함
• 쿠키(Cookie)란?
- 클라이언트(브라우저)에 저장되는 작은 데이터 파일
- 유효 기간이 있음 -> 유효 기간동안은 브라우저에 데이터 저장
- 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Resquest Header에 넣어서 자동으로 서버로 전송
- 4KB로 용량이 제한
동작방식
- 클라이언트가 서버에 HTTP 요청
- 서버에서 쿠키 생성 후, HTTP 헤더에 쿠키를 포함시켜서 응답
- 클라이언트는 이제부터 HTTP 요청시마다 HTTP Header에 쿠키 담아서 전송
브라우저가 종료되어도 유효 기간동안 클라이언트에서 보관 -> 요청 시 사용 가능 - 유효 기간 만료되면, 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급
쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어짐
-> 서버로 계속 전송된다는 문제가 있음
왜 문제가 되나?
4KB 용량을 거의 다 채운 쿠키가 있다고 가정해보자.
요청때마다 기본으로 4KB의 데이터를 사용해야 함 -> 서버에 필요하지 않은 데이터도 포함되어 있을 수 있음
데이터 낭비!
해결방법은 로컬 스토리지와 세션 스토리지에 저장하는 것
세션 스토리지와 로컬 스토리지의 데이터는 서버로 자동 전송하지 않기 때문에!
* 쿠키 종류 - Session Cookie, Persistent Cookie, Secure Cookie, Third Party Cookie
• 세션(Session)이란?
- 쿠키를 기반으로 하고 있지만, 데이터를 서버 측에서 관리
- 서버에서 클라이언트를 구분하기 위해서 세션 ID를 부여
- 웹 브라우저가 서버에 접속해서 브라우저 종료할 때까지 인증상태 유지
- 데이터를 서버에 두기 때문에 보안에 좋지만, 사용자가 많아질수록 서버 메모리 많이 차지
동작방식
- 클라이언트가 서버 접속 시 세션 ID 발급
- 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
- 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
- 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라이언트 정보를 가져와서 사용
- 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답
• 쿠키와 세션의 차이점
세션도 결국 쿠키를 사용하기 때문에 동작 방식이 비슷하다.
- 클라이언트 정보 저장 위치
쿠키는 클라이언트, 세션은 서버에 데이터 저장 - 라이프 사이클
쿠키는 만료기간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다.
세션도 만료기간을 지정할 수 있지만, 브라우저가 종료되면 만료시간에 상관없이 종료된다. - 보안 측면에서는 세션이 더 우수하다.
쿠키는 로컬에 저장되기 때문에 보안에 취약하지만, 세션은 세션 ID만 저장하고 서버에서 처리하기 때문이다. - 속도 측면에서는 쿠키가 더 우수하다.
쿠키는 쿠키에 정보가 있기 때문에 서버에 요청 시 속도가 빠르고, 세션은 서버에 정보가 있어서 처리가 요구되어 비교적 속도가 느리다.
• 웹 스토리지(Web Storage)란?
- 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
- 쿠키와 달리 서버로 데이터 자동 전송 위험 X
- 쿠키보다 큰 용량 지원(쿠키는 4KB, 웹 스토리지는 모바일인 경우 2.5MB, 데스크탑인 경우 5-10MB)
- 서버가 HTTP 헤더를 통해 스토리지 객체 조작 X(JavaScript 내에서만 수행)
- 로컬 스토리지와 세션 스토리지가 있음
- 로컬 스토리지와 세션 스토리지(localStoarge, sessionStorage)
| 로컬 스토리지 | 세션 스토리지 | |
| 데이터 저장 | 사용자가 지우지 않는 한 계속 저장 (영구 저장 가능) |
윈도우/브라우저 닫으면 제거됨 |
| 사용 방법 | 자동 로그인 | 일회성 로그인 |
- 로컬 스토리지는 오리진 별로 생성되며, 다른 오리진의 로컬 스토리지에는 접근 불가능
서로 다른 브라우저 탭이라도 동일한 오리진이라면 동일한 로컬 스토리지를 사용
window.localStoarge 객체
- 세션 스토리지는 윈도우/브라우저 단위로 세션 스토리지 생성
동일한 윈도우/브라우저라도 다른 오리진이라면 다른 세션 스토리지 생성 -> 독립적
window.sessionStoarge 객체
(* 오리진 = 프로토콜 + 도메인 + 포트)
간단히 정리하자면,
쿠키: 일시적으로 필요한 가벼운 데이터 저장
로컬 스토리지: 지속적으로 필요한 데이터 저장
세션 스토리지: 일시적으로 필요한 데이터 저장
'WEB' 카테고리의 다른 글
| Node.js vs 브라우저 환경 (0) | 2023.05.08 |
|---|---|
| Rest API, RESTFUL API (0) | 2023.05.06 |
| XML, JSON, YAML (0) | 2023.04.28 |
| MPA/SPA (0) | 2023.04.23 |
| CSR/SSR (0) | 2023.04.18 |