어제를 사는 힘
Source
Basic Journals/Daily Journals/2025 을사년/을사년 33주, 225일, 8월 13일 수요일.md
Summary
이 노트는 오프라인 우선(Local-First) 웹 애플리케이션의 동기화 아키텍처 설계 및 구현 로드맵을 다룹니다. PWA, IndexedDB(Dexie), 서비스워커를 기반으로 서버 없이도 동작하는 구조를 확립하고, ‘서버 동기화’ 버튼의 개선, API 엔드포인트 설계, 충돌 해결 전략(Last-Write-Wins), 인증/보안(세션 및 모바일 토큰), 그리고 단계별 구현 계획(MVP부터 고도화까지)을 상세히 정리하고 있습니다.
Key Points
- 핵심 아키텍처: PWA + IndexedDB(Dexie) + 서비스워커를 활용하여 서버가 꺼져도 브라우저에서 독립적으로 동작하는 로컬 퍼스트 구조.
- 동기화 전략: updatedAt 기반 커서 동기화를 현재 안정화하고, 향후 revision 기반 커서로 전환하는 로드맵 수립. 충돌 해결은 Last-Write-Wins 원칙 적용.
- API 설계: Auth(세션/모바일 토큰), Ledger, Sync(/api/sync), Health 등 주요 엔드포인트 정의. Drizzle ORM 기반 리팩터링 진행 중.
- 구현 로드맵: Phase 1(수동 동기화 버튼 안정화) → Phase 2(백그라운드 자동 동기화 및 Dirty Flag) → Phase 3(Revision 모드 전환 및 충돌 UI) → Phase 4(PWA Background Sync API 및 푸시 알림).
- 보안 및 UX: 브라우저는 세션 쿠키+CSRF, 모바일/백그라운드는 HMAC Bearer 토큰 사용. 오프라인 상태 표시, 동기화 진행 상황 피드백, 충돌 발생 시 알림 등 UX 패턴 제안.
- 기술적 세부사항: Dexie 훅을 통한 변경 감지, Action Queue를 통한 배치 처리, Soft Delete 및 Tombstone 관리, 네트워크 상태 감지 및 재시도 로직(Exponential Backoff) 포함.