과제

Firebase와 리액트를 연동 하세요.

Firebase

파이어베이스는 구글에서 서비스하는 웹 및 앱 개발 플랫폼.
이것만 있으면 프론트엔드 개발자들이 백엔드에 대해 크게 신경쓰지 않고 빠르게 작업하여 작업 및 배포할 수 있다.

물론 엄청난 기능이 필요한것들은 백엔드가 필요하지만 단순한 CRUD 수준이라면 파이어베이스만으로도 간단하게 웹을 만들고 배포까지 할 수 있으니 알아두면 좋다고 볼 수 있다.

최근에 만든 개발 블로그도 사진 업로드는 파이어베이스의 파이어스토어를 통해서 작업을 진행한적이 있었다.
제일 큰 장점으로 생각했던게 역시나 무료로 사용이 가능하다는 점이었다.

(당시 선택 후보군으로는 버셀 blob도 있었었는데 close 베타인데다가 계속 기다려도 뽑아주질 않아서 포기했다.)

말만 하지 말고 직접 사용해보도록 하자.

사용하기

기본적인 세팅은 구글에서 검색하면 다 나오기 때문에 생략하도록 한다.
간단하게만 말하자면 이번 과제에서는 firestore Database를 사용해서 만들것이다.

대충 플랫폼을 하나 선택한다.

우리는 웹으로 할 것이기 때문에 </>을 선택한다.

구분 할 수 있는 이름을 넣도록 하자.

그러면 이런 화면이 나오는데
긁어가면 된다.
apiKey 같은 경우 일반적으로 보이지 않도록 가리는게 좋긴 하나
파이어베이스 같은 경우 노출되어도 크게 문제 없다고 구글측은 주장 하고 있다.

그리고 애초에 외부로 호스팅 되는 경우 클라이언트가 보려고 마음 먹으면 얼마든지 볼 수 있기도 해서 env로 막는게 의미가 없다.

아무튼 긁어서 config 파일 하나를 생성한다.

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

const firebaseConfig = {
  apiKey: "AIzaSyBD6LdxvBKUdsZMru_-GmLb03nhBO5fX0o",
  authDomain: "react-http-fe687.firebaseapp.com",
  databaseURL: "https://react-http-fe687-default-rtdb.firebaseio.com",
  projectId: "react-http-fe687",
  storageBucket: "react-http-fe687.appspot.com",
  messagingSenderId: "617315825596",
  appId: "1:617315825596:web:ed0864884d4e69285a1db9",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

export { db };

외부에서 db에 접근할 수 있도록 export 해주도록 한다.

import { db } from "./firebase";
import { doc, getDoc, getDocs, collection } from "firebase/firestore";
import { useEffect } from "react";

function App() {
  const getFetchData = async () => {
    // 컬렉션의 문서 하나만 가져오기
    const docRef = doc(db, "subscription", "m7G42aombPGoqGNuygxr");
    const docSnap = await getDoc(docRef);
    if (docSnap.exists()) {
      console.log("데이터 확인: ", docSnap.data());
    } else {
      console.log("");
    }

    // 컬렉션의 모든 문서 가져오기
    const querySnapshot = await getDocs(collection(db, "subscription"));
    querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());
    });
  };

  useEffect(() => {
    getFetchData();
    console.log(db);
  }, []);

  return (
    <div className="App">

    </div>
  );
}

export default App;

현재 DB 구조는 아래와 같다.

const docRef = doc(db, "subscription", "m7G42aombPGoqGNuygxr");
    const docSnap = await getDoc(docRef);
    if (docSnap.exists()) {
      console.log("데이터 확인: ", docSnap.data());
    } else {
      console.log("");
    }

이 부분을 보면 db를 import 해오고 doc을 통해 어떤 데이터를 가져올지 작성해주고 있는데
doc 함수에게 줄 파라미터는 config 파일에서 외부로 내보낸 db와 어떤 컬렉션을 선택할지, 어떤 문서를 선택할지 넣어주면 된다.

이렇게 하면 안정적으로 데이터를 가져올 수 있다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프