LocalStorage class 메소드 사용에 대하여

[soryeongk]

From @joohaem

LocalStorage 에 메소드를 정의해 사용하여 짜는 코드에서 참고하면 좋을 말을 들어 공유합니다 !!

---

현재 LocalStorage 클래스

class LocalStorage {
  constructor() {}

  static setItem(key: string, item: string) {
    if (typeof window !== "undefined") {
      localStorage.setItem(key, item);
    }
  }

  static getItem(key: string) {
    if (typeof window !== "undefined") {
      return localStorage.getItem(key) as string;
    }

    return "";
  }

  static removeItem(key: string) {
    if (typeof window !== "undefined") {
      localStorage.removeItem(key);
    }
  }

  static setUserSession(token: string, nickname: string, email: string) {
    this.setItem("booktez-token", token);
    this.setItem("booktez-nickname", nickname);
    this.setItem("booktez-email", email);
  }

  static clearUserSession() {
    this.removeItem("booktez-token");
    this.removeItem("booktez-nickname");
    this.removeItem("booktez-email");
  }
}

export default LocalStorage;

abstract class에서는 실제 구현보다 구현체의 대략적인 형태를 잡는 것에 집중하면 좋을 것 같습니다.
아래와 같이 작성된 내용은 주석 혹은 문서의 형태로 전달하거나, abstract가 아닌 일반 class로 정의한 후 상속해 사용하는 것이 좋을 것 같습니다.

이러한 코드리뷰를 봐서, 메소드를 정의할 때 LocalStorage 내부가 아닌 이를 상속한 다른 class를 정의하는 게 어떨까 생각해봤어요!

[euijinkk]

Custom LocalStorage를 만들면 좋은 점이

1. JSON.parse, JSON.stringify를 반복적으로 사용하지 않아도 된다.
2. cache를 활용할 수 있다. 매번 storage에서 값을 가지고 오기 보다, 마운트 후 변하지 않을 값을 가지고 온다면 cache해주면 더욱 효율적일 것이다.
3. JSON.parse 에러 처리를 할 수 있다.

getItem(key) {
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch {
      localStorage.removeItem(key);
      alert(ERROR_MESSAGE.FAIL_TO_GET_DATA);
    }
  }

JSON.parse는 string만 받을 수 있을 거임. 어떤 경우인지 잘 생각이 안나는데, 잘못 저장되면 load에 실패하게됨! 이 예외처리 코드를 함께 포함해줄 수 있음!!

그래서 지금 현재 코드의 단점은

1. 정적 메소드만 있는 class는 객체와 다를 것이 없다!
   지금 상태로는 객체로 쓰는 것과 동일할 것 같아요!

2. cache가 필요한 데이터가 있을 때, class로 선언하고, 멤버변수로 cache를 선언해서 로직을 짜면 class로 짤 이유가 있다고 봅니다!

3. 이름이 LocalStorage인데, User와 관련된 도메인이 들어가있네요! LocalStorage와 UserLocalStroage를 분리하는 것이 좋겠네요!! UserLocalStorage가 LocalStorage를 사용하는 구조로 가면 좋을 것 같네욤~!

4. 지금 형태로는

LocalStorage.setItem('user', JSON.stringify(value)) 

와 같은 형식으로 사용해야 하는데요.
무조건 JSON.stringify를 수행할 것이니 이를 메소드 자체에 포함시키면 좋을 것같아요
JSON.parse도 마찬가지로!

이상한 점 있으면 또 달아주세요!