아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
뱅크샐러드 favicon뱅크샐러드

Typescript로 LocalStorage, 안전하게 쓰자!

by DD
2017-08-03
8년 전
조회수 7

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를 활용하여 관심사 분리를 실현한다. 따라서 코드 안정성을 높이고, 테스트 용이성을 확보하여 유지보수성을 향상시킬 수 있다.

Typescript로 Local Storage 안전하게 사용하기
중급
아키텍처
Typescript
LocalStorage
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

Nix 언어에 TypeScript 타입 시스템을! 개발 생산성 UP!

랍스타즈 로고

JavaScript vs TypeScript, 당신의 선택은?

데브투 로고

TypeScript 프로젝트, ESM 모듈 도입 삽질기

카카오스타일 로고

webpack, TypeScript, Mithril로 프론트엔드 개발 환경 구축!

카카오스타일 로고

TypeScript, 'Parse, Don't Validate' 원칙 적용의 딜레마

랍스타즈 로고

LeetCode 대신 패턴 학습 도구를 직접 만들었습니다

데브투 로고
뱅크샐러드 favicon뱅크샐러드
중급
아키텍처
Typescript
LocalStorage
Frontend

관련 추천 글

Nix 언어에 TypeScript 타입 시스템을! 개발 생산성 UP!

랍스타즈 로고

JavaScript vs TypeScript, 당신의 선택은?

데브투 로고

TypeScript 프로젝트, ESM 모듈 도입 삽질기

카카오스타일 로고