이제 Firebase Storage의 bucket에 파일을 업로드해보자.
이를 위해 다음과 같은 단계가 필요하다.

1. Firebase Storage 셋업

2. 파일 위치에 대한 reference 만들기
   ref()

3. 파일 데이터를 그 reference로 업로드하기
   UploadString(ref, value, format);

트윗하는 부분 주석 처리

---

그 전에 routers/Home.js의 onSubmit 리스너에서 트윗(다큐먼트)을 컬렉션에 추가하는 부분을 주석처리(주석 처리 원하는 코드 블락 설정 후, Option + Shift + A)하자.

사진을 먼저 업로드하고나서 트윗을 업로드 할 수 있도록 일단 주석 처리해 두자.

const onSubmit = async (event) => {
  event.preventDefault();
  //트윗하기 누르면 새로운 document 생성하기
  /* try {
      await addDoc(collection(dbService, "tweets"), {
        //트윗 작성자
        creatorId: userObj.uid,
        text: tweet, //tweet(value로 tweet state 값)
        createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
      });
      //console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.error("Error adding document: ", error);
    }
    //state 비워서 form 비우기
    setTweet(""); */
};

Firebase Storage 셋업

---

📍 fbase.js

//Firebase Web v.9
//참고: https://firebase.google.com/docs/web/modular-upgrade#refactor_to_the_modular_style
//Follow this pattern to import other Firebase services
//import { } from 'firebase/<service>';

//파이어베이스에서 스토리지 가져오기
import { getStorage } from "firebase/storage";

//스토리지(사진 업로드) 내보내기
export const storageService = getStorage();

파일 위치에 대한 reference 만들기

---

firebase.storage.Reference(레퍼런스)란?

• 파일을 업로드하거나, 다운로드하거나, 파일을 삭제하거나, 메타데이터를 가져오거나, 업데이트하려면, 작업할 파일에 대한 reference를 만들어야 한다.
  • reference는 클라우드의 파일에 대한 포인터로 생각할 수 있다.
  • reference는 가볍기 때문에 필요한 만큼 만들 수 있으며 여러 작업에 재사용할 수도 있다.
    
    
• 레퍼런스 사용하는 방법
  • reference를 생성하려면 getStorage()를 사용하여 스토리지 서비스 인스턴스를 가져온 다음, 서비스를 인자로 사용하여 ref()를 호출한다.
  • 이 reference는 내 클라우드 스토리지 버킷의 루트를 가리킨다(points).
    
    
• 예시

//v.9
import { getStorage, ref } from "firebase/storage";
//내 스토리지 버킷에 references를 생성하는 데 사용되는 스토리지 서비스에 대한 reference 가져오기
const storage = getStorage();
//
// 🔥 내 스토리지 서비스에서 스토리지 reference 생성하기
const storageRef = ref(storage);
//
// 🔥 하위 참조(child references) 생성하기
const imagesRef = ref(storage, 'images');
// imagesRef는 이제 'images'를 가리킨다.
//
// 🔥 하위 참조(child references)는 '/'로 구분된 경로를 사용할 수도 있다.
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef는 이제 "images/space.jpg"를 가리킨다.
// images Ref는 여전히 "images"를 가리키고 있다.

ref()

ref()
: 구글 클라우드 스토리지 오브젝트 = bucket에 대한 참조(reference)를 나타낸다.
개발자들은 오브젝트를 업로드/다운로드/삭제할 수 있다.

사진 파일을 첨부하여 업로드하면, 그 파일의 데이터 url을 받아서 트윗에 데이터 url을 추가해야 한다.

이를 위해 ref()를 사용하면 된다.

const fileRef = ref(storage,`스토리지서비스에 업로드될 파일의 path`);

1. 참조를 생성하는 방법은 다큐먼트 컬렉션 만들 때랑 비슷하다. 다큐먼트 이름 정할 수 있었듯이 파일이 업로드될 폴더 이름을 정할 수 있다.
   (하위 참조(child references)는 '/'로 구분된 경로를 사용할 수 있다.)

   • 폴더는 유저 아이디${userObj.uid} 별로 만들도록 설정하자.

2. 또한 첨부파일이 업로드 될 때 이름을 정할 수 있는데, 이때 식별자(id)를 랜덤으로 생성해주는 패키지를 활용하자.

   • npm i uuid로 uuid 패키지를 설치한다.
   • import { v4 as uuidv4 } from "uuid";로 uuid를 가져온다.
   • uuid의 uuidv4() 메서드를 사용하여 파일명 식별자를 랜덤으로 생성하자.

     const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);

📍 routes/Home.js

// 식별자 자동 생성해주는 uuid
import { v4 as uuidv4 } from "uuid";
// storageService 가져오기
import { dbService, storageService } from "fbase";
// ref() 가져오기
import { ref } from "@firebase/storage";

//

const onSubmit = async (event) => {
  event.preventDefault();
  //file 레퍼런스 위치 = 파이어베이스 스토리지 > user별 폴더 > 업로드할 때 랜덤으로 생성된 id식별자
  const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
  
  //

• 이렇게 file 레퍼런스 위치를 참고할 수 있도록 설정하면 된다.
  파이어베이스 스토리지 > user별 폴더 > 업로드할 때 랜덤으로 생성된 id식별자

• 이제 fileRef는 user별 폴더의 랜덤 id(${userObj.uid}/${uuidv4()})를 가리킨다.
  
  

파일 데이터를 그 reference로 업로드하기

---

UploadString()

uploadString() 메서드를 사용하여 원시, base64, base64url 또는 data_url 인코딩된 문자열을 클라우드 스토리지에 업로드할 수 있다.

• uploadString(ref, value, format)
  : 데이터를 reference의 위치에 업로드하는 메서드
  1. 첫 번째 인자 ref: {@link StorageReference} 에서 문자열(string)을 업로드해야 한다.
  2. 두 번째 인자 value: 업로드할 String
  3. 세 번째 인자 format: 업로드할 String 형식
     
     
• 예시

//v.9
import { getStorage, ref, uploadString } from "firebase/storage";
//
const storage = getStorage();
const storageRef = ref(storage, 'some-child');
//
// Data URL string
const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});

참고할수 있는 위치를 생성했으니, 이제 uploadString() 메서드를 사용하여 찐 데이터를 레퍼런스가 가리키는 위치에 찐으로 업로드 할 차례이다.

//레퍼런스(fileRef)가 가리키는 위치에 찐으로 데이터 업로드하기
const response = await uploadString(fileRef, attachment, "data_url");

1. 첫 번째 인자ref에는 업로드될 파일의 위치를 가리키는 fileRef를 넣는다.

2. 두 번째 인자 value에는 attachment에 들어있는 url을 넣는다.

3. 세 번째 인자 포맷형식에는 "data_url"를 작성하면 된다.

📍 routes/Home.js

import { v4 as uuidv4 } from "uuid";
import { dbService, storageService } from "fbase";
// uploadString 가져오기
import { ref, uploadString } from "@firebase/storage";

//

const onSubmit = async (event) => {
  event.preventDefault();

  //storage에 파일 데이터가 업로드될 위치 가리키는 레퍼런스 생성하기
  const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
  
  //레퍼런스(fileRef)가 가리키는 위치에 찐으로 데이터 업로드하기
  //fileRef가 가리키는 위치에 attachment에 들어있는 첨부파일 url을 넣어라, 포맷data_url
  const response = await uploadString(fileRef, attachment, "data_url");
  //마지막으로 파일이 잘 업로드 되고 있는지 확인하기 위해 콘솔에 찍어보자!
  console.log(response);
  
  //

문제 발생!

---

1. 업로드 하려고 하니 permission이 안났다고 에러가 뜬다.
   

2. Firebase > Storage > Rules 규칙을 다음과 같이 수정해 주자.
   

3. 그러면 잘 된다!
   

• 콘솔에 업로드한 파일을 찍어보니 다음과 같이 뜬다.
  
  보다시피 레퍼런스의 위치에 트윙클 버켓이 뜨고 path가 user의 uid/랜덤id로 뜨는 것을 확인할 수 있다.

• 파이어베이스 스토리지에서도 확인 가능!
  

  • (물론 파일 삭제하고 다시 만들고 테스트 하느라 파일명은 다름 ^ㅇ^;)