Contents
현재 프로젝트에서 로컬스토리지와 pinia를 병합하여 단점을 보완하며 사용하고 있다.
store를 사용해서 데이터를 관리할 경우 결국 새로고침하면 날라가버리는 이슈가 발생하게 되는데 생각해 보면 그런 상황을 방지하는게 어찌 보면 당연하다. 그래서 방법으로 로컬스토리지를 사용하여 데이터를 유지하는 듯 하다.
그럼? 데이터를 유지하기 위해 로컬 스토리지에 어떻게 데이터를 삽입시키고 유지할까?
우리 프로젝트에서는
vueuse의 useLocalStorage를 사용하고 있었다. 중요한건 나는 초보 개발자이고 진짜 vueuse에 각각의 함수들을 설명해놓은 도큐멘트를 보면 한숨만 나온다…
실제로 이번에도
useLocalStorage 를 확인하며 한숨이 나왔다 위에 도큐멘트를 보면 어딜 어떻게 쓰라는 건지.. 싶어서 내가 한번 찾아보고 정리해보았다.일단 MDN의 로컬스토리지에 대한 설명이 있는 페이지를 찾아보았다.
간단하게 내가 알고 있는 로컬 스토리지에 대한 상식은…
sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage는 페이지를 닫을 때 사라진다는 것?localStorage.setItem("myCat", "Tom");
로컬 스토리지에 항목을 추가하기 위한 방식은 위와 같고
아래 useLocalStorage의 추가 방식은
declare function useLocalStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;
위 와 같았다. key, initialValue, opions 총 3가지의 파라미터를 가지고 있었다.
useLocalStorage(key, initialValue, options);
(key: string, initialValue: MaybeRefOrGetter<string>, options?: UseStorageOptions<string>)
key (string)= 로컬 스토리지에서 데이터를 저장하고 검색할 때 사용하는 key이다.→ 데이터를 식별하는데 사용되고 있었다.
initialValue = 초기값이라는 영어의 뜻을 가지고있는 이부분은 로컬스토리지에 데이터를 찾을 수 없을 때 사용하는 초기값으로 보였다.초기값이 제공되지 않는 경우는 null을 반환하고 있었다.
options : 선택 사항이며 옵션을 추가하고있었다.serializer: 로컬스토리지에 데이터를 저장하거나 가져올 때 사용되는 직렬화 및 역 직렬화 작업을 정의하는 객체이다. → 우리가 사용한 방식을 확인해보면
/** NC 가공 타입 idx */ const ncWorkItemRid = useLocalStorage<NCWork['itemRid']>(StorageKey.NCWorkItemRid, null, { serializer: StorageSerializers.number });
이렇게 되어있는데
{ serializer: StorageSerializers.number } 대충 감을 보면 number를 이용해서 직렬화 하고 있는데… 직렬화가 뭘까…? 컴퓨터 메모리 상에 존재하는 객체(Object) -> 문자열(string) 로 변환하는 것= 직렬화(Serialization)
문자열(string) -> 자바스크립트 객체(Object)로 반환하는 것= 역직렬화(Deserialization) or 파싱(Parsing)
var youn = { name : 'youn', age : 31, gender : 'male', location : 'gunpo', marriage : false, friends : ['oh', 'Lee', 'bee'] } var serialize_json = JSON.stringify(youn); console.log("Serialize 결과 타입 : ", typeof serialize_json); console.log("Serialize 결과 : ", serialize_json); // Serialize 결과 타입 : string // Serialize 결과 : {"name":"youn","age":31,"gender":"male","location":"gunpo","marriage":false,"friends":["oh","Lee","bee"]}
즉
.number 로 만든것을 보면 번호에 관련 된 듯하여 보니 옵션을 붙인 곳은 전부 번호를 붙이는 곳이었다.target: 저장 대상을 지정하는 객체라고 한다. 기본적으론localStorage가 사용되지만 이속성으로 sessionStorage 또는 기타 저장소를 사용할 수 있다고한다.
그럼 위에 내용을 토대로 아래의 코드를 분석하면
const ncWorkProjRid = useLocalStorage<NCWork['projRid']> (StorageKey.NCWorkProjRid, null, { serializer: StorageSerializers.number });
useLocalStorage 함수를 사용하여 ncWorkProjRid 변수를 초기화하였다. useLocalStorage<NCWork['projRid']>:useLocalStorage함수를 호출하였고ncWorkProjRid변수를 생성한다. 이 변수는 Local Storage에서NCWork['projRid']타입을 같게 된다.
StorageKey.NCWorkProjRid: 이 변수는 Local Storage의 키 역할을 한다.
null: null을 위에 키에 초기값으로 설정한다. 키가 존재하지 않으면 대체 된다.
{ serializer: StorageSerializers.number }: 이것은useLocalStorage함수의 옵션 이고serializer를 사용하여 데이터가 Local Storage에 저장될 때와 가져올 때 변환 로직을 태울 수 있다. 여기서는 데이터가 숫자로 직렬화 및 역 직렬화된다.
이렇게 마지막으로 코드 분석 까지 해보았다…
Share article