📓 쿠키 단점
⏳ 쿠키 정보가 웹브라우저에 저장.
- 민감 정보 저장 : 안전하지 않은채로 저장됨.
- HttpOnly, Secure, SameSite로 방어가 가능함.
- 방어는 가능하지만 웹브라우저 단위의 저장소다보니 웹브라우저간 공유가 불가. (지역성 문제)
- ex) 한 유저가 PC 방을 돌아다니며 매 웹 브라우저에서 매번 로그인 해야한다.
- 매 웹브라우저에서 하는 검색과 같은 행위들이 해당 브라우저에만 저장.
⏳ Domain + Path 일치 시 해당 웹 서버로 모든 쿠키를 담아냄.
- 쿠키를 단지 저장조로 사용해서는 안됨. -> 웹 서버에게 알려주지 않아도 되는 정보의 경우에는 웹 스토리지 사용을 권장.
- 쿠키로 저장하려는 정보량이 많아질수록 요청 크기가 커진다.
- 불필요한 Network Overhead -> 비대해질수록 요청 사이즈도 커진다.
이점들을 세션으로 해결!!!
📓 Storage
클라이언트에 데이터를 저장할 수 있는 저장소.
쿠키 세션처럼 무상태, 비연결성의 문제점을 위한 것은 아님.
그저 쿠키가 웹브라우저 저장소로 유용되는 점을 방지하기 위한 저장소일 뿐이다.
🗡️ Storage : 웹 브라우저 저장소.
- 유저에 의해 변경된 옵션 상태 등 -> 필요에 따라 조회가 필요할 때.
🗡️ Cookie : 웹 서버에게 웹 브라우저가 매번 전달할 정보 저장소.
- 로그인 정보 저장 등 -> 매 웹서버에게 요청할 때마다 전달할 때.
웹 브라우저에 저장된다는 점에선 Cookie와 Storage가 동일하지만 Cookie는 작은 정보를 웹 서버에 반복적으로 전달하고 세부 만료 설정이 가능하다는 점이고 Storage는 큰 정보를 웹 브라우저에서만 사용하고 세부 만료 설정이 불가능하다.
🏷️ Storage 유효기간
Local Storage : 웹 브라우저 창이 닫혀도 영구적으로 저장. 브라우저 종료해도 다음 번에 접속할 때 데이터 사용 가능.
도메인이 같으면 전역적으로 공유 가능.
Session Storage : 웹 브라우저 창이 닫히면 데이터 삭제. (Session Storage도 삭제.)
같은 브라우저라도 탭이 다르면 공유 불가.
📓 정리
| Cookie | Storage |
|---|---|
| 저장 가능 용량 : 4KB | 저장 가능 용량 : 10MB |
| 만료 : 만료 시간 세부 설정 가능 | 불가능 |
| 범위 : 지정된 Domain + Path 유효 | 지정된 Domain내 모두 유효 |
| 보안 : 노출 제어 가능 (Secure, HttpOnly) | 스크립트 접근 가능 |
| 브라우저 간 공유 불가 (session으로 가능) | 브라우저 간 공유 불가 |
프론트엔드 개발자가 브라우저에서 무엇인가를 저장한다하면, Storage 를 쓸것
📓 Session으로 해결
웹 서버 측에 별개의 저장소 DB가 필요.
⚠️ Session을 사용한다고 Cookie를 사용하지 않는 것이 아님.
⚠️ 웹 브라우저 내 쿠키에는 어떤 세션인지 알기위한 ID값 저장이 필요.
세션은 일반적으로 웹 브라우저로부터 ID를 받아서 해당 요청 유저의 정보를 조회한다.
- Session Storage : 속도가 매우 중요
- 수천번의 API 호출마다 Session 조회가 필요.
- 현업에서는 메모리 기반 DB인 Redis 사용. (돈이 많은 경우) -> 비용 이슈, 확장성 이슈
쿠키의 민감 정보 저장, 브라우저 간 공유 불가 해결
⏳ 정보를 웹 서버측에 저장
- 민감 정보들이 웹 서버측에 안정하게 저장됨.
- 웹 브라우저 간 공유 가능.
⏳ Domain + Path 일치 시 해당 웹 서버로 모든 쿠키를 담아냄.
- 정보를 웹 서버측에 저장하는 것이기에 요청을 방해하지 않음.
- 단 매 요청마다 Session Storage 조회가 필수. - Redis 사용 고려
❓❓ 질문 사항
Q1. 웹 브라우저 저장소로 쓰인다는 점과 필요에 따라 조회가 필요한 데이터를 저장하기 위해 사용한다는 점에서 스토리지와 브라우저 캐시가 헷갈리는데 두개의 명확한 차이점을 알 수 있는 예나 명확한 차이점이 있을까요?
추가적으로 브라우저 캐시와 쿠키의 차이점도 명확하게 알 수 있는 방법이 있을까요?
A1. 브라우저 캐시(메모리 or 디스크) 는 웹 브라우저가 알아서 해주는것이기에 정확한 구현은 알수없기도하고 크롬, 엣지, 파이어폭스 등 웹 브라우저마다 구현이 다를겁니다.
즉, 프론트엔드 개발자가 자바스크립트로 제어를 못하는 영역이죠.
Storage 와 Cookie는 프론트엔드 개발자가 자바스크립트로 제어할 수 있는 영역입니다. (Cookie 는 부분적 예외)
그 중 Storage 는 프론트엔드 개발자가 제어할 수 있고, 원하는대로 쓸 수 있는 자유로운 저장소라면
Cookie는 프론트엔드 개발자 것이라기보단 백엔드 개발자(웹 서버)가 제어하되 저장은 웹 브라우저에 되는 정보이죠. (HttpOnly 옵션이 없으면 프론트엔드 개발자가 자바스크립트로 제어할 수 있으나 HttpOnly true 이면 불가능합니다)
Refence
🔗 https://reveur1996.tistory.com/115 - Local Storage & Session Storage란?
🔗 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage - LocalStorage / SessionStorage (vs 쿠키와 비교)
🔗cookie는 너무 구식아냐? 이제부턴 Web Storage! - Web Storage
