피드로 돌아가기
Dev.toFrontend
원문 읽기
Polling 제거 및 Firestore onSnapshot 도입을 통한 Real-time Dashboard 구현
I Replaced a Polling Loop With Three React Hooks and a Firestore Rule
AI 요약
Context
5초 주기 API Polling 기반의 기존 구조로 인한 최대 4초의 데이터 지연 발생. 모든 Firestore 쓰기 작업마다 별도의 읽기 경로가 필요한 비효율적 Read Model 구조의 한계 노출.
Technical Solution
- Firestore onSnapshot 기반의 Event-Driven 리스너 도입을 통한 실시간 데이터 동기화 구현
- Collection별 전담 Custom Hook(useLeads, useActivityFeed, useProductIntel) 설계를 통한 데이터 소유권 분리
- Append-only 설계의 activity_feed 컬렉션 구축을 통한 데이터 변조 방지 및 신뢰 가능한 Audit Trail 확보
- useEffect 내 onSnapshot의 Unsubscribe 함수 반환 구조를 활용한 메모리 누수 방지 및 자동 Cleanup 처리
- 초기 로딩 시 시드 데이터(INITIAL_LEADS)를 Fallback으로 설정하여 Firebase 연결 전 UI 공백 제거
- 복수 컴포넌트가 소비하는 데이터 Hook의 반환 타입을 Array에서 Named Object로 변경하여 타입 안정성 확보
실천 포인트
- 데이터 소비처가 많은 Hook 설계 시 Array 대신 Named Object를 반환하여 런타임 undefined 에러 방지 - Firestore onSnapshot 사용 시 useEffect의 cleanup 메커니즘을 통한 리스너 해제 여부 확인 - 개발 및 데모 환경의 가용성 확보를 위해 Hook 레이어에 정적 시드 데이터를 포함한 Fallback 전략 검토 - 쓰기 전용(Append-only) 컬렉션 설계를 통한 데이터 이력 관리 및 무결성 보장