JS 파이어베이스에서 실시간으로 DB 반영하기

Today, What I learned?

내 기능 구현도 하고 팀원들 에러도 봐주다보니 살살 녹는 하루... 🫠🫠🫠

프로젝트를 진행하며 파이어베이스에서 실시간으로 DB를 반영이 필요한 기능이 있었다.

오늘은 이 부분에 대해서 정리해보려고 한다!

 

 

파이어베이스에서 실시간으로 DB 반영하기

onSnapShot() 이라는 메서드를 이용한다.

이 메서드는 문서 스냅샷을 즉시 생성하고, 내용이 변경될 때마다 다시 호출되어 문서 스냅샷을 업데이트한다.

자세한 내용은 아래 파이어베이스 문서에서 확인해볼 수 있다.

 

https://firebase.google.com/docs/firestore/query-data/listen

Cloud Firestore로 실시간 업데이트 받기  |  Firebase

 

 

어떻게 쓰지!?

 

먼저 쿼리문으로 해당하는 컬렉션을 가져온다.

나의 경우에는, reivews라는 컬렉션에서 최근 생성된 순으로 (orderBy), 5개만 (limit) 가져오도록 했다.

이거는 파이어베이스 DB에서 쓰는 쿼리문인데 위 문서에서 확인 가능.

 

이제 onSnapshot 메서드에서 스냅샷을 새롭게 생성한다.

스냅샷은 아래 같은 형태로 생겼는데 여러 정보가 담겨있다.

 

이제 이 스냅샷에서 반복문을 돌면서 빈 배열에 데이터를 넣는다.

배열에 넣으면 이렇게 DB에 넣었던 그대로의 아이디나 이미지, 텍스트 등등.. 을 가져올 수 있다.

 

이제 원하는 대로 데이터를 렌더링 하면 끝!

 

비교해보면 작성된 최신 순서대로 가져오고 있다.

 

 

벌써 프로젝트 중반이 지났는데 나름.. 잘.. 되어가는 것 같다 🫠 (라고 생각함)

마무리까지 화이팅이다 ㅠㅠ)9