개요

여러명이 협업하는 프로젝트에서 local-storage를 사용할 때
이런저런 불편한 점이 생길 수 있다.

• 어느 데이터가 어떤 key로 저장되고 있는지
• data type의 부재
• 사용되고 있는 key들의 산개
• key 중복
• key 네이밍 컨벤션
• 예외처리 등...

이런 문제들을 해소 하기 위해 type safe한 로컬스토리지를 작성해 보았다.

1. Example

// typedLocalStorage.ts

/* NOTE: 각 Key별 타입을 지정 */
type KeysProps = {
  lastMarketingPopupShownDate: string;
  homePopupAdClosedTime: string;
  isClosedPopup: boolean;
  extraData: {
    time: string;
    name: string;
    age: number;
  };
};

/* NOTE: JSON.parse 가능 여부 체크용 함수 */
const isValidJSON = (jsonString: string): boolean => {
  try {
    JSON.parse(jsonString);
    return true;
  } catch (e) {
    return false;
  }
};

const typedLocalStorage = {
  get<K extends keyof KeysProps>(key: K): KeysProps[K] | null {
    const result = localStorage.getItem(key);
    if (result === null) {
      return null;
    }

    const canParseJson = isValidJSON(result);

    return canParseJson ? JSON.parse(result) : result;
  },

  set<K extends keyof KeysProps>(key: K, value: KeysProps[K] | null) {
    if (value === null) {
      return localStorage.removeItem(key);
    } else {
      return localStorage.setItem(key, JSON.stringify(value));
    }
  },

  remove<K extends keyof KeysProps>(key: K) {
    return localStorage.removeItem(key);
  },
};

export default typedLocalStorage;

2. Usage

위 예시처럼 만들어놓고 사용할 때는 아래와 같이 쓸 수 있다.

ㄴ> key 자동완성 지원

ㄴ> get 메소드 사용시 각 키에 맞는 데이터 타입 연동

ㄴ> set 메소드 사용시 각 키에 맞는 데이터 타입 체크

3. 결론

로컬스토리지는 사용법이 간단하지만
그만큼 편하게 막 사용하게 되는 것 같다.

처음에는 각 key마다 get, set, remove 메서드를 자동 생성하는 방식으로 구현했었는데,
제네릭을 활용한 3개의 메서드로 단순화하니 코드가 더 간결해지고 사용하기도 편해졌다.

또한 KeysProps 타입을 통해 저장되는 데이터의 타입을 명확히 정의함으로써,
타입 안정성을 확보하고 협업시 발생할 수 있는 실수를 미연에 방지할 수 있게 되었다.

코드가 산개되고, 협업이나 유지 보수에 걸림돌이 되는 요소들은
한 번만 시간 들여서 타입과 컨벤션을 관리할 수 있는 모듈을
만들어 둬도 많은 도움이 되는 것 같다.