로그인 정보를 리덕스로 관리하는 이유에 대하여

개요

프로젝트 코드를 구경하다보니 대부분 로그인 정보를 리덕스로 관리한다는 것을 알게되었습니다. Portfolly 팀 프로젝트에서도 리덕스를 사용해 로그인 정보를 전역 상태로 저장해두고 불러와 사용합니다. 그런데 문득 사용자 권한, 로그인 여부, 토큰 등을 LocalStorage에 저장해놓고 또다시 리덕스 전역 상태로 저장해서 사용하는 특별한 이유가 있는지 궁금해졌습니다. 절대적인 코드의 양은 LocalStorage 데이터를 바로 불러오는 게 리덕스 스토어에 접근하는 것보다 적었기 때문입니다.

 

 

 

웹 스토리지(Web Storage)

먼저 웹 스토리지 개념을 알아보겠습니다.

 

웹 스토리지란 클라이언트에 데이터를 저장하는 저장소 입니다.

 

클라이언트 데이터인 만큼 서버에 전송되지 않기 때문에 서버 트래픽 부담이 없다는 특징을 가지고 있습니다. (반면 쿠키는 모든 웹 요청에 쿠키 정보를 포함해 서버에 전송합니다)

 

웹 스토리지의 종류는 두 가지가 있습니다.

 

• 영구 저장소(LocalStorage)
  • window.localStorage 객체로 접근하여 저장/조회 가능
  • 저장한 데이터는 별도로 지우지 않는 이상 영구적으로 존재하며, 브라우저를 종료해도 유지됩니다.
  • 서로 다른 브라우저 탭이라도 도메인이 동일하면 똑같은 로컬 스토리지를 사용합니다.
  • 지속적으로 필요한 정보를 저장할 때 사용합니다.

---

• 임시 저장소(SessionStorage) 
  • window.sessionStorage 객체로 접근하여 저장/조회 가능
  • 세션 종료(브라우저 종료) 시 정보가 삭제됩니다.
  • 동일한 탭/윈도우라도 도메인이 다르면 또다른 세션 스토리지가 생성됩니다.
  • 일시적으로 필요한 정보를 저장할 때 사용합니다.

 

 

 

웹 스토리지는 어디에 저장될까?

그렇다면 '클라이언트'에 저장된다는 웹 스토리지 데이터는 도대체 어디에 저장되는 걸까요?

 

웹 스토리지 데이터는 기본적으로 브라우저 메모리 혹은 하드디스크에 저장됩니다.

 

일시적으로 데이터를 저장하는 세션 스토리지는 브라우저 메모리에 저장되었다가 세션 종료 시 휘발되고, 영구적으로 데이터를 저장하는 로컬스토리지의 경우 비휘발성 메모리 공간인 하드 디스크에 저장됩니다.  

 

브라우저 별로 다음 폴더 구조를 확인해보면 실제로 로컬스토리지가 하드디스크에 저장되는 모습을 확인할 수 있습니다.

 

Firefox

// window
C:\Documents and Settings\<Windows login/user name>\Application Data\Mozilla\Firefox\Profiles\<profile folder>\webappsstore.sqlite
C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder>\webappsstore.sqlite
%APPDATA%\Mozilla\Firefox\Profiles\<profile folder>\webappsstore.sqlite

// linux
~/.mozilla/firefox/<profile folder>/webappsstore.sqlite

// mac
~/Library/Application Support/Firefox/Profiles/<profile folder>/webappsstore.sqlite
~/Library/Mozilla/Firefox/Profiles/<profile folder>/webappsstore.sqlite

 

Chrome

// window
%LocalAppData%\Google\Chrome\User Data\Default\Local Storage\

// linux
~/.config/google-chrome/Default/Local Storage/

// mac
~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/
~/Library/Application Support/Google/Chrome/Default/Local Storage/

 

Opera

C:\Users\Administrator\AppData\Roaming\Opera\Opera\sessions\autosave.win
C:\Users\Administrator\AppData\Local\Opera\Opera\pstorage\

 

 

 

 

하드디스크에 접근하느냐 vs 메모리에 접근하느냐

우리가 로컬스토리지에 로그인 정보를 저장해두고, 리덕스로 별도 관리하는 이유는 바로 저장 위치에 따른 접근 속도때문이었습니다.

 

로컬스토리지는 하드 디스크에 저장되기 때문에 데이터에 접근하는 속도가 느립니다. 반면 리덕스는 메모리에 저장되기 때문에 접근 속도가 빠르다는 장점이 존재합니다.

 

멘토님께서 비유하시길, 하드디스크에 접근하는 것은 길을 멀쩡히 걷다가 잠깐 늪지대를 지나게 되는 것과 같고, 메모리의 경우 길거리 어딘가에 저장해둔 걸 꺼내쓰는 정도라는 것이죠.

 

생각해보니 단순한 문제인데 왜 당장 떠오르지 않았나 싶습니다.😅

 

 

 

 

 

참고 사이트

메모리

 

웹 스토리지(로컬 스토리지, 세션스토리지)의 모든 것 with 세션, 쿠키

 

Where the sessionStorage and localStorage stored?