firebase 버전 문제

[yjm6560]

책의 firebase 와 현재 firebase 버전이 다르다. 강의 때는 무슨 버전인지 모르겠지만 현재는 v9.10.0 로 업데이트 되면서 몇몇 호환되지 않는 기능들이 생겼다. 현재(chapter 4.1.5)까지는 처음 initialize, getAuth 정도에서 내용이 바뀌었다. 변경된 내용 관련해서는 아래 블로그를 참고하자 https://geonlee.tistory.com/253

아마도 firebase v9 버전업으로 인한 문제들은 아래 블로그에 다 등록되어 있는 것 같다. https://velog.io/@seondal/Firebase-v9%EB%B6%80%ED%84%B0-%EB%8B%AC%EB%9D%BC%EC%A7%84-%EC%9D%B8%EC%A6%9D%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95

[yjm6560]

4.3.2 Auth.js

createUserWithEmailAndPassword, signInWithEmailAndPassword 함수에서 Type error 발생. firebase v9 부터 함수 호출 방식이 바뀌어서 그랬다.

[yjm6560]

아마도 firebase v9 버전업으로 인한 문제들은 아래 블로그에 다 등록되어 있는 것 같다. https://velog.io/@seondal/Firebase-v9%EB%B6%80%ED%84%B0-%EB%8B%AC%EB%9D%BC%EC%A7%84-%EC%9D%B8%EC%A6%9D%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95

여기에 다 정리되어 있으므로 굳이 이슈에 코멘트 안 달고 그냥 위 링크 참조하자...

[yjm6560]

5.3.5 delete 적용

139p 에 있는 delete 적용하려면 수정을 좀 해줘야 한다. https://github.com/yjm6560/nwitter/issues/2#issuecomment-1264263012 의 11. doc.delete() 에 수정 방법이 설명되어 있으나 오타를 내신 것 같다.

const data = deleteDoc(doc(dbService, `sweets/%{sweetOnj.id}`)); // 이게 안 돼서
const data = deleteDoc(doc(dbService, "sweets", sweetObj.id));   // 이렇게 하셨다고 한다.

근데 이 부분은 sweets/%{sweetOnj.id} 이부분에서 % 대신 $ 를 사용해야 한다. 블로그 주인분이 하신 방법대로 해도 되고,(참고로 블로그에서는 책과 달리 nweet~~ 로 안 하고 sweet~~ 로 했다)

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

이렇게 해도 된다.

[yjm6560]

6.2.6 putString

책의 putString 역시 제대로 동작하지 않는다. 이게 맥에서만 동작하지 않는 건지 뭔지 모르겠다. 일단 계속 참고하고 있던 블로그에서는 6장을 다루지 않기 때문에 직접 찾아서 해결해봄..

문제 코드

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

일단 firebase v9 이후로 uploadString 으로 바뀐 것 같아서 이전에 firestore 의 addDoc 등등 처럼 그냥 uploadString(attachmentRef, attachment, "data_url"); 로 써보았지만 아래와 같은 에러 발생하며 안 됨. uploadBytes 라는 것도 있어서 해봤는데 똑같이 안 됨.

에러 메시지

Uncaught (in promise) FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)

해결 방법

에러 메시지에서도 알 수 있지만 unknown 에러다. 구글링해도 보안 룰을 변경하면 된다는데, 하라는 대로 해도 똑같이 나옴(https://stackoverflow.com/questions/70052479/firebase-storage-an-unknown-error-occurred-please-check-the-error-payload-for). firebase 깃헙 뒤져보니 500kb 이상인 파일에 대해서 나와 같은 오류 발생하는 것 확인(https://github.com/firebase/firebase-tools/pull/4407). 근데 v10.3 이후로 나타나는 거고 고쳐졌다는데 나는 9.10 써서 그런가 계속 발생한다. 또 https://github.com/firebase/firebase-tools/issues/4396#issuecomment-1087191503 이거 보면 500kb 이하 파일도 안 된다는데 왜 pr 에는 500kb 이상인 파일만 문제라 써놓고 해결됐다는 건지 모르겠음(실제로 100kb 안 되는 이미지 파일로 해도 안 된다).

여튼 원인 파악은 이정도까지만 하고 이거저거 해보다보니 아래처럼 해결 됐다(500kb 이상도).

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

[yjm6560]

6.2.7 getDownloadURL

역시나 안 된다. 비교적 간단하다.

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

이거를

import { ref, uploadString, getDownloadURL } from "firebase/storage";
console.log(await getDownloadURL(response.ref));

이렇게 바꿔주면 된다.

[yjm6560]

6.2.10 refFromUrl, delete

역시 안 된다. firebase 문서 뒤져봐도 refFromUrl 이 없다.. 그래서 그냥 url 로도 되겠지 하고 ref(storageService, attachmentUrl) 로 했더니 됐다. 좀 지나서 찾고 보니 https://firebase.google.com/docs/storage/web/download-files?hl=ko#create_a_reference 여기에 된다고 되어 있다. 그리고 delete 는 앞의 것들과 마찬가지로 storageService.refFromURL(~~).delete() 대신 deleteObject(ref(~~)) 로 써주면 된다. 최종적으로 아래처럼 써주면 된다.

import { ref, deleteObject } from "firebase/storage";
deleteObject(ref(storageService, nweetObj.attachmentUrl));