Typescript로 Local Storage 안전하게 사용하기

Context

프로젝트 규모 증가로 LocalStorage 사용이 다양해졌으나, 단순한 string 기반 API로 인해 Model 인스턴스가 JSON 변환 과정에서 손실되었습니다. 특히 Parent-Child 같은 중첩 구조의 모델을 저장했을 때 복원된 객체가 원래 클래스의 instanceof 검증을 통과하지 못하는 문제가 발생했습니다.

Technical Solution

• LocalStorage를 Data Layer의 DataSource로 재정의: 이전의 presentation 레벨 직접 접근에서 벗어나 BrowserStorage라는 통제된 인터페이스를 통해서만 접근하도록 변경
• BrowserStorage 제네릭 클래스 도입: 저장 대상 모델 E를 정의하고 get(), set(), clear() 메소드를 통해 모델 기반 통신을 제공
• BrowserStorageMapper 인터페이스 구현: 각 Model 타입별로 fromJson(JSON → Model)과 toJson(Model → JSON) 메소드를 정의해 직렬화/역직렬화 과정을 명시적으로 관리
• Key-Mapper 1:1 바인딩 구조 설계: 각 BrowserStorage 인스턴스가 고유 key와 전용 mapper를 주입받아 동일한 key로 여러 모델이 접근되는 오류를 원천 차단
• LocalStorage와 SessionStorage 통합 지원: BrowserStorageHelper를 통해 temporary 플래그로 저장소 종류를 자동 선택

Key Takeaway

Clean Architecture의 Data Layer에 저장소 추상화를 도입하면, 단순한 key-value 저장소도 모델 기반 안전한 데이터 접근이 가능해집니다. Mapper 패턴으로 직렬화 로직을 명시화하면 테스트와 에러 추적이 용이해집니다.