React 19와 Zustand를 활용한 학습 플랫폼에서 IndexedDB 기반 상태 영속성과 다중 AI 제공자 브로커 패턴을 구현한 경험을 공유한다

React 19, Zustand, a 5-Provider AI Broker, and P2P Multiplayer — How I Architected My Learning Platform

Prateek Mohan2026년 3월 31일19분intermediate

AI 요약

Context

localStorage의 5MB 용량 한계와 동기적 읽기/쓰기 구조가 40개 이상의 AI 생성 유닛과 수백 개의 리뷰 카드 관리에 부적합했다. 기존 구조에서는 IndexedDB 접근 실패 시 silent failure가 발생하여 디버깅이 어려웠다.

Zustand의 persist 미들웨어에 IndexedDB 라이브러리인 idb-keyval을 연결하고 localStorage를 차순위 폴백으로 구성했다
IndexedDB 접근 실패 시 Safari 개인 정보 보호 모드와 Firefox 엄격 모드를 고려하여 자동 급 로직을 구현했다
partialize 옵션으로 base64 인코딩된 500KB 단위 AI 이미지를 제외하고 40개 최신 유닛만 직렬화하도록 설정했다
다중 AI 제공자를 위한 브로커 패턴을 도입하여 요청을 사용자 단위로 격리하고 중복 요청을 제거했다
Drizzle ORM의 drizzle-zod 통합으로 데이터베이스 타입에서 Zod 검증 스키마를 자동 생성했다

dev 서버 cold-start 시간 300ms 달성, Zustand 전환으로 Redux Toolkit 대비 보일러플레이트 코드 감소

IndexedDB 사용 시 브라우저별 실패 시나리오를 명시적으로 처리하고, 대용량 데이터 직렬화에서는 partialize를 통한 필터링이 필수적이다

실천 포인트

localStorage 용량 한계에 도달한 Zustand 기반 SPA에서 idb-keyval과 partialize 옵션을 조합하여 대용량 상태 데이터의 영속성과 성능을 동시에 확보할 수 있다

태그