Creating LocalStorage Wrapper With TypeScript

Imporve the usage of browser APIs by adding a custom wrapper

이 내용은 Medium 원문의 Creating LocalStorage Wrapper With TypeScript 등을 참조하여 작성하였다.

🔗 Medium 원문

Quick Refresh

localStorage 는 브라우저 세션을 통해 데이터를 저장하는 브라우저 스토리지이다. localStorage 는 간단한 인터페이스를 갖추고 있기 때문에, 쉽게 다룰 수 있다.

쉬운 인터페이스를 갖추고 있는데, 왜 다시 wrapper 처리를 해서 복잡하게 만드냐고 질문할 수 있다. wrapper 처리는 간단한 사용성 이외에도 개발 과정에 있을 여러 다른 부분을 도울 수 있다.

아래의 목록이 localSotrage 의 wrapper 처리를 통해 얻을 수 있는 이점이다.

Advantages

• 테스트의 도입을 더욱 쉽게 해준다. wrapper 를 통해 추상화가 잘 된 API는 테스트에 용이하다.
• key 들의 이름을 관리할 단일 공간을 갖게 해준다. 이는 존재하지 않는 키 이름이나 다른 키에 value 를 저장하지 않도록 방지해준다.
• key 의 이름을 변경할 필요가 있을 경우, wrapper 를 통해 변경할 수 있다.
• 코드 관리에 용이하다.

Developing

우선, generic 과 함께 추상화 된 class를 선언한다.

실제 storage 의 기능을 갖춘 property를 추가 해야 한다. 그 전에, 해당 기능을 추상화해준다.

위 코드와 같이, 브라우저에서 제공하는 localStorage 와 같은 기능을 다시 작성한 것 뿐이다.

아래는 property를 갖춘 추상화 class 코드이다.

getStorage 메소드를 이용하여, 브라우저의 localStorage를 반환하는 실제 스토리지를 다룰 수 있다.

모든 메소드에 대해 외부 클래스나 인스턴스에서 이용할 일이 없으므로, 모든 메소드를 protected 접근 제한자를 이용한다.

우선, get 메소드에 대해,

T 제네릭을 이용하여, 추상화 클래스를 다룰 수 있다.

getItem 이 string이 아닌 null 을 반환할 수 도 있으므로, string 과 함께 명기해준다.

set 메소드는 이하와 같다.

또, clearItem과 clearItems 메소드를 통해 단일 key 값이나 여러 key 값을 제거하는 기능을 추상해둔다.

여태까지 추상화한 모든 코드는 아래와 같다.

모든 추상화가 위와 같이 끝났으므로, instance를 생성해야 한다. 그 전에, 예시를 위해 enum 을 통해 token 들을 나타내보고자 한다.

위 코드를 보면, Locals 라는 enum 타입만이 Storage의 제네릭으로 전달되었다. 오직 enum에 있는 값들만 key 의 이름으로 처리하여 get, set, clearItem, clearItems 등의 메소드를 처리할 수 있도록 제한한 것이다.

이것으로 깔끔한 코드 관리와 추상화를 이끌어낸 singleton 디자인을 만족했다고 할 수 있다.

이제 token의 사례에서 실제 데이터를 다루는 부분을 구현하면 아래와 같다.

마찬가지로 protected 접근 제한자를 통해 외부의 접근을 차단한다.

이어서, 아래는 리프레쉬 토큰을 구현한 것이다.

아래는 토큰을 삭제하는 부분을 구현한 것이다.

최종 코드는 아래와 같다

Usage :

Summary

모든 프로젝트가 이러한 접근을 통해 모두 localStorage 기능을 추상화하여 singleton 관리를 필요로하지는 않지만, 분명 필요로하는 곳이 있고 알아두어야만 한 부분이다.

여러 프로젝트 진행한 경험에 비추어 보면 javascript를 이용한 localStorage 의 관리가 지저분해지는 경우가 많았으므로 자주 사용할 것 같다.