TIL 20210928[航海9913日]

反応器における連動火ベース

(1)Fire Base Packageのインストール
yarn add firebase
(2)configのインポート
Firebaseは

srcフォルダの下にあります.jsファイル

の作成

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

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

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

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

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

App.jsのfirebase.jsからエクスポートされたFirebase DB

をインポート

import {db} from "./firebase";

useEffectからデータをロードし、Firebase DBが正しくインポートされているかどうかを確認します.

...
const bucket = firestore.collection("buckets");
React.useEffect(() => {
    console.log(db);
  }, []);
...

FireStoreデータをプレイ
(1)全てのデータを読み込む
collection()として検索し、getDocs()を使用してコレクション内のデータをインポートします.
次にforeach文で内容を確認できます.△実は配列ではありません.

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
//async await는 한쌍으로 쓴다.
React.useEffect(async() => {
    //getDocs: 어떤 콜렉션인지 물어봄 => ()안에 콜렉션 넣음
    //'bucket': Firebase에 지정한 콜렉션 이름
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    //forEach: 객체안에 포함되어있는 내장함수 사용(반복문) -> array의 내장함수가 아니라 documents 모음객체의 
               내장함수 사용하는 것!
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

p.s. 1. console.log(query);
->サーバと通信している場合、この友人が答えを出すか、いつ答えを出すかは不明です.これが非同期通信です.=>だからコンソールを撮ったときに約束があって、いつか返事します!=>promiseに移動するのは、データが確認できないためasync waitを使用します.
2. query.forEach((doc) => {console.log(doc.id, doc.data());});
->async awaitを使用してpromiseからデータを受信しますが、見えにくいのでフォーマットを読み取るのに良い方法です.オブジェクトの組み込み関数Eachを使用します.これは、配列ではなくgetDocsのオブジェクトを受信するためです.
(2)データの追加
コレクションを見つける→addDoc()!Fire Baseダッシュボードによく追加されていることを確認します.

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), 
//추가할 데이터 내용
{ completed: false, text: "new" })

(3)データの修正
コレクションを見つける→ドキュメントIDでDoc()を更新!

import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
	//"P5Oz4GbccEg9uaca8sJG": 파이어베이스에서 자동으로 지정된 id값
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    //콜렉션을 안 넣는 이유-> 고칠 doc이 있어서 바로 docRef로 넣는 것 
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);

(4)データの削除
コレクションを検索→ドキュメントIDでDoc()を削除!

import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await deleteDoc(docRef);

  }, []);

コレクションの名前を変更して追加したらどうなりますか?

コレクションの名前を変えましょう.

// bucket에서 buckets로 이름 바꾸기! 그리고 대시보드를 확인해보세요!
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'buckets'), {
     completed: false,
     text: "new"
   })

新しいコレクションができました.
今日、ReactionでFirebaseをバインドし、データベースの完全な読み取り、追加、変更、削除を徐々に学習しました.今までFirebaseを使っていた後期は….
Firebaseを使うのは便利で、悪くない…!😎