Firebase 8 대 9: Cloud Firestore CRUD 쿼리 비교

이 짧은 Firebase 튜토리얼에서는 Cloud Firestore에 대한 CRUD 쿼리 작성에 대해 Firebase 8과 Firebase 9를 나란히 비교하는 것을 볼 수 있습니다.

Firebase 시작하기

Version 9

Version 8
Data Cloud Firestore 추가

Version 9

Version 8
Data Cloud Firestore 읽기

Version 9

Version 8
Data Cloud Firestore 업데이트

Version 9

Version 8
Data Cloud Firestore 삭제

Version 9

Version 8

Firebase 시작하기 – 버전 9

Firebase 설치

npm install firebase@9.6.11

Firebase를 프로젝트로 가져오기

import { initializeApp } from 'firebase/app';

Firebase 구성 및 초기화 코드 추가

코드를 얻으려면 Firebase Console에서 새 Firebase 프로젝트를 만들어야 합니다.

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

Firebase 버전 8 시작하기

Firebase 설치

npm install firebase@8.2.3

Firebase를 프로젝트로 가져오기

import firebase from 'firebase';

프로젝트에 Firebase 구성 및 초기화 코드 추가

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

firebase.initializeApp(firebaseConfig);

Cloud Firestore에 데이터 추가 – 버전 9

쿼리를 만들고자 하는 위치에서 사용하려는 특정 모듈을 파기하여 Cloud Firestore에서 가져옵니다.

이 경우 데이터베이스인 getFirebase, 컬렉션 및 addDoc입니다.

import { getFirestore, collection, addDoc } from "firebase/firestore";

그런 다음 쿼리를 만들어 Cloud Firestore에 데이터를 추가합니다.

const db = getFirestore();
const userRef = collection(db, "users");
addDoc(userRef, {name: "Raja Tamil"});

Cloud Firestore에 데이터 추가 - 버전 8

쿼리를 만들 위치에 Firebase를 가져옵니다.

import firebase from "firebase";

그런 다음 쿼리를 생성하여 Cloud Firestore에 데이터를 추가합니다.

const db = firebase.firestore();
db.collection("users").doc().add({name: "Raja Tamil"});

Cloud Firestore에서 데이터 읽기 – 버전 9

import { getFirestore, collection, getDocs } from "firebase/firestore";

const db = getFirestore();
const userRef = collection(db, "users");

getDocs(userRef).then((snap) => {
      snap.forEach((doc) => {
        console.log(doc.id);
        console.log(doc.data());
      });
});

Cloud Firestore에서 데이터 읽기 - 버전 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .get()
        .then(snap => {
           snap.forEach((doc) => {
            console.log(doc.id);
             console.log(doc.data());
           });
        });
    },

Cloud Firestore로 데이터 업데이트 – 버전 9

import { getFirestore, collection, setDoc, doc } from "firebase/firestore";

const db = getFirestore();
const userRef = doc(db, "users", "ZOnRzcL9rFkX2yRWZYFZ");
setDoc(userRef, { name: "Pagalavan Tamil" }, { merge: true });

Cloud Firestore로 데이터 업데이트 – 버전 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .doc(id)
        .set({
           name: "Pagalavan Tamil"
         })
        .then(() => {
           console.log("deleted);
        });
    },

Cloud Firestore에서 데이터 삭제 - 버전 9

import { getFirestore, deleteDoc, doc } from "firebase/firestore";

const db = getFirestore();
deleteDoc(doc(db, "users", "ZOnRzcL9rFkX2yRWZYFZ")).then(() => {
      console.log("deleted");
});

Cloud Firestore에서 데이터 삭제 – 버전 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .doc(userId)
        .delete()
        .then(() => {
           console.log("deleted);
        });
    },

이 자습서에서 추가 쿼리를 추가하려면 아래 의견에 알려주십시오.

행복한 코딩!