파이어베이스 적용하기

이 글은 리액트에서 파이어베이스를 적용하는 내용이 담겨있습니다.

---

이제 식단표 프로젝트에 서버를 합쳐야 하는데...
부트캠프를 다니면서 여러번 들어본 파이어베이스를 한 번 적용해보기로 했다.
간단한 CRUD를 먼저 적용해보기로!

우선 파이어베이스 홈페이지에서 프로젝트를 만들어야 한다!
파이어베이스 프로젝트 만들러 가기

그 후 파이어베이스 프로젝트에 적용하는 방법 을 읽어보고 2단계까지 진행하기

난 기존 프로젝트를 CRA로 만들었기 때문에 src 폴더 안에 firebase-config.js 파일을 만들어서 firebase 앱 객체를 만들었다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSGIN_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// initializeApp을 통해 firebase 앱을 만들고,

export const firestore = getFirestore(app); 
// getFirestore에 만든 firebase 앱을 매개변수로 넣어
// 서버 역할을 하는 firestore을 만든다? 가져온다!

firebaseConfig 는 프로젝트를 만들면 나오는 SDK 연결정보를 넣어주면 된다. 난 .env 만들어서 ignore 해뒀다.

만들어줬다면 이제 데이터 CRUD가 가능하다!

데이터 추가, 읽기 공식문서 읽으러가기

난 우선 데이터 추가, 읽기가 제대로 되는지 확인하기 위해 달력 헤더에 임시로 버튼을 만들어줬다.

데이터 추가는 addDoc 메서드를 이용해서 가져온다.

create 버튼 누르면 작동되는 코드

import { collection, addDoc, getDocs } from "firebase/firestore";
import { firestore } from "../firebase-config";

async function firebaseAdd() {
    try {
      const docRef = await addDoc(collection(firestore, "users"), {
        first: "Ada",
        last: "Lovelace",
        born: 1815,
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }

데이터 읽기는 getDocs 메서드를 이용해 가져온다.

read 버튼 누르면 작동되는 코드

import { collection, addDoc, getDocs } from "firebase/firestore";
import { firestore } from "../firebase-config";

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

해당 코드들은 모두 공식문서에 나온 그대로이다!

create 버튼을 눌러보니

rebaseError: Missing or insufficient permissions.

ㅎ 야무지게 에러가 났다.

왜냐!
파이어베이스에는 기본 규칙이 있다
쉽게말해 모든 읽기 및 쓰기를 허용하지 않거나, 인증이 된(로그인이 된) 사람들만 데이터를 추가하고, 읽을 수 있다.
난 지금 인증이 된 유저가 아니기 때문에 데이터를 추가하고 읽을 수 없다. 그래서 에러가 난 것

에러를 나게 해주는 코드는 바로 여기에 있다.

allow read, write: if false;

로그인 기능을 먼저 만든 후 CRUD 기능을 진행하는 것이 베스트겠지만...
나는 당장 CRUD가 되는 것을 보고싶다! 하면 false 를 true로 바꿔주면 된다.

true로 변경하게 되면, 모든 사람이 데이터를 추가하고 읽을 수 있다는 얘기이기 때문에 보안에 치명적인 상태가 된다.

true로 규칙을 변경 한 후 create 버튼을 눌러보면?

정상적으로 추가된 데이터의 고유 id를 받아온다.

read 버튼을 누르면?

그동안 추가됐던 데이터들이 나열된다.

추가된 데이터는 firebase 콘솔에서도 확인할 수 있다.