현재 사진을 첨부하여 트윗을 올리고 나서 삭제버튼으로 그 트윗을 삭제하면

• db인 파이어스토어에서는 삭제가 되지만
• 이미지 파일이 올라가는 스토리지에서는 삭제가 안된다.
  왜냐하면 아직 그 코드를 입력하지 않았기 때문이다.

스토리지에서 이미지 파일 삭제하기

delete() 메서드를 사용하여 이미지 파일 삭제하기

파이어베이스 문서를 보자!
firebase > firebase Documtentation > build > storage > web > deleting files

예시

1. 파일을 삭제하기 위해 먼저 파일을 가리키는 참조(reference)를 만든다.
2. 그러고 나서 참조에 대해 delete() 메서드를 호출한다.
3. 정상적으로 처리되면 promise가 반환되고, promise가 거부되면 오류(error)가 반환된다.

• delete()` 메서드 호출 시 오류가 반환되는 경우:
  삭제하려는 파일이 없거나, 사용자가 그 파일을 삭제할 권한이 없는 경우 등.
  (참고) 오류 처리 섹션
• (참고) 파일 삭제 후 복원은 불가하다.

// ✅ web ver.9

import { getStorage, ref, deleteObject } from "firebase/storage";

const storage = getStorage();

// 삭제하려는 파일을 가리키는 reference 만들기
const desertRef = ref(storage, 'images/desert.jpg');

// 파일 삭제하기
deleteObject(desertRef).then(() => {
  // 삭제 정상 처리되면 promise 반환
}).catch((error) => {
  // promise 거부되면 오류 반환
});

코드 작성

삭제하는 파일 가리키는 ref를 만들기 위해서는 url을 입력해야 하는데 url에 무엇을 적어야 할까?
tweetObj의 attachmentUrl이 삭제하려는 그 파일의 url 이기 때문에 다음과 같이 입력하면 된다.

import { dbService, storageService } from "fbase";
import { deleteObject, ref } from "firebase/storage";
//생략...

//🔥 삭제하려는 이미지 파일 가리키는 ref 생성
//🔥 tweetObj의 attachmentUrl이 바로 삭제하려는 그 url임
const desertRef = ref(storageService, tweetObj.attachmentUrl);


//트윗 삭제
const onDeleteClick = async () => {
  const ok = window.confirm("정말 이 트윗을 삭제하시겠습니까?");
  //console.log(ok);  //treu/false 반환함
  if (ok) {
    try {
      //해당하는 트윗 파이어스토어에서 삭제
      await deleteDoc(tweetTextRef);
      //이미지 파일 스토리지에서 삭제
      await deleteObject(desertRef);
    } catch (error) {
      window.alert("트윗을 삭제하는 데 실패했습니다!");
    }
  }
};

오케이!
사진을 올렸다가 삭제하기 버튼을 누르니 storage에서도 잘 삭제되는 것을 확인할 수 있다.

문제 발생!

파일을 업로드하지 않고 그냥 텍스트만 쓴 트윗을 삭제하니 콘솔에 다음과 같은 오류가 뜬다.

attachmentUrl이 비어있기 때문에 두 번째 await에서 desertRef를 가져올 수 없기 때문에 이런 오류가 뜨는 것이다.

문제 해결!

두 번째 await을 if문으로 예외처리를 해주자.

import { dbService, storageService } from "fbase";
import { deleteObject, ref } from "firebase/storage";
//생략...

//🔥 삭제하려는 이미지 파일 가리키는 ref 생성
//🔥 tweetObj의 attachmentUrl이 바로 삭제하려는 그 url임
const desertRef = ref(storageService, tweetObj.attachmentUrl);


//트윗 삭제
const onDeleteClick = async () => {
  const ok = window.confirm("정말 이 트윗을 삭제하시겠습니까?");
  //console.log(ok);  //treu/false 반환함
  if (ok) {
    try {
      //해당하는 트윗 파이어스토어에서 삭제
      await deleteDoc(tweetTextRef);
      //🔥 삭제하려는 트윗에 이미지 파일이 있는 경우 이미지 파일 스토리지에서 삭제
      if (tweetObj.attachmentUrl !== "") {
        await deleteObject(desertRef);
      }
    } catch (error) {
      window.alert("트윗을 삭제하는 데 실패했습니다!");
    }
  }
};

reference는 어딘가의 object기 때문에 항상 reference를 찾자~!