이번엔, 현재 진행중인 YACHT_DICE 프로젝트에서 로그인/회원가입을 구현하면서 또 한번 접한 브라우저 저장소에 대해 얘기하고자 한다.
이전에 COCO때도 JWT 토큰, 세션을 통한 로그인을 구현했었고,
이번엔 JWT 토큰과 로컬 스토리지를 통한 로그인을 구현했다.
일단, 브라우저 저장소는 크게 웹 스토리지와 쿠키로 구분할 수 있다.
웹 스토리지는 또한 local Storage와 session storage로 구분할 수 있다.
Web Storage
- 웹 스토리지는 HTML5부터 제공하는 기능으로, 특정 데이터를 Client의 Web browser에서
{key : value}의 형태로 저장할 수 있게 제공한다. - 데이터의 지속성에 따라 구분해 Local Storage / Session Storage로 사용한다.
- 쿠키와 마찬가지로 웹 사이트의 도메인 단위로 접근이 제한된다.
- 서버로 데이터를 전송하지 않아 네트워크 트래픽을 줄인다.
1. Local Storage
- 데이터는 사용자가 지우는 것이 아니면 영구적으로 남는다.
localStorage.clear(); - 자동 로그인과 같은 지속적으로 동일 데이터가 필요한 경우에 사용한다.
- 일반적으로 5MB 이상의 용량을 가진다.
- 사용자 로그인 시에 토큰을 로컬에 저장한다면,
localStorage.setItem('token', access_token);처럼 사용할 수 있다.
2. Session Storage
- 현재 세션 동안만 데이터가 유지된다. 탭이나 창을 닫으면 데이터가 삭제된다.
- 용량은 Local Storage와 유사하다.
- 로그인 상태, 비로그인 장바구니 등을 사용할 수 있다.
3. Cookie
- 쿠키는 유효 기간을 지정해 세션 쿠키/지속 쿠키로 구분할 수 있다.
- 4KB의 적은 용량을 지녀, 한 도메인 당 20~50개의 쿠키로 갯수 제한이 있다.
- 쿠키는 HTTP 요청과 함께 서버로 자동으로 전송되며,
HttpOnly,Secure플래그 등의 보안 설정이 가능하다. - 사용자 맞춤형 광고, 세션 관리 등에 사용된다.
- 일반적으로 접근 속도가 웹 스토리지보다 빠르다.
마치며...
결과적으로 어떤 웹 스토리지가 더 좋은가는 전혀 의미없는 질문이다.
구현하고자 하는 서비스, 기능에 따라 맞추어 사용해야한다.
특히 스토리지의 경우, 보안과 밀접한 연관이 있어 이를 인지하고 개발해야한다.
[참고자료]
사람을 좋아하는 Front-End 개발자