[Javascript] 파이어베이스에서 CRUD 구현하기

CURD는 데이터의 기본 4대 요소인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 의미합니다

import { initializeApp, getFirestore, collection } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Firebase를 사용하기 위해 연동을 하고 위처럼 initializeApp, getFirestore, collection을 임포트하고 사용한다는 전제 하에 설명합니다

1. Create

// 문서 추가를 위해 doc, setDoc 임포트
import { doc, setDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// setDoc(doc(db, <컬렉션>, <문서>), <필드>)
await setDoc(doc(db, "userinfo", "127"), {
  name: "홍길동",
  age: 20,
  email: "abcd@gamil.com"
});

setDoc을 이용해서 userinfo 컬렉션의 127 문서에 이름과 나이, 이메일 필드를 저장합니다

2. Read

// 문서 불러오기를 위해 collection, getDocs 임포트
import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// getDocs(collection(db, <컬렉션>))
let docs = await getDocs(collection(db, "userinfo"));
docs.forEach((doc) => {
  let row = doc.data();
  console.log(row);
});

특정 컬렉션의 문서들을 모아온 뒤 forEach로 모든 문서를 돌아보며 데이터를 출력합니다
만약 Create 예시에 사용했던 name을 불러오려면 row[name]을 사용하면 되겠습니다

3. Update

// 문서 수정을 위해 updateDoc 임포트
import { updateDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// updateDoc(doc(db, <컬렉션>, <문서>), <필드>)
await updateDoc(doc(db, "userinfo", "127"), { age: 21 });

컬렉션 userinfo의 127문서에 있는 age를 21로 변경합니다

4. Delete

// 문서 삭제를 위해 deleteDoc 임포트
import { deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// deleteDoc(db, <컬렉션>, <문서>)
await deleteDoc(doc(db, "userinfo", "127"));

컬렉션 userinfo의 127문서를 삭제합니다