참조

seondal - [Firebase] v9부터 크게 달라진 사용법들 모아놓기.. (살려주세요)
kyounghwan Noh - firebase v9 문법 정리

Firebase v9 사용해보기

변경된 firebase v9 문법 react 에서 연습해보기

1. Firebase 인증 모듈 갖고오기

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  ...
};

  const app = initializeApp(firebaseConfig);
const authService = getAuth();

2. Auth 관련 함수 사용하기

// import 예시
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  setPersistence,
  browserSessionPersistence,
} from "firebase/auth";

// 사용 예시
// setPersistence(auth, browserSessionPersistence)
// 현재의 세션이나 탭에서만 상태가 유지되며 사용자가 인증된 탭이나 창이 닫히면 삭제됨을 나타낸다. 웹 앱에만 적용됩니다.
setPersistence(auth, browserSessionPersistence)
  .then(() => {
  // 비밀번호 기반 계정 만들기
  return signInWithEmailAndPassword(auth, id, pwd)
    .then((userCredential) => {
    const user = userCredential.user;
    dispatch(
      setUser({
        user_name: user.displayName,
        id: id,
        user_profile: '',
        uid: user.uid,
      }));

    history.push('/');
  })
    .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.log(errorCode, errorMessage);
  });
})

3. firestore export 방식의 변경

//import "firebase/firestore" 대신에
import { getFirestore } from "firebase/firestore";

//export const dbService = firebase.firestore(); 대신
export const dbService = getFirestore();

4. collection 갖고오기

import { collection } from "firebase/firestore";

collection(dbService, "콜렉션 이름")

5. firestore 의 create

import { addDoc } from "firebase/firestore";

// 문법
addDoc("키를 통해 가져온 db", "payload");

// 활용
await addDoc(collection(dbService, "콜렉션 이름"), {
  // 들어갈 데이터는 객체형식
  text: nweet,
  createdAt: Date.now(),
});

6. firestore 의 read

• query와 getDocs 메서드로 갖고올 수 있다.
  • query를 쓸 때는 조건을 달 수 있다.

import { getDocs, query } from "firebase/firestore";

// query와 getDocs를 같이 쓰는 법
const q = await query(collection(dbService, "콜렉션 이름"));
const data = await getDocs(q);
const newData = data.docs.map(doc => ({
  ...doc.data()
}));
setUsers(newData);

// getDocs()만 쓸 수도 있다.
const dbSweets = await getDocs(collection(dbService, "콜렉션 이름"));

7. firestore 의 update

• 업데이트 할 데이터를 doc으로 갖고오고 updateDoc으로 값을 바꿔준다.
• updateDoc의 두번째 값으로 기존에 있는 key값을 넣고 value를 넣으면 기존 값이 대체되고, 없는 key와 value를 넣으면 key, value가 추가됩니다.
  

import { updateDoc, doc } from "firebase/firestore";

const updateUser = async (id: string, age: number) => {
  // 원하는 데이터 가져옴
  const userDoc = doc(dbService, "콜렉션 이름", 해당 document의 id값);
  try {
    const res = await updateDoc(userDoc, { age: age + 1 });
    console.log(res); // res는 undefined
  } catch (e) {
    console.log(e);
  } finally {
    console.log("end");
  }
};

8. firestore의 delete

• update와 거의 똑같다.
  

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

const deleteUser = async (id: string) => {
  const userDoc = doc(db, "users", id);
  try {
    const res = await deleteDoc(userDoc);
    console.log(res); // res는 undefined
  } catch (e) {
    console.log(e);
  } finally {
    console.log("end");
  }
};