Firebase 이용하기

오늘은 firebase에서 제공하는 데이터베이스를 이용하여 button을 클릭했을때 데이터 정보들을 저장하는 것을 해봤다.

기본적으로 firebase를 이용하기 위해서는 firebase에서 제공하는 api를 import를 해야한다.

import {
    doc,
    addDoc,
    updateDoc,
    deleteDoc,
    collection,
    orderBy,
    query,
    getDocs,
    where
  } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";
  import { dbService, authService } from "../firebase.js";

import를 통하여 User Id, 수정, 삭제, 업데이트 등 각종 기능을 구현하게 해준다.

export const save_list = async (event) => {
    event.preventDefault();
    const comment = document.getElementById("comment");
    const { uid, photoURL, displayName } = authService.currentUser;
    try {
      await addDoc(collection(dbService, "comments"), {
        text: comment.value,
        createdAt: Date.now(),
        creatorId: uid,
        profileImg: photoURL,
        nickname: displayName,
      });
      comment.value = "";
      getMyList();
    } catch (error) {
      alert(error);
      console.log("error in addDoc:", error);
    }
  };

Html에서 button onclick = save_list(event); 라는 함수을 실행시켜서 위와 같이 text, creatAt, creatorId, profileImg, nickname을 저장할 수 있다. 만약 에러가 뜰 경우 catch로 error를 잡아서 alert으로 알려주게 했다.