📖 TIL - Firebase 세팅 및 Firestore 기본 사용법 (addDoc, getDocs)

1. Firebase 프로젝트 설정

1. Firebase Console에 접속 후 프로젝트 생성.
2. 프로젝트 내에서 Firebase Firestore를 활성화:
   • Build > Firestore Database 선택.
   • 데이터베이스 생성 후 테스트 모드로 설정 (운영 시 규칙 수정 필요).
3. Firebase SDK 설정:
   • 프로젝트 설정 > 앱 추가 > Web App 선택.
   • 제공된 Firebase 설정 객체를 복사.

---

2. Firebase 설치 및 초기화

프로젝트에 Firebase 설치 및 초기화 코드를 작성합니다.

설치

npm install firebase

초기화

firebaseConfig는 Firebase Console에서 복사한 값을 사용하세요.

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

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

---

3. Firestore 기본 사용법

3.1. addDoc: 데이터 추가

Firestore의 특정 컬렉션에 문서를 추가합니다.

import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

async function addData() {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      name: "John Doe",
      age: 30,
      email: "johndoe@example.com"
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

3.2 getDocs: 데이터 읽기

특정 컬렉션의 모든 문서를 가져옵니다.

import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebase";

async function getData() {
  const querySnapshot = await getDocs(collection(db, "users"));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} =>`, doc.data());
  });
}

---

4. 정리

• addDoc: Firestore 컬렉션에 새로운 문서를 추가.
• getDocs: Firestore 컬렉션의 모든 문서를 가져오기.
  Firebase는 실시간 데이터를 처리할 수 있는 강력한 도구입니다. 프로젝트 요구사항에 따라 updateDoc, deleteDoc 등 다양한 기능도 제공하니 필요에 따라 문서를 참고하세요.