스파르타 코딩클럽 - 리액트 4주차(9)

1. 리액트에 Firebase 연동하기.

1-1. 파이어베이스 패키지 설치하기.

yarn add firebase

1-2. config 가져오기.

• (1). src폴더 하위에 firebase.js 파일을 만든다.

//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

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

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

export { firestore };
// 필요한 곳에서 사용할 수 있도록 내보내기

• (2). firebase 대시보드에서 웹 버튼을 눌러준다.
  

• (3). 앱 이름을 적고, 잠시 기다리면 sdk 추가영역에 텍스트가 뜬다.
  firebaseConfig 내용만 위의 firebase.js에 붙여넣어준다.
  

• (4). App.js에서 firebase.js에서 내보낸 firestore가져오기.

import { firestore } from "./firebase";

• (5). componentDidMount에서 데이터 불러와보기.

const bucket = firestore.collection("buckets");
// 하나만 확인하기
    bucket
      .doc("bucket_item")
      .get()
      .then((doc) => {
        // .exists를 써서 데이터가 있는 지 없는 지 확인!
        if(doc.exists){
          // 데이터를 콘솔에 찍어보자!
          console.log(doc.data());
        }
      });
//전체 확인하기
		bucket
      .get()
      .then((docs) => {
        let bucket_data = [];
        docs.forEach((doc) => {
          // 도큐먼트 객체를 확인해보자!
          console.log(doc);
          // 도큐먼트 데이터 가져오기
          console.log(doc.data());
          // 도큐먼트 id 가져오기
          console.log(doc.id);

          if (doc.exists) {
            bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }];
          }
        });

        console.log(bucket_data);