WebStorage를 사용해볼까?

들어가면서..

이번 과제에서 가상 userData를 생성하고 Table형태로 화면에 보여주는 과제를 진행 하였다.

const creatRandomUserData = (numPeople) => {
 const MockData = Array(numPeople)
   .fill(0)
   .map((_, idx) => {
     return {
       id: idx,
       name: creatRandomUserName(),
       birth: creatRandomUserBirth(),
       phone: creatRandomPhone(),
       loginRecords: creatRandomLastLoginRecords(),
     }
   })
 return MockData

• creatRandomUserData() 함수를 생성해 화면이 첫 로드될때 다음 함수를 실행하고 페이지네이션 기능을 구현해 동작시킬 예정이었다.

😱문제점!

const mockData = creatRandomUserData(270)

mockData를 다음과 같은 형태로 불러왔더니 state의 변화에 따라 rerender가 일어나고 기존의 mockData가아닌 새로운 데이터를 생성하는 문제가 발생했다.

해결방법?

처음 불러온 mockData를 web-stroage에 저장해서 저장된데이터를 불러와 사용하면 데이터가 유지되지 않을까?? 라는 생각에 web-storage에대한 searching을 진행했다.

WebStorage(LocalStorage vs SessionStorage)

web-storage를 살펴보니 두가지 저장 공간이있는데 차이점과 공통점을 살펴보자.

1.LocalStorage

• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유한다.

  오리진 이란?

  • URL 체계 (http,https)
  • 호스트 (naver.com) 등의 도메인
  • 포트 (5173 등등)

• 👏 모든 탭과 창에서 공유하지만 다른브라우저(chorme, safari)인 경우에는 데이터를 공유하지 않는다.

2.SessionStorage

• 세션이 종료되면(창을 닫으면) 데이터는 사라진다. 단 새로고침 할 경우에는 유지됨.
• LocalStorage와 다르게 하나에 탭에서만 데이터를 가진다.
• 👏 각각 탭에서만 데이터를 저장하고 있으며 다른탭,브라우저와 데이터를 공유할 수 없다.

공통점

• 1. 서버가아닌 클라이언트측에 데이터를 저장할 수 있다. 쿠키와 달리 서버요청에 포함되지 않는다.
• 2. 쿠키는 4KB의저장공간인 반면, storage는 약 5MB의 저장공간을 가질 수 있다.

차이점

• 1. 데이터의 지속성 차이
  • localStorage는 데이터를 명시적으로 삭제하지 않는이상 계속 유지하는 반면
    sessionStorage는 탭이 닫히면 데이터가 삭제된다.

간단한 사용법.

• 사용법은 아주 간단하다. 예시로는 localStorage를 사용하지만 sessionStorage사용법은 local -> session으로만 바꿔주면 된다.

1. localStorage.setItem(key,value)을 통해 특정 key값에 value를 설정
2. localStorage.getItem(key) 설정된 key값을 통해 value를 가져오기.
3. localStorage.clear() 모든 데이터를 삭제
   이외에도 removeItem(key),length,key(index)등등을 지원한다.

😱주의할점

• 웹 스토리지를 사용할때 주의해야할 것이 있다.
  오직 문자형 데이터타입(string)만 지원한다는 것이다..!!!
• 해결방법은???
  => 웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓰는 것입니다.
  JSON.stringfy형태로 데이터를 저장하고 불러올때는 JSON.parse를 통해 다시 문자열을 제거해주는 방식으로 사용하면 문제가 해결된다.

어디에 사용하면 좋지?

여기까지 web-storage에대해 알아본 결과 현재 issue가생겼던 부분에 사용하는 것은 적합하지 않다고 판단이 들었다... 그렇다면 어디에 사용하면 좋을까라는 생각이든다.

👍이를 알아보기 위해 다음과같은 블로그 글을 참고해서 알아봤다.

웹 스토리지를 활용한 대표적인 기능

1 .sesstionStorage를 활용해서 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구
2. 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용
3. 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트)
4.웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용)
5.현재 읽은 글의 히스토리 저장(카운팅, 읽은글 표시 등으로 활용)
6.Canvas나 이미지에 대한 임시 저장 기능(base64로 변환)
7.웹페이지간 정보 전달(웹서버를 경유하지 않고 정보 로컬에 유지)
출처: https://ktko.tistory.com/entry/HTML-웹-스토리지-기능과-예제-그리고-활용-방법 [KTKO 개발 블로그와 여행 일기]

다음과 같은 부분에 자주 사용된다고 한다... 아마도 사용자의 기록들을 저장해
서비스이용에 편리성을 주는 용도로 사용되는 것이 아닐까 라는 생각이든다. 이부분 에대해서는 추후에 적용해보며 공부하도록 해야겠다.

해결방법

아직 초보 front-end개발자인 나에겐 바로떠오르지 않았지만
issue를 해결하기 위해선 useMemo를 사용하면 간단하게 해결될 문제였다.

const mockData = useMemo(() => creatRandomUserData(270), [])

다음과 같은 방식으로 mockData를 할당해 준다면 state의 변화에도 이전과 같은 data를 유지할 수 있다.

front-end개발자의 역할은 client측과 surver를 이어주는 것....!
추후에 서버에서 데이터가 넘어올 것을 생각하고 과제를 진행해야 하겠지만 서버측에서 데이터를 정리해서 보내줄 것인데 front-end측에서 storage에 저장해서 과제를 이어나가는 것은 over-engineering이라고 스승님께서 조언해 주셔서 다시 생각해봤다.

회고 time

과제를 해결해나가는데 있어서는 storage에대한 내용은 아무연관이 없었지만
어떻게 해결해 나가는 방법이 좋은 것 일까에대한 생각을 해볼 수 있는 좋은 시간이었다.
지금당장 적용하지 못하는 내용이지만 추후에 꼭 다루어야 할 내용인거 같아서 동료들과 내용을 공유하고 싶어서 posting했다. 다들 화이팅!