Firebase v9부터 달라진 사용법 정리

 

'클론코딩 트위터'로 리액트와 파이어베이스의 감을 익히고 있던 중 이상하리만큼 잦은 오류가 발생했습니다.

알고보니 파이어베이스의 버전이 바뀌면서 사용법들이 교재와 많이 달라졌기 때문이였는데,

버전을 다운그레이드하면 되지만 9버전부터 SDK로 바뀌면서 용량도 작고 효율성이 증가됐다고 하여 그냥 진행하기로 했습니다.

 

다음은 코딩을 하며 발생한 오류들을 구글링과 공식문서를 통해 수정한 내역들입니다.

 

첫번째 오류 

not found in 'firebase/app’라는 오류 메시지가 출력됐습니다.

검색해본 결과, 파이어베이스 버전이 업그레이드 되면서 import경로가 변경되었습니다. (Firebase/app => firebase/compat/app)

내가 설치한 파이어베이스버젼은 "firebase": "^9.9.4"

이렇게 수정하고도 오류가 발생했습니다.

Uncaught TypeError: react_dom_clientWEBPACK_IMPORTED_MODULE_1.render is not a function

검색해보니 교재에 나와있는 reactDom의 렌더링 방식이 더이상 사용되지 않아서였습니다.

처음 CRA(create React App)을 사용하여 React 프로젝트를 생성했을때의 렌더링 방식으로 돌렸더니 정상 작동했습니다.

 

두번째 오류

Firebase 인증모듈 사용방법이 많이 변경됐습니다.

변경 전)

import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  ...
};

firebase.initializeApp(firebaseConfig);
export const authService = fierbase.auth();

변경 후)

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

const firebaseConfig = {
  ...
};

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

 

세번째 오류

비슷한 방법으로 Auth관련 함수들 사용방법을 변경합니다.

변경 전)

data = await authService.createUserWithEmailAndPassword(email, password);

변경 후)

import {

  createUserWithEmailAndPassword,

  signInWithEmailAndPassword,

} from "firebase/auth";

data = await createUserWithEmailAndPassword(authService, email, password);

 

네번째 오류

버전업으로인한 GoogleAuthProvider의 undefined문제가 발생했습니다.

변경 전)

Provider = new firebaseInstance.auth.GoogleAuthProvider()

변경 후)

import { GoogleAuthProvider } from "firebase/auth";

provider = new GoogleAuthProvider();

 

다섯번째 오류

버전업으로 인한 signInWithPopup의 오류가 발생했습니다.

변경 전)

const data = await authService.SignWithPopup(provider);

변경 후)

import {  signInWithPopup,  GoogleAuthProvider } from "firebase/auth";

const data = await signInWithPopup(authService, provider);

 

여섯번째 오류

버전업으로 인한 firestore 사용방법이 변경됐습니다.

변경 전)

import "firebase/firestore"

export const dbService = firebase.firestore();

변경 후)

import { getFirestore } from "firebase/firestore";

export const dbService = getFirestore();

 

일곱번째 오류

버전업으로 인한 collection.add 사용방법이 변경됐습니다.

변경 전)

import {dbService} from "fbase";

dbService.collection("nweets").add({...})

 

변경 후)

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

await addDoc(collection(dbService, "nweets"), {
      text: nweet,
      createdAt: Date.now(),
    });

 

여덟번째 오류 

버전업으로 인한 onSnapshot사용방법이 변경됐습니다.

변경 전)

dbService.collection("nweets").onSnapshot((snapshot) => ...

변경 후)

import {onSnapshot} from "firebase/firestore";

onSnapshot(collection(dbService, "nweets"), (snapshot) => { ...

 

아홉번째 오류

버전업으로 인한 db.doc()사용방법이 변경됐습니다.

변경 전)

const data = dbService.doc(`nweets/%{nweetObj.id}`);

변경 후)

import { doc } from "@firebase/firestore";

const data = doc(dbService, `nweets/%{nweetObj.id}`);

 

열번째 오류

버전업으로 인한 doc.delete() 사용방법이 변경됐습니다.

변경 전)

const data = await dbService.doc(`nweets/${nweetObj.id}`).delete();

변경 후)

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

deleteDoc(doc(dbService, "nweets", nweetObj.id));

 

열한번째 오류

버전업으로 인한 doc.update() 사용방법이 변경됐습니다.

변경 전)

dbService.doc(`nweets/${nweetObj.id}`).update({ text: newNweet });

변경 후)

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

updateDoc(doc(dbService, "nweets", nweetObj.id), { text: newNweet });

 

열두번째 오류

uncaught ReferenceError: firebase is not defined

아마도 firebase.storage()가 사라졌기 때문에 발생한듯합니다.

변경 전)

import "firebase/storage";

export const storageService = firebase.storage();

변경 후)

import { getStorage } from "firebase/storage";

const storageService = getStorage(app);

 

열세번째 오류

버전업으로 인한 이미지 파일 읽어오는 방법이 변경됐습니다.

변경 전)

const attachmentRef = storageService.ref().child(`${userObj.uid}/${uuidv4()}`);
const response = await attachmentRef.putString(attachment, "data_url");

변경 후)

import { ref, uploadString } from "firebase/storage";

const attachmentRef = ref(storageService,`${userObj.uid}/${uuidv4()}`);
const response = await uploadString(attachmentRef, attachment, 'data_url');

 

열네번째 오류

Uncaught (in promise) FirebaseError: Firebase Storage: User does not have permission to access 'kgVcYpTJKFeR2Da3RMJuubdYzns2/318001ac-fe5a-48d6-8b5e-1288e3263ae9'. (storage/unauthorized)

파이어베이스 스토리지의 룰을 변경해줍니다.

 

열다섯번째 오류

버전업으로 인한 getDownloadUrl() 사용방법이 변경됐습니다.

변경 전)

console.log(await response.ref.getDownloadURL());

변경 후)

import { getDownloadURL } from "firebase/storage";

console.log(await getDownloadURL(response.ref));

 

열여섯번째 오류

버전업으로 인한 refFromUrl() 사용불가 오류가 발생했습니다.

변경 전)

await storageService.refFromURL(storyObj.attachmentUrl).delete();

변경 후)

import { deleteObject } from "firebase/storage";

await.deleteObject(ref(storageService, storyObj.attachmentUrl));

 

열일곱번째 오류

버전업으로 인한 정렬쿼리 사용방법이 변경됐습니다.

변경 전)

const storys = await dbService.collection("story").where("creatorId", "==", userObj.uid)
.orderBy("createdAt", "asc")
.get();

변경 후)

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

const citiesRef = collection(dbService, "story");
const storys = getDocs(query(citiesRef, where("creatorId", "==", userObj.uid), orderBy("createdAt", "asc")));

 

열여덟번째 오류

버전업으로 인한 updateProfile() 사용방법이 변경됐습니다.

변경 전)

if(userObj.displayName !== newDisplayName) { await userObj.updateProfile({displayName: newDisplayName}); }

변경 후)

if(userObj.displayName !== newDisplayName) { await updateProfile(userObj, { displayName: newDisplayName });}

 

열아홉번째 오류

TypeError: userInternal.getIdToken is not a function at updateProfile

setUserObj에서 updaterProfile: (args) => user.updateProfile(args)가 먹지않는 오류발생했습니다.

아직 해결못했습니다.

 

스무번째 오류

Uncaught (in promise) FirebaseError: Firebase: Error (auth/account-exists-with-different-credential).

사용자 계정 연결을 아래 스샷과 같이 변경합니다.

 

클론코딩을 하며 Firebase v9를 설치하여 진행하시는 분들을 위해 진행하며 오류가 나는 순서대로 정리를 해보았습니다.

새삼 구글링과 공식문서에 감사함을 느꼈습니다ㅠ.