Firebase를 사용해 보았습니다 ~ 제 3 장 Firestore에서 데이터 가져 오기 ~

React Hooks를 사용하여 채팅봇 앱을 만들고 있습니다.

이 장에서는 Firestore에 저장한 중에서 초기 데이터를 검색할 때까지 수행합니다.

제1장 서비스 배포
제2장 Firestore에 데이터 저장
제3장 Firestore에서 데이터 얻기

Firestore를 사용하는 준비 흐름

1. config.js 파일 만들기
2. 진입점 만들기
3. 초기 데이터 얻기
4. 정리

1. config.js 파일 만들기

src 디렉토리 아래에 'firebase' 디렉토리를 만들고 그 안에 'config.js' 파일을 만듭니다.
Firebase 페이지로 이동하여 프로젝트 설정 화면으로 이동합니다.


하단의 Firebase SDK snippet 구성을 선택하고 아래에 나열된 코드를 복사하여 config.js 파일에 붙여 넣습니다.


붙여넣은 내용을 다른 화면에서 사용하므로 export해 둡니다.

firebase/config.js

const firebaseConfig = {
  apiKey: "******",
  authDomain: "******",
  databaseURL:"******",
  projectId: "******",
  storageBucket: "******",
  messagingSenderId: "******",
  appId: "******",
  measurementId: "******"
};

export default firebaseConfig

이쪽의 내용은 GitHub 등에 공개해 문제없는 내용인 것 같습니다만, firestore의 보안 설정을 해 두지 않으면 간단하게 기입을 되어 버리므로 주의해 주세요. (보안 설정에 관해서는 여기)

2. 진입점 만들기

firebase 디렉토리 아래에 "index.js"파일을 만들고 다음을 작성합니다.

firebase/index.js

import firebase from 'firebase/app'        //firebaseを読み込み
import 'firebase/firestore'                //firebaseの中のfirestoreを読み込み
import firestoreConfig from './congfig'    //先ほど作成したconfigファイルを読み込み

firebase.initializeApp(firesbaseConfig);   //firebaseを初期化
export const db = firebase.firestore();    //初期化したfirebaseのfirestoreを使う

3. Firestore에서 데이터 가져오기

Firestore에서 데이터를 가져옵니다. 먼저 방금 만든 db를 가져옵니다.

src/App.jsx

import { db } from './firebase/index'

useEffect를 사용하여 페이지를 읽을 때 모든 데이터를 검색합니다.
async, await 첨부의 즉시 함수로 기술해 갑니다. (즉시 함수에 대해 참고 기사)

src/App.jsx

import React, {useState, useEffect} from 'react'
import { db } from './firebase/index'

const App = () => {
 const [dataset, setDataset] = useState({});

  useEffect(() => {
    (async () => {
      const initDataset = {};
      await db.collection('[チャットボットのjsonファイルで設定したキー]').get().then(snapshots => {
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          initDataset[id] = data
        })
        setDataset(initDataset)
      })
    })()
  },[])

여기서 하는 것은 다음과 같습니다.

collection에 액세스하고 데이터 (doc)를 얻습니다 (데이터는 모든 snapshots에 저장됩니다)

snapshots의 내용을 forEach로 돌려 id, data를 꺼낸다

꺼낸 id를 키에 initDataset안에 데이터를 격납한다

그리고는 임의의 장소에서 initDataset로부터 id를 키에 데이터를 꺼내 사용합니다.

4. 정리

이 장에서는 진입점을 만들고 Firestore에 저장된 데이터를 얻었습니다.

이번에 처음 사용한 것입니다만, 기술해야 할 내용을 파악할 수 있으면 매우 간단하게 할 수 있는 것을 알았습니다. 간편하게 백엔드 환경을 준비하고 싶은 분에게는 추천입니다!