Firebase로 간단 CRUD하기

Firestore (Firebase Database)를 이용해 간단하게 CRUD해보았습니다...

 

 

Firebase SDK 라이브러리 가져오기 및 인스턴스 초기화

<script type="module">

 

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore, collection, addDoc, getDocs, doc, updateDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

 

// Firebase 구성 정보 설정

const firebaseConfig = {
    apiKey: ~~~~~~~~~~~~~~~~~,
    authDomain: ~~~~~~~~~~~~~~~~~ ,
    projectId: ~~~~~~~~~~~~~~~~~ ,
    storageBucket: ~~~~~~~~~~~~~~~~~ ,
    messagingSenderId: ~~~~~~~~~~~~~~~~~ ,
    appId: ~~~~~~~~~~~~~~~~~ ,
    measurementId: ~~~~~~~~~~~~~~~~~
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

 

document 목록 조회하기

let docs = await getDocs(collection(db, "db 이름"));
docs.forEach((doc) => {
     console.log(doc.id, doc.data());
});

 

getDocs(collection(db, "db 이름"))는 document들을 array로 반환합니다.

(array가 아닙니다! .length 하면 undefined 뜹니다ㅎ)

만약 document의 갯수를 얻고 싶다면 doc.size로 확인할 수 있습니다. docs를 console에 찍어보세요!

id는 document의 id를 담고 있습니다.

data()는 document의 field와 값을 반환합니다.

 

주의할 점! forEach() 안에서 개별 documnet를 조회하는 함수 doc()을 사용하려면 doc 변수의 이름을 수정하세요ㅎ

 

 

document 등록하기

let docRef = {
    "field명": "값",

    "field명": "값",

    "field명": "값"

};
await addDoc(collection(db, "db 이름"), docRef);

 

addDoc(collection(db, "db 이름"), docRef)은 database에 document를 추가합니다.

 

document 조회/수정/삭제하기

let docRef = await doc(db, "db 이름", "document의 id");
await updateDoc(docRef, { field명: 값, field명: 값 });
await deleteDoc(docRef);

 

doc(db, "db 이름", "document의 id")은 id에 해당하는 document를 반환합니다.

updateDoc(docRef, { field명: 값, field명: 값 })은 document를 수정합니다.

document의 모든 field를 넣어주지 않아도 됩니다. 해당하는 field만 수정합니다.

deleteDoc(docRef)은 document를 삭제합니다.