Firebase 데이터 다루기

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. 개 요

이번에 팀 프로젝트를 하면서 우리가 만든 게시글 데이터를 서버에 저장하는 기능이 필요했다.

 

프론트엔드만으로 팀 프로젝트를 진행하다보니 누군가 서버를 만들었어야 했는데

기존에 Firebase를 사용해 본 경험이 있어 내가 담당하게 되었다.

 

프로젝트를 하면서 Firebase 데이터를 다루는 기본적인 방법을 이 글을 통해 기록하고자 한다.

 

2. Firebase 연동하기

Firebase Console 로 접속하여 프로젝트를 만들어야 하는데, 이 글에서 프로젝트를 만드는 방법은

생략하고 참고할 수 있는 공식 문서 내용을 최하단에 공유한다.

 

먼저, src 폴더 하위에 firebase.js 파일를 만들고, firebaseConfig 코드를 작성하였다.

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

const firebaseConfig = {
  // firebase 설정과 관련된 api 정보
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

initializeApp(firebaseConfig);

export const db = getFirestroe();

firebase 설정과 관련된 정보는 api 를 담고 있어 다음과 같이 코드를 숨겼다.
api 숨기는 방법과 불러오는 것에 대해 자세한 내용은 이전 글에서 확인해 볼 수 있다.

 

3. Firebase 데이터 다루기

3-1. 데이터 가져오기

가져온 데이터의 정보는 콘솔에서 확인할 수 있도록 코드를 만들었다.
만약, 아직 저장된 데이터가 없다면, Firebase console에서 문서 추가를 통해 만들어 본다.

Cloud Firestore 이미지

// src/App.js
import {db} from "./shared/firebase"
import {collection, getDocs} from "firebase/firestore"

useEffect(async () => {
	// db 뒤에 "techInfo"는 정보를 가져올 컬렉션 이름이다.
    const query = await getDocs(collection(db, "techInfo")); 
    query.forEach((doc) => {
      console.log(doc.id, doc.data())
    });
  }, [])

 

3-2. 데이터 추가하기

예제 코드에서는 저장 버튼이나 입력을 받는 코드를 만들지 않고, useEffect를 통해
페이지 로드 시 {contents: "데이터 저장 테스트"} 라는 데이터가 저장되도록 만들었다.

 

만들어진 데이터는 Firebase Console 에서 바로 확인할 수 있다.

// src/App.js
import {db} from "./shared/firebase"
import {collection, addDoc} from "firebase/firestore"

useEffect(async () => {
    addDoc(collection(db, "techInfo"), {contents: "데이터 저장 테스트"})
  }, [])

 

3-3. 데이터 수정하기

데이터를 수정할 때에는 객체에 대한 정보를 입력하여 Firebase 서버로 요청해야 하는데
예제 코드에서는 컬렉션 뒤 아이디를 직접 입력하여 데이터를 수정하도록 코드를 만들었다.

Cloud Firestore 이미지

// src/App.js
import {db} from "./shared/firebase"
import {updateDoc, doc} from "firebase/firestore"

useEffect(async () => {
	// 콜렉션("techInfo") 뒤에는 컬렉션 아이디 정보를 보내야 한다.
    const docRef = doc(db, "techInfo", "2ALWefUBtuyvy58ffuno");
    updateDoc(docRef, {contents: "데이터 수정 테스트"})
  }, [])

 

3-4. 데이터 삭제하기

데이터 삭제도 수정하기와 동일하게 컬렉션과 아이디 정보를 Firebase 서버로 요청을 보내면 된다.

// src/App.js
import {db} from "./shared/firebase"
import {doc, deleteDoc} from "firebase/firestore"

useEffect(async () => {
    const docRef = doc(db, "techInfo", "2ALWefUBtuyvy58ffuno");
    deleteDoc(docRef);
  }, [])

 

4. 마무리

이 글에서는 useEffect를 활용하여 페이지 로드 시 CRUD 가 되도록 코드를 만들었지만,
실 프로젝트에서는 useState를 이용하여 입력받은 데이터를 다루도록 코드를 짜보면 좋을 것 같다.

 

마지막으로 Firebase에는 사용자 인증(Authentication), 컨텐츠 저장(Storage) 등 프로젝트를 하면서

적용해볼 수 있는 많은 기능들이 존재한다. 자세한 내용은 공식 문서를 통해 확인해 볼 수 있으니 참고하도록 하자.

 

---

참 고

 

https://firebase.google.com/docs?authuser=0&hl=ko

문서  |  Firebase