🔥Firestore 응용으로 댓글 만들기 + 문제 해결 (팀프로젝트 3일차)

댓글 기능을 구현하고 싶었다

<div class="comment">
	<div class="commentList">  
      <div class="speech-bubble">
        안녕하세요
		</div>
	</div>
	<div class="commentMake">
  	<input type="email" class="commenting" id="commenting" placeholder="댓글을 달아주세요" required>
    	<button id="submmit"><img src="/img/send.png"></button>
	</div>
</div>

commentList 내부에 speech-bubble 이라는 채팅 블럭을 만들어 넣고 싶었다.
그리고 commentMake 칸의 Input을 사용해 댓글을 입력할 수 있게 했다.

💫 Js파일 만들기

파일을 나눠서 관리하면 보기도 쉽고, 코드 관리하기 유용하기 때문에

1. 기본 세팅하기

우선 html파일에 js를 불러와야겠지오

제이쿼리를 사용하기 위한 코드
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
js 코드를 불러오는 코드
<script type="module" src="memberIntro.js"></script>

다음에 Js파일에 Firestore 세팅을 해보자

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import {collection, addDoc} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Firebase 구성 정보 설정
const firebaseConfig = {
// 자신의 firebase 정보 입력하기
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

2. addDoc

스크립트가 실행되면 자동으로 먼저 실행되도록하는 코드를 쓰자

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

firestore에 데이터를 집어넣으려면? → addDoc을 쓰자!

$("#submmit").click(async function () {
    let comment = $("#commenting").val();

    if (comment === "") {
      alert("댓글을 입력해주세요!");
      return;
    }
    addDoc(collection(db, "commenting"), { text: comment });

    try {
      await addDoc(collection(db, "commenting"), {
        text: comment,
        timestamp: new Date(),
      });
      console.log("댓글 게시 완료");
      $("#commenting").val(""); // 입력창 비우기
    } catch (error) {
      console.error("Error adding document: ", error);
      alert("댓글 저장에 실패했습니다.");
    }
  });

commenting컬랙션을 만들어서 안에 댓글을 넣어보자
addDoc(collection(db, "commenting"), { text: comment });
db에 text로 comment에 있는 내용을 넣자

if (comment === "") {
    alert("댓글을 입력해주세요!");
    return;
  }

만약 아무것도 입력하지 않으면, 알람을 띄운다
$("#commenting").val(""); 를 활용해서 입력하면 입력창을 비워주자
그러면 아래처럼 firestore에 잘 저장된 것을 확인할 수 있다.

3. getDocs

이제는 저장한걸 가져와야한다.

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

db에 commenting으로 저장했으니 동일하게 가져와야겠죠????
그리고 commenting이라는 컬랙션 안에는 여러개의 데이터가 저장되어있으니 이걸 순서대로 하나씩 꺼내와야한다.
1. docs으로 commenting 묶음을 가져오고, 여기서 doc으로 하나씩 꺼내자
2. doc의 데이터를 commentData라고 정의
3. temp_html에 내가 표현하고 싶은 형식을 사용해서 commentData의 text를 꺼내서 넣어준다.
4. 그리고 commentList div에 temp_html을 넣어주면 완성!

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

댓글이 firestore에 add와 get은 잘되었지만, add하자마자 페이지에 반영되지 못했다. 그래서 바로바로 추가되면 좋겠다고 생각했다.
이때 사용 가능한 것이 바로 Firestore의 실시간 리스너 onSnapshot() 이다!
아래 링크에서 따로 설명했으니 따라가보자
🔗 https://velog.io/@minjee2758/Firestore-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EB%B0%98%EC%98%81-onSnapshot-query-orderBy