Typescript로 LocalStorage, 안전하게 쓰자!
by DD
8년 전
조회수 5
LocalStorage 사용 시 Model 인스턴스 유실 문제를 지적하고, DataSource 관점 도입을 제안함
Clean Architecture 기반으로 BrowserStorage 클래스를 구현하여 Model 기반 데이터 관리
BrowserStorageMapper를 통해 JSON 변환 책임을 분리하고, 안정성 및 테스트 용이성 확보
BrowserStorage 아키텍처 상세
Clean Architecture를 기반으로 Data Layer에 BrowserStorage를 위치시켰다. 구체적으로 BrowserStorage 클래스는 key와 mapper를 주입받아 get(), set(), clear() 메서드를 제공한다. 따라서 Model 기반의 데이터 관리와 오류 처리가 용이해진다.
BrowserStorageMapper의 역할
BrowserStorageMapper는 LocalStorage와 Model 사이의 변환을 담당한다. fromJson()과 toJson() 메서드를 통해 JSON과 Model 간의 상호 변환을 수행한다. 반면, Mapper를 사용함으로써 Model과 LocalStorage는 서로의 구현 세부 사항을 알 필요가 없어진다.
안정적인 LocalStorage 사용을 위한 조언
LocalStorage를 DataSource 관점에서 접근하여 Model 기반으로 데이터를 관리해야 한다. 구체적으로 BrowserStorage와 BrowserStorageMapper를 활용하여 관심사 분리를 실현한다. 따라서 코드 안정성을 높이고, 테스트 용이성을 확보하여 유지보수성을 향상시킬 수 있다.