🔥 Firestore 실시간 반영 onSnapshot(), query, orderBy (팀프로젝트 3일차)

👀 댓글을 실시간으로 반영하자

연관 코딩 링크 -
댓글이 firestore에 add와 get은 잘되었지만, add하자마자 페이지에 반영되지 못했다.
그래서 바로바로 추가되면 좋겠다고 생각했다.
이때 사용 가능한 것이 바로 Firestore의 실시간 리스너 onSnapshot() 이다!

💡 onSnapshot을 사용하면?

• Firestore에서 실시간 업데이트 감지 (onSnapshot())
• GetDocs 없이도 데이터 반영 가능
• 새 댓글을 추가하면 자동으로 화면에 반영
• 기존 댓글도 실시간으로 업데이트

기존 js 코드를 리팩토링 해보자

🐽 기존 코드

나는 commenting이라는 콜랙션 안에 데이터를 저장하고 가져왔었다.

$(document).ready(async function () {

    let docs = await getDocs(collection(db, "commenting"));
    docs.forEach((doc) => {
      let commentData = doc.data();
      let temp_html = `<div class="speech-bubble">${commentData.text}</div>`;
      $(".commentList").append(temp_html);
  
  });
  //addDoc 생략
 });

위의 방식은 데이터가 실시간으로 반영되지 않았다.

✅ onSnapshot 사용

우선 import를 해줘야 쓸 수 있겠죠?

import { onSnapshot } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

🔍 코드 설명

1. getDocs 대신에 onSnapshot()을 사용하여 실시간 감지

• Firestore의 "commenting" 컬렉션을 감시하다가 데이터 변경이 감지되면 자동 실행됨.
• 새 댓글이 추가되거나 삭제될 때마다 commentList를 업데이트.
• addDoc()을 실행하면 즉시 반영
• 댓글을 입력하면 Firestore에 저장됨.
• Firestore의 변경을 감지하는 onSnapshot()이 자동으로 실행되어 화면을 업데이트함.

2. 새로운 댓글이 가장 아래에 추가되도록 정렬 (timestamp)
3. timestamp를 저장해서 시간순 정렬 (sort((a, b) => a.data().timestamp - b.data().timestamp))

+입력 후 $("#commenting").val("")로 입력창 초기화
->댓글 작성 후 입력창이 비워짐.

//1
onSnapshot(collection(db, "commenting"), (snapshot) => {
    $(".commentList").empty(); // 기존 목록 초기화
	//2, 3
    snapshot.docs
        .sort((a, b) => a.data().timestamp - b.data().timestamp) // 시간순 정렬
        .forEach((doc) => {
            let commentData = doc.data();
            let temp_html = `<div class="speech-bubble">${commentData.text}</div>`;
            $(".commentList").append(temp_html);
        });
})

📌 getDocs() 없어도 onSnapshot()만으로 될까나..?

✅ onSnapshot()을 사용하면 getDocs() 없이도 Firestore 데이터를 가져올 수 있다!
✅ onSnapshot()은 Firestore 데이터를 실시간으로 감시하면서 자동으로 UI를 업데이트해 주기 때문에, 페이지 로딩 후 별도로 getDocs()를 실행할 필요가 없다!

완성된 화면을 한번 보자

댓글이 잘 달리는 것을 확인할 수 있었다!

📂 데이터를 순서대로 불러오기 query&orderBy

1. 사용 이유

댓글 기능을 추가하기 위해 add하고 onSnapshot으로 실시간 반영까지 구현했는데, 댓글이 순서대로 배치되지 않고 랜덤한 순서로 배치되는 것을 확인할 수 있었다.
→ 댓글을 오래된건 위로, 최신것이 아래쪽으로 배열되게 만들고 싶었기 때문이다.(오름차순 배열)

2. 해결방안

(1) 데이터를 add 할 때, timestamp과 함께 저장하자

(2) commenting db에서 모든 문서를 가져온다

collection(db, "commenting") → "commenting" 컬렉션에서 모든 문서를 가져와.

(3) 가져온 문서를 순서대로 정렬한다

orderBy("timestamp", "asc") → 가져온 문서들을 timestamp 기준으로 오름차순(asc) 정렬!

💡 orderBy("timestamp", "asc")→ 작성된 시간순(오래된 순)으로 정렬
"asc" (오름차순) → 오래된 댓글이 위쪽
"desc" (내림차순) → 최신 댓글이 위쪽

(4) collection과 orderby를 묶자

query()를 활용해야 firestore에서 조건을 적용할 수 있기 때문에 둘을 묶어주는 쿼리를 사용한다

🔥 즉, query()는 Firestore에서 특정 조건(정렬, 필터 등)을 적용할 때 꼭 필요하다!!

묶은 쿼리를 const로 정의해주자

const q = query(collection(db, "commenting"), orderBy("timestamp", "asc"));

(5) onSnapshot()에 오름차순으로 적용해보자

onSnapshot(q, (snapshot) => {

댓글이 실시간으로 반영되어야하므로 snapshot은 유지하되, 아까 오름차순으로 정의한 쿼리 q에 있는 값을 써야하니까 위의 코드처럼 정의하자

🚀 query & orderby 정리

✔ query()를 사용해야 orderBy() 같은 조건을 Firestore에서 적용할 수 있음.
✔ orderBy("timestamp", "asc")로 정렬하면 시간순 정렬이 됨.