그냥 직접 사용하면 되지, 굳이 커스텀 Custom Class를 만든 이유가 무엇인가?

맞다. 하지만 렉시컬 스코프를 사용해서, 외부에서 accessToken을 직접 접근하지 못하게하기 위해서 만들었다. 작성 코드를 보면 각 클로저가 외부 변수를 참조하는데, 비공개 필드 형식을 사용해서 변수를 만들고 이를 클로저 함수들이 참조하게 하였다. 이렇게 하면 프론트엔드에서 조금 더 보안을 강화할 수 있다고 생각한다.

작성 코드 및 설명

TokenStorage.ts

export class TokenStorage {
  #nekotsseacce = "";

  constructor() {
    this.#nekotsseacce = localStorage.getItem("accessToken") || "";
  }

  setToken(token: string) {
    this.#nekotsseacce = token;
    localStorage.setItem("accessToken", token);
  }

  getToken() {
    let protectedToken = this.#nekotsseacce;
    return protectedToken ? JSON.parse(protectedToken) : null;
  }

  removeToken() {
    this.#nekotsseacce = "";
    localStorage.removeItem("accessToken");
  }
}

이 코드는 "TokenStorage"라는 클래스를 정의하고 있습니다. 이 클래스는 웹 애플리케이션에서 사용자 세션을 관리하는 역할을 합니다. 주요 메서드로는 setToken, getToken, removeToken이 있으며, 이들을 통해 accessToken을 관리하게 됩니다.

1. #nekotsseacce는 private field입니다. 이 필드는 클래스 내부에서만 접근 가능하며 외부에서는 접근할 수 없습니다. 이 필드는 accessToken을 저장하는 데 사용됩니다.

2. constructor 함수에서는 localStorage에서 accessToken을 가져와 #nekotsseacce에 저장하고 있습니다.

3. setToken(token: string) 메서드는 주어진 token을 #nekotsseacce 필드와 localStorage에 저장합니다. 이 메서드를 호출하면 주어진 token이 이 클래스와 localStorage 모두에 저장되어, 이후에도 사용 가능합니다.

4. getToken() 메서드는 #nekotsseacce 필드에 저장된 token을 반환합니다. token이 있는 경우 JSON 파싱하여 반환하고, 없는 경우 null을 반환합니다.

5. removeToken() 메서드는 #nekotsseacce 필드와 localStorage에서 token을 삭제합니다. 이 메서드를 호출하면 현재 사용자 세션이 종료됩니다.

이 클래스를 사용하면 accessToken을 안전하게 저장하고 관리할 수 있습니다. 특히 private field를 사용하므로 accessToken에 직접 접근할 수 없어 보안성이 높아집니다. 또한, localStorage를 사용하므로 페이지를 새로고침하거나 다시 방문해도 사용자 세션이 유지됩니다.