프론트엔드
Typescript로 Local Storage 안전하게 사용하기
두줄요약
TypeScript에서 LocalStorage의 JSON 복원 시 인스턴스가 보장되지 않는 문제를 다뤘습니다. Mapper와 BrowserStorage로 저장 책임을 분리해 안정성을 높였습니다.
문제 상황
- JSON 직렬화 후 LocalStorage에서 복원한 객체의 클래스 인스턴스 및 타입 보장 부재
- 프레젠테이션 계층에 산재한 저장·조회 코드와 불명확한 데이터 관리 지점
구조와 흐름
- Clean Architecture의 Data Layer에 LocalStorage·SessionStorage 채널인 BrowserStorage 배치
- 모델별 key와 BrowserStorageMapper를 1:1로 주입하는 제네릭 저장소 구성
- get·set·clear API로 모델 단위 저장·조회·삭제 처리
선택 이유
- Mapper를 통해 JSON과 모델 변환 책임을 분리하고 양측의 구현 세부 사항 은닉
- 저장 과정의 오류 지점 명확화와 Mapper 단위 테스트 용이성
트레이드오프
- 단순 객체도 Mapper를 별도 구현해야 하는 코드량 증가
- 관심사 분리와 모델 기반 API를 통한 LocalStorage 사용 안정성 확보
