클라이언트 기반 데이터 저장 방식
📌 쿠키
-
사용자의 브라우저에 저장되는 작은 데이터 조각으로 필요할 때 쉽게 데이터를 받아 사용 가능하다.
-
만료 기간이 정해져 있지 않은 쿠키인
세션 쿠키(Session cookie)와 만료 기간이 존재하는영구 쿠키(persistent cookie)가 있다.
(위 사진에서 theme 세션이 세션 쿠키, refresh_token이 영구 쿠키에 해당한다.) -
세션 쿠키는 브라우저가 종료될 때 함께 사라지는 반면, 영구 쿠키는 만료기간이 끝나면 삭제된다.
-
동작
1️⃣ 클라이언트가 서버에 웹 페이지를 요청하면 서버는 요청에 대한 응답과 함께 쿠키정보를 전송한다.
2️⃣ 응답을 받은 클라이언트는 메시지 안에 있던 쿠키 정보를 브라우저 공간에 저장한다.
3️⃣ 이후부터 클라이언트에서 서버로 보내는 모든 요청에 쿠키 정보를 담아 전달한다.
4️⃣ 서버는 이러한 요청 메시지의 쿠키 정보를 확인해 사용자를 식별하거나 적절한 데이터를 보내준다.
-
단점
- 누구나 쉽게 접근이 가능하고 조작할 수 있기 때문에 탈취되거나 변조될 위험이 크다.
- 요청마다 메시지에 쿠키 정보가 함께 전송되기 때문에 오가는 데이터의 양도 더 커져 웹 통신의 성능이 떨어지는 원인이 될 수 있다.
- 사용자가 방문한 웹 사이트에서 직접 발행하는퍼스트 파티 쿠키와 제삼자가 발행한서드 파티 쿠키로 구분할 수 있다.
-서드파티 쿠키는 사용자로부터 충분한 동의를 받지 않고 웹 브라우징 활동을 추적해 표적 광고에 이용하기 때문에 개인 정보 침해의 소지가 있다.
- 개인 정보와 같은 민감한 데이터보다는 팝업 다시 보지 않기, 다크 모드 여부 등의 용도로 쿠키를 사용할 수 있다.
📌 로컬 스토리지 vs 세션 스토리지
- 로컬 스토리지
- 한 번 브라우저에 저장되면 의도적으로 삭제하지 않는 이상 데이터가 유지된다.
- 자동 로그인 등의 용도로 사용할 수 있다.
- 세션 스토리지
- 브라우저 탭이 닫힐 때 데이터도 함께 삭제된다.
- 일회성 정보의 데이터 저장 용도로 활용할 수 있다.
📌 쿠키와 웹 스토리지 비교
| 쿠키 | 웹 스토리지 |
|---|---|
| 4KB까지 저장이 가능하다. | 5MB ~ 10MB까지 저장이 가능하다. |
| 클라이언트와 서버 양쪽 모두 값에 접근 가능하다. | 클라이언트 단에서만 접근 가능하다. |
| HTTP 헤더에 담겨 서버로 전송된다. | 따로 서버 전송을 하지 않기 때문에 네트워크 통신량이 줄어든다. |
📌 Index DB
- 데이터의 형태가 문자열로 한정된 쿠키나 웹 스토리지에 반해, Key Value 한 쌍을 저장하며 , File/Blob 포함 다양한 자바스크립트 데이터 타입 지원한다.
- 용량 제한이 특별히 없다.
- 복잡한 구조의 데이터나 큰 규모의 데이터를 괸리해야할 때 유용하게 사용할 수 있다.
- same origin policy 를 따르며 온라인/오프라인 환경 모두에서 쿼리 지원한다.
서버 기반 데이터 저장 방식
📌 세션
- 정보를 서버에서 관리하기 때문에 보안이 우수하다.
- 클라이언트별로 고유 ID를 부여해 관리하기 때문에 각 클라이언트의 요구에 맞는 맞춤형 서비스를 제공할 수 있다.
- 사용자가 많아지거나 관리해야 하는 데이터의 양이 많아지면 서버의 부담이 커진다는 단점이 있다.
- 브라우저에서 값을 보여주는 것보다 상대적으로 데이터 제공 속도가 느릴 수 있다.
- 동작
1️⃣ 로그인한 사용자의 정보를 서버에 전달한다.
2️⃣ 서버는 요청을 보낸 클라이언트가 이전에 접근한 적이 있는지 확인하고 없다면 고유한 값인 세션 ID를 발급해 자신의 메모리에 저장하고 요청에 대한 응답과 함께 세션 ID를 클라이언트에 전달한다.
3️⃣ 클라이언트는 전달받은 세션 ID를 쿠키에 저장한다.
4️⃣ 가령 사용자가 장바구니 api를 요청하면 클라이언트는 요청과 함께 쿠키 안의 세션ID를 함께 전달한다.
5️⃣ 요청을 받은 서버는 메모리에서 자신이 받은 세션ID에 해당하는 클라이언트가 있는지 확인하고 있다면 장바구니 정보를 조회해 응답 데이터로 전송한다.
