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

뱅크샐러드 웹은 프로젝트 규모 확장에 따라 Clean Architecture 구조를 적용하고, LocalStorage를 DataSource 개념으로 통일해 타입 안정성을 확보한 사례를 공개했다. 기존 방식은 JSON string 변환 과정에서 모델 인스턴스 손실 및 관리 부실 문제가 발생했다.

BrowserStorage 추상화 구조

LocalStorage와 SessionStorage를 통합 관리하기 위해 BrowserStorage 클래스와 BrowserStorageMapper 인터페이스를 도입했다. BrowserStorage는 Key와 Mapper를 주입받아 Model 단위의 저장, 불러오기, 삭제 기능을 제공하며, 외부에서는 Model 객체만으로 통신하도록 설계됐다.

Mapper를 통한 타입 안전성 확보

BrowserStorageMapper는 LocalStorage의 JSON string과 Application의 Model을 연결하는 역할을 수행한다. fromJson과 toJson 메서드를 구현해 양측의 맥락을 분리함으로써, Model이나 Storage 내부에 JSON 개념을 노출하지 않는다. 이 방식은 코드량 증가라는 단점이 있으나, 에러 발생 지점을 명확히 하고 테스트 코드 작성을 용이하게 하여 코드베이스의 안정성을 높인다.