💛 [ Firebase ] v9부터 크게 달라진 사용법들 모아보기.. (살려주세요)

Firebase를 React 프로젝트에서 사용하려는데 생기는 무시무시한 오류들...
" 나 맞게 했는데??? " -> 버전 9부터 사용법이 아예 바뀌었습니다 ^^
오류 해결을 찾아 공식문서를 항해하며 알게된 새로운 사용법들을 정리했습니다.
다른분들은 고생하지 마세요

공식문서 의 소중함을 느끼게 된 이야기.. START

1. Firebase 인증 모듈 사용

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

const firebaseConfig = {
  ...
};

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

분명 똑같이 쳤는데 발생하는 오류..

파이어베이스 인증 모듈을 사용 하는 과정에서 발생했다

Failed to compile.
./src/fbase.js
Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

알고보니 Firebase V9 부터 달라진 import 방식때문이였다 ㅠㅠ
나름 최근에 발행한 책이였음에도.. 이런 큰 변화라니..

그리햐여 바뀐 버전에 맞게 새로 코드를 짰다

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

const firebaseConfig = {
  ...
};

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

• firebase.auth 대신 getAuth() 사용

• firebase 가 아닌 intiailizeApp import

---

2. Auth 관련 함수들 사용

원래

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

이렇게 createUserWithEmailAndPassword 함수와 signInWithEmailAndPassword 함수를 사용했는데

TypeError: fbase__WEBPACK_IMPORTED_MODULE_0__.authService.createUserWithEmailAndPassword is not a function

이런 오류가 나왔다...
함수가 아니라고 인식을 한다

이 역시 파이어베이스 v9로 인해 함수 사용방식이 달라진거였다ㅠㅠ

해결

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

를 추가하고

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

의 형태로 createUserWithEmailAndPassword 함수와 signInWithEmailAndPassword 함수를 사용한다

---

3. export ~ = firebase

export const firebaseInstance = firebase;

Failed to compile.
src/fbase.js
Line 23:33: 'firebase' is not defined no-undef
Search for the keywords to learn more about each error.

익숙한 오류..
getAuth() ##1 과 마찬가지로 getAuth를 이용하여 해결 가능했다 ㅠㅠ

export const firebaseInstance = getAuth();

---

4.GoogleAuthProvider 가 안되는 오류

provider = new firebaseInstance.authGoogleAuthProvider();

Unhandled Rejection (TypeError): Cannot read property 'GoogleAuthProvider' of undefined

파이어베이스 소셜로그인만 하면 오류가 생긴다
물론 이것도 역시! 버전의 차이 ^^!

해당 함수를 사용할 파일 위에

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

를 추가해주고

provider = new GoogleAuthProvider();

로 함수 사용 방식을 바꿔준다

---

5. signInWithPopup 오류

const data = await authService.signInWithPopup(provider);

Unhandled Rejection (TypeError): fbaseWEBPACK_IMPORTED_MODULE_0.authService.signInWithPopup is not a function

함수가 아니라고 나온다 (어디선가 많이 봤다)
위 ##4 그리고 ##2 와 비슷하게 해결했다

const data = await signInWithPopup(authService, provider);

---

6. firestore export 오류

Failed to compile.
src/fbase.js
Line 25:26: 'firebase' is not defined no-undef
Search for the keywords to learn more about each error.

환장적인 오류.. 근데 어디서 많이 본 오류다.
##1 의 해결방법을 응용해서 해결했다

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

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

---

7. collection.add 9버전으로 사용하기

import {dbService} from "fbase";
...
collection("nweets").add({...});

Unhandled Rejection (TypeError): fbase__WEBPACK_IMPORTED_MODULE_1__.dbService.collection is not a function

아주 익숙하게 생긴 오류가 또 나왔다.
이제는 내가 내블로그를 보고 해결을 시도하기 시작했다..
이번에는 ##4를 참고함

//import {dbService} from "fbase"; 대신
import {collection} from "firebase/firestore"

를 임포트해주고

//dbService.collection("nweets").add({...}) 대신
collection("nweets").add({...});

로 함수 사용방식을 변경

Unhandled Rejection (FirebaseError): Function collection() cannot be called with an empty path.

엥 안된다...?

결국 공식문서 보고왔다. ㅎ

FireStore 에서 데이터를 추가하는 방법을 설명하는 문서 를 봤더니

addDoc 라는 아예 생각지도 못한 함수.. 가 튀어나오네....음....
감히 내가 이렇게 많은 변형을 시도해도 되는건지 긴가민가하지만 일단 다시 해봤다

// await collection("nweets").add({...}); 대신

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

와아아앙 성공@@!@!
나는 이제 공식문서에게 인스타에서만난대학교과동기 정도의 친밀감을 가지게 되었다

---

8. collection.get() v9로 사용하기

const dbNweets = await dbService.collection("nweets").get();

Unhandled Rejection (TypeError): fbaseWEBPACK_IMPORTED_MODULE_2.dbService.collection is not a function

난 이제 오류를 예측할 수 있는 경지에 이르렀다

collection.add 는 addDoc(collection(...),{...}) 로 바뀌었고 (##7 참고)
colletion.get 은 뭐로 바꼈는지 공식문서를 보러가자

비슷하게 getDocs 를 쓰니까 이에 따라 바꿔준다

//const dbNweets = await dbService.collection("nweets").get(); 대신
const dbSweets = await getDocs(collection(dbService, "sweets"));

---

9. v9 onSnapshot 사용

dbService.collection("nweets").onSnapshot((snpashot) => {

Failed to compile.
src/routes/Home.js
Line 21:24: 'snapshot' is not defined no-undef
Search for the keywords to learn more about each error.

이제 공식문서 없이 못사는 사람이 되었다

import {onSnapshot} from "firebase/firestore";
...
// dbService.collection("nweets").onSnapshot((snapshot) => 어쩌구 대신

onSnapshot(collection(dbService, "sweets"), (snapshot) => { 어쩌구

요렇게 바꿧다

---

10. db.doc() v9에서 사용하기

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

역시 오류가 뜬다
엥 근데 조금 낯선 경고문구...

Unexpected reserved word 'await'.

await 을 빼라네..?
찾아보니 onSnapshot 함수는 async-await 을 못쓴단다
v8에서는 허용했는데 v9에서는 아예 허용도 안한듯

//const data = await dbService.doc(`nweets/%{nweetOnj.id}`); 대신
const data = dbService.doc(`nweets/%{nweetOnj.id}`);

그래서 빼주면

TypeError: fbaseWEBPACK_IMPORTED_MODULE_0.dbService.doc is not a function

이제는 정들어버린 이 경고 문구,,

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

...

//const data = dbService.doc(`nweets/%{nweetOnj.id}`); 대신
const data = doc(dbService, `sweets/%{sweetOnj.id}`);

firebase v9 에 맞는 사용법으로 바꿔주자
이제는 적당히 어떻게 바꾸면 될지 예측하는 지경에 이르렀다

---

11. doc.delete()

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

이거 오류나서

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

이렇게 해도

TypeError: Object(...)(...).delete is not a function

이런 오류가 나서

const data = deleteDoc(doc(dbService, `sweets/%{sweetOnj.id}`));

이렇게 해결
한줄 알았는데 삭제가 안된다..?
기능자체는 구현해서 삭제는 되는데 그 대상이 잘못지정되는 듯했다

v9에 설명하는 대로 형식을 (데베, 컬렉션, 문서) 로 바꿔보자

deleteDoc(doc(dbService, "sweets", sweetObj.id));

구현성공.. (쉽지 않군)

---

12. db.doc.update() v9

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

느껴진다 에러의 기운

TypeError: fbaseWEBPACK_IMPORTED_MODULE_0.dbService.doc is not a function

오랜만에 본 내 에러친구
손쉽게 처리해주자 (feat . 공식문서)

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

...

updateDoc(doc(dbService, "sweets", sweetObj.id), { text: newSweet });

---

갑자기 7장으로 건너뜁니다 호호

---

13. updateProfile() v9

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

TypeError: fbaseWEBPACK_IMPORTED_MODULE_0.dbService.doc is not a function

해결

import { updateProfile } from "@firebase/auth";
...
updateProfile(userObj, { displayName: newDisplayName });

---

프롤로그

너무 TMI라서 글 맨 아래로 내려버림

야심차게 시작한 노마드 코더의 트위터 클론코딩
최근 발행한 책인데 그 사이에 업뎃된 파이어베이스의 v9는 책과 너무나도 달랐다...
똑같이 따라쳐도 나만 오류가 생겼다 ㅠㅠ

원래는 트위터 클론코딩 토막 TIL 을 작성하려고 새글쓰기를 눌렀는데..
나를 반기는 예기치 못한 오류들.....
그 오류들을 해결해나가는 이야기..가 되어버린.. 클론코딩 TIL였던것

정말 최근에 업뎃된거라 그런지 인터넷에 정보도 별로 없었다
그렇게.. 나는 공식문서와 친해졌다.