yjm6560 / nwitter

Cloning Twitter with React and Firebase
0 stars 0 forks source link

firebase 버전 문제 #2

Open yjm6560 opened 2 years ago

yjm6560 commented 2 years ago

책의 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 commented 2 years ago

4.3.2 Auth.js

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

yjm6560 commented 2 years ago

아마도 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 commented 2 years ago

5.3.5 delete 적용

139p 에 있는 delete 적용하려면 수정을 좀 해줘야 한다. https://github.com/yjm6560/nwitter/issues/2#issuecomment-126426301211. 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 commented 2 years ago

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 commented 2 years ago

6.2.7 getDownloadURL

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

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

이거를

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

이렇게 바꿔주면 된다.

yjm6560 commented 2 years ago

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));