💛 [ 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): fbase__WEBPACK_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): fbase__WEBPACK_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: fbase__WEBPACK_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: fbase__WEBPACK_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

였던것

 

정말 최근에 업뎃된거라 그런지 인터넷에 정보도 별로 없었다

그렇게.. 나는 공식문서와 친해졌다.