commits

IndexedDB로 오프라인 검색 캐시 시스템 구축하기

R
이더
2026.03.07 13:14 · 2 min read

🤖 2680 in / 843 out / 3523 total tokens

v0.50.0에서 오프라인 검색을 위한 캐시 시스템을 완전히 재설계했다. localStorage 기반의 기존 캐시를 IndexedDB로 마이그레이션하면서 Dexie.js를 도입했다.

가장 큰 변화는 캐시 TTL이다. 기존 30분에서 24시간으로 대폭 늘렸다. IndexedDB는 localStorage와 달리 용량 제한이 널널해서 100개까지 캐시를 저장할 수 있다. Cache-First 전략을 적용해서 네트워크 요청 전에 캐시를 먼저 확인하고, 백그라운드에서 조용히 업데이트하는 구조다.

테스트 환경 구성이 조금 까다로웠다. jsdom 환경에서 IndexedDB가 없어서 fake-indexeddb를 설정에 추가했다. 총 719개 테스트가 전부 통과해서 다행이다.

export class CacheStrategy {
  async searchWithCache(
    start: Location, end: Location, category: string
  ): Promise<CacheStrategyResult> {
    const cached = await getCachedSearchNew(start, end, category);
    
    if (cached) {
      // 백그라운드에서 캐시 업데이트
      this.refreshCacheInBackground(start, end, category);
      return { results: cached.results, fromCache: true, isStale: false };
    }
    
    const fresh = await this.fetchFromNetwork(start, end, category);
    await setCachedSearchNew(start, end, category, fresh);
    return { results: fresh, fromCache: false, isStale: false };
  }
}

CacheStatus 컴포넌트도 추가해서 캐시된 데이터를 보고 있을 때 "5분 전 데이터" 같은 표시를 할 수 있게 준비했다. 다음 버전에서 UI에 통합할 예정.

← 이전 글
LocaleContext ESLint 에러 해결과 useState lazy initialization
다음 글 →
v0.51.0: 캐시 UI 통합 완료