firebase를 활용한 프로필사진 업로드

사용 API

FileReader API 사용 -> 글을 업로드 하기전에 사진을 미리보기형식으로 웹상으로 업로드 할 때 사용함.

활용방법은 무궁무진

이미지를 굉장히 긴 텍스트로 변형하여 사용한다.

Storage 의 ref 사용 => google 의 버켓

사진 + 트윗을 업로드 할 경우 -> 버켓에 먼저 이미지를 업로드 한다. -> 그 다음 URL을 ref.getDownloadURL(); 로 받아와서 트윗과 함께 cloud storage 에 attachmentUrl 로 경로를 업로드 한다.

그런 다음 트윗에는 이미지 경로를 받아와서 html 로 표현한다.

모든 파일을 다룰 땐 Ref (reference) 를 반드시 사용하게 되어있다.

공식 문서를 볼 때 참고하면 좋을 듯

/////

04.25

userObj 로 프로필 사진 경로 따로 저장

파이어베이스 스토리지 사진 -> 프로필로 가져오기

img로 경로 사진 가져와서 html로 출력하기

/////

04.26

code로 firestore의 collection을 제거해야함. -> 기존의 프로필은 삭제하고 새로운 사진으로 프로필 대체

인터넷에서 collection을 삭제하는 코드를 찾음

const res = await db.collection('cities').doc('DC').delete();
index.js

중 doc에 대한 정보를 찾고 있었음.

-> collection 자체를 삭제하려면 내부 요소를 삭제한 뒤에 collection 삭제가 가능함 따라서 어차피 내부요소를 삭제할 수 있으면 굳이 collection을 삭제할 필요가 없음.

-> collection에 저장된 랜덤의 id값을 읽어오거나 이름을 정해서 저장하면 해당 이미지 정보만 삭제 가능함.

/////

04.30
get함수를 그냥 이용하면 무슨 이유에선지 되지 않음

Const changePicture = dbService.collection(“profilePic”).doc(${userObj.uid}).get().data();

-> data 는 함수가 아니라는 에러가 나옴.
하지만 아래대로 정리했더니 data()가 잘 작동함. 무슨이유지?

const changePicture = dbService
  .collection("profilePic")
  .doc(`${userObj.uid}`);

const doc = await changePicture.get();
if (!doc.exists) {
  console.log("No such document!");
} else {
  console.log("Document data:", doc.data());
}
setPicture(doc.data().profilePicUrl);