앗..버킷주소/파일path 복사해서 브라우저 주소창에 붙여 넣기 했는데 이미지가 안뜨쟈나...?
스토리지가 보안 강화됐거나 아니면 Rules 때문일지도..

url을 다운로드 하려면 public url을 다운로드받아야 한다.

Storage에서 파일 다운로드 받기

Cloud Storage의 Reference에 대해 getDownloadURL()메서드를 호출하여 파일의 다운로드 URL을 가져올 수 있다.

• 예시

import { getStorage, ref, getDownloadURL } from "firebase/storage";
//
const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // 위의 getDownloadURL()를 통해 반환되는 'url'은 'images/stars.jpg'의 다운로드 URL이다.
//
    // 이 파일은 직접 다운로드할 수 있다.
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();
//
    // 또는 <img> 요소에 삽입할 수 있다.
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // 오류 처리는 catch 구문으로 하면 된다.
  });

📍 routes/Home.js

//

import { ref, uploadString, getDownloadURL } 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);
  
  //🔥 response의 ref, 즉 스토리지에 업로드한 파일 위치에 있는 그 파일의 URL을 다운로드해서
  // attachmentUrl 변수에 넣어주자.
  let attachmentUrl;
  attachmentUrl = await getDownloadURL(response.ref);
  //🔥 그러고 나서 attachmentUrl를 콘솔에 찍어보자!
  console.log(attachmentUrl);

  //트윗하기 누르면 새로운 document 생성하기는 현재 주석처리
};

//

• 오호 스토리지에 업로드한 파일의 URL을 다운로드URL로 잘 다운받았다!!
  

다운로드URL 트윗 오브젝트에 넣기

이제 다운로드 받은 URL을 트윗할 때 같이 넣어 주자!
주석 풀러 고고싱~!!!

//

import { ref, uploadString, getDownloadURL } 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);

  //response의 ref, 즉 스토리지에 업로드한 파일 위치에 있는 그 파일의 URL을 다운로드해서
  //attachmentUrl 변수에 넣어주자.
  let attachmentUrl;
  attachmentUrl = await getDownloadURL(response.ref);
  //그러고 나서 attachmentUrl를 콘솔에 찍어보자!
  console.log(attachmentUrl);

  //🔥 트윗 오브젝트에 다운로드한 attachmentUrl 추가
  const tweetObj = {
    text: tweet, //tweet(value로 tweet state 값)
    createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
    creatorId: userObj.uid,
    attachmentUrl,
  };
  
  //🔥 트윗하기 버튼 클릭하면 tweetObj 형태로 새로운 document 생성하여 tweets 콜렉션에 넣기
  await addDoc(collection(dbService, "tweets"), tweetObj);

  //🔥 state 비워서 form 비우기
  setTweet("");
  
  //🔥 파일 미리보기 img src 비워주기
  setAttachment("");
};

다큐먼트에 다운로드url 넣어줬으니 storage 뿐만 아니라 db인firestore에도 업로드 되었는지 확인해보자!

1. 이미지 첨부해서 트윗하기
   

2. 스토리지에는 이미지 잘 업로드됨!
   

3. 파이어스토어(db)에도 스토리지로 업로드된 파일 위치를 가리키는 ref를 참조하여 파일url을 다운로드하여 attachmentUrl로 잘 들어간 것을 확인! attachmentUrl에 적힌 url을 브라우저 주소창에 입력 시 찜니사진이 잘 뜨는 것을 확인할 수 있음 ^3^!
   

attachmentUrl을 트윗에 보이게 하기

예이~~ 이제 Tweet.js 컴포넌트에서 다큐먼트의 attachmentUrl을 img src에 넣어서 트윗한 이미지 화면에 보이게 해보자.

📍 components/Tweet.js

//
<>
  <h4>{tweetObj.text}</h4>
  {/*🔥 이미지 업로드 했을 때만 보이게*/}
  {tweetObj.attachmentUrl && (
    <img src={tweetObj.attachmentUrl} alt="image" width="500" />
  )}
  {/*트윗 주인인 경우만 삭제/수정 버튼 보이게*/}
  {isOwner && (
    <>
      <button onClick={onDeleteClick}>삭제</button>
      <button onClick={toggleEditing}>수정</button>
      </>
  )}
  </>

하지만!! 때로는 attchment가 없다. 즉, 이미지 업로드 안하고 트윗만 작성할 때도 있다.

• 지금 상태로는 이렇게 뜬다는 사실... 첨부 이미지 없이 text만 작성하고 트윗하려고 했더니 오류 뜬다 ^^!
  

따라서 const [attachment, setAttachment] = useState(""); 로 빈값으로 비워두는것을 디폴트로 하자.
아래 코드보며 따라가길 추천..!

📍 routes/Home.js

//getDownloadURL 임포트
import { ref, uploadString, getDownloadURL } from "@firebase/storage";

//사진 첨부 없이 텍스트만 트윗하고 싶을 때도 있으므로 기본 값을 ""로 해야한다.
//트윗할 때 텍스트만 입력시 이미지 url ""로 비워두기 위함
const [attachment, setAttachment] = useState("");

const onSubmit = async (event) => {
  event.preventDefault();
  let attachmentUrl = "";
  
  //이미지 첨부하지 않고 텍스트만 올리고 싶을 때도 있기 때문에 attachment가 있을때만 아래 코드 실행
  //이미지 첨부하지 않은 경우엔 attachmentUrl=""이 된다.
  if (attachment !== "") {
    //파일 경로 참조 만들기
    const attachmentRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
    //storage 참조 경로로 파일 업로드 하기
    const response = await uploadString(attachmentRef, attachment, "data_url");
    //storage 참조 경로에 있는 파일의 URL을 다운로드해서 attachmentUrl 변수에 넣어서 업데이트
    attachmentUrl = await getDownloadURL(response.ref);
  }
  
  //트윗 오브젝트
  const tweetObj = {
    text: tweet,
    createdAt: Date.now(),
    creatorId: userObj.uid,
    attachmentUrl,
  };
  
  //트윗하기 누르면 tweetObj 형태로 새로운 document 생성하여 nweets 콜렉션에 넣기
  await addDoc(collection(dbService, "tweets"), tweetObj);
  
  //state 비워서 form 비우기
  setTweet("");
  
  //파일 미리보기 img src 비워주기
  setAttachment("");
};



//첨부 파일 url 넣는 state인 attachment 비워서 프리뷰 img src 없애기
const onClearAttachment = () => {
  //null에서 빈 값("")으로 수정, 트윗할 때 텍스트만 입력시 이미지 url ""로 비워두기 위함
  setAttachment("");
};