firebase 썸네일형 리스트형 React와 Firebase Firestore 실시간 데이터 연동하기 React에서 Firebase Firestore를 이용해 실시간으로 데이터가 흐르는 UI를 만드는 방법을 정리했습니다. onSnapshot으로 구독하고, CRUD를 구성하며, 커스텀 훅으로 재사용성을 높이는 실무 패턴을 다룹니다.1. 목표와 개요- 실시간 데이터: Firestore의 onSnapshot으로 컬렉션/문서 변경을 즉시 반영합니다.- 안전한 CRUD: 서버 타임스탬프와 최소한의 검증으로 안정적인 쓰기를 구성합니다.- 재사용성: 커스텀 훅으로 구독 로직을 캡슐화합니다.- 성능/비용: limit, 인덱스, 옵저버 해제 등 필수 최적화를 적용합니다.2. 설치와 초기 설정프로젝트에 Firebase를 설치하고 Firestore 인스턴스를 초기화합니다. Vite 기준 환경변수를 사용합니다.// 1) 설치.. 더보기 이전 1 다음