TIL #3 | 23.10.11

Firebase로 데이터 관리하기

데이터 추가하기

addDoc(collection(db, "messages"), doc) 를 사용하여 데이터베이스에 doc 객체를 추가했다.

$("#postingbtn").click(async function (e) {
    e.preventDefault(); // // 화면 새로고침 동작을 막는다
    let name = $('#name').val();
    let command = $('#command').val();
    // 총 데이터 개수 +1로 고유 아이디 부여
    let id = docs.size + 1
    
    let doc = { 
        'id': id,
        'name': name, 
        'command': command
    };
    
    await addDoc(collection(db, "messages"), doc); // firebase에 데이터 추가

    alert('응원 완료!')
		location.href='/mainpage.html' // 메인페이지로 이동
})

데이터 가져오기

getDocs(collection(db, "messages")) 를 사용하여 firebase에 저장된 데이터를 가져온다.

import { collection, addDoc, deleteDoc, doc, updateDoc } 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";

...

let docs = await getDocs(collection(db, "messages")); // 문서 가져오기

데이터 삭제하기

doc(db, "messages", storedId)로 삭제할 데이터를 가져온 뒤 deleteDoc(docRef);로 firebase의 데이터를 삭제한다.

$('#commands').on("click", ".deletebtn", async function() {
  const commandEl = $(this).closest(".command"); // 가장 가까운 값 가져옴
  const storedId = commandEl.find(".del").data('id');  // .del을 찾아 텍스트값을 가져온다.
  console.log(storedId);

  try {
    const docRef = doc(db, "messages", storedId); // await deleteDoc(doc(db, "messages", storedId))
    await deleteDoc(docRef);
    window.location.reload(); 
  } catch (err) {
    console.log('err', err)
  }

})

데이터 수정하기

doc(db, "messages", storedId)로 수정할 데이터를 가져온 후 updateDoc(docRef, {name, text, id})를 사용해서 firebase의 데이터를 수정한다.

$('#commands').on("click", ".editbtn", async function(e) {
      const commandEl = $(this).closest(".command"); // 가장 가까운 값 가져옴
      const username = commandEl.find("#name").text();
      const text = commandEl.find("#command").text();
      const storedId = commandEl.find(".edit").data('id'); 
      window.location.href=`./Pages/edit.html?name=${username}&&text=${text}&&id=${storedId}`
      try {
        const docRef = doc(db, "messages", storedId); // await deleteDoc(doc(db, "messages", storedId))
        await updateDoc(docRef, {name, text, id});
        window.location.reload(); 
      } catch (err) {
        console.log('err', err)
      }
})

---

요약

오늘은 JS를 사용하여 팀 프로젝트를 진행하였다.
이번 팀 프로젝트로 진행한 Cheer up! 프로젝트는 응원메시지를 남기고 갈 수 있는 웹페이지를 구현하는 것이었다.
기본적으로 vanila JS와 JQuery 라이브러리를 사용했다.
데이터베이스를 구축할 때는 좀 더 쉽게 데이터베이스를 연동할 수 있도록 Firebase를 사용했다.