[Firebase] Firebase, FireStore 설정 및 사용 [2] + React

2022.05.07 - [Backend] - [Backend] Firebase, FireStore 설정 및 사용 [1]

이전 게시물에서 만들어 둔 Firestore를 React에서 사용해보겠습니다.

 

1. Firebase 앱 추가

먼저 생성한 Firebase 프로젝트로 이동합니다.

이동 후에 앱 추가 버튼을 확인할 수 있습니다.

앱 추가 버튼을 클릭 후에 웹 버튼을 클릭합니다.

아래 순서대로 먼저 앱 닉네임을 정한 후 앱 등록 버튼을 클릭합니다.

 

잠시 기다리면 Firebase SDK 추가 내용이 나옵니다. (이후 페이지를 이탈해도 확인 가능)

2 Firebase SDK 사용

React 프로젝트를 실행하고, firebase를 설치합니다.

# npm
npm install firebase
# yarn 
yarn add firebase

본인은 위 SDK 내용을 .env 파일에 따로 저장했습니다. (env 파일을 gitignoe로 비공개 설정 했습니다.)

위 SDK 내용을 = 우측에 붙여 넣어줍니다. 

 

.env

REACT_APP_API_KEY= API_KEY
REACT_APP_AUTH_DOMAIN= AUTH_DOMAIN
REACT_APP_PROJECT_ID= PROJECT_ID
REACT_APP_STORAGE_BUCKET= STORAGE_BUCKET
REACT_APP_MESSAGIN_ID= MESSAGIN_ID
REACT_APP_ID= ID
REACT_APP_MEASUREMENT_ID= MEASUREMENT_ID

 

firebase.ts  (firebase.js) 

위에서 작성한 .env 파일의 환경 변수를 불러온다. 만약 env 파일의 환경 변수가 undefined가 나올 시 프로젝트를 재시작 해봅니다.

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

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_MESSAGIN_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

export { firestore };

 

이제 Firestore에 정보를 불러 올 차례이다.

Collection 정보와 Document 정보를 비공개 하기 위해 .env 파일에 추가 했다.

비공개 하기 위함도 있지만 정보를 한 파일에서 관리 하기 위해...

.env

REACT_APP_COLLECTION=coffee-select
REACT_APP_DOC=order

위 환경 변수를 좀 더 가독성 좋게 사용하기 위해 config.ts 파일에 상수로 할당 해주었다.

config

export const COLLECTION = process.env.REACT_APP_COLLECTION ?? "";
export const DOC = process.env.REACT_APP_DOC ?? "";

 

드디어 우리가 만들어 논 Firestore를 조회해 볼 준비가 되었다.

app.ts 

import React, { useEffect } from "react";
import { firestore } from "./firebase";
import {  COLLECTION, DOC } from "config";

export default function App2(): JSX.Element {
  useEffect(() => {
    firestore.collection(COLLECTION).doc(DOC)
      .get()
      .then((data) => {
        console.log(data.data());
      });
  }, []);
  return <></>;
}

 

결과