Giphy 링크를 파일 변환하여 Firebase Storage 에 올려주기

회사에서 gif 파일을 메인화면에 띄워줄 필요가 있었는데, 그냥 gif링크를 올리는 것은 언제 gif가 없어질 지 모르고, 링크가 바뀔 수 도 있으니 Base64 파일형식으로 firebase storage에 저장하고자 하였다.

 if (newSeason.img) {
      const response = await fetch(newSeason.img);
      const blob = await response.blob();
      const base64 = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => {
          const base64data = reader.result;
          resolve(base64data);
        };
      });
      const base64data = base64?.toString();

      const fileRef = ref(storage, `seasons/${newSeason.title}`);
      await uploadString(fileRef, base64data!, "data_url");
      newSeason.img = await getDownloadURL(fileRef);
    }

위 코드를 순서대로 설명하자면,

1. fetch()를 통하여 이미지를 가져오기

Copy codeconst response = await fetch(imgUrl);

이 코드는 imgUrl로 지정된 이미지를 가져오는 HTTP 요청을 수행합니다. 요청에 대한 응답으로 Response 객체가 반환된다.

 

2. blob()을 사용하여 Response 객체에서 Blob 객체를 만들기

Copy codeconst data = await response.blob();

이 코드는 Response 객체에서 이미지 데이터를 추출하여 Blob 객체로 만든다. Blob 객체는 바이너리 데이터를 나타내며, 파일 형식의 데이터를 다루는 데 사용된다.

 

3. FileReader 객체를 사용하여 Blob 객체를 Base64로 인코딩

Copy codeconst base64Data = await new Promise((resolve) => {
 const reader = new FileReader(); 
 reader.readAsDataURL(data); 
 reader.onloadend = () => resolve(reader.result); });

이 코드는 FileReader 객체를 생성하고, readAsDataURL() 메서드를 사용하여 Blob 객체를 Base64로 인코딩한다. onloadend 이벤트 핸들러를 등록하여 인코딩이 완료될 때까지 기다린다. 인코딩이 완료되면 reader.result 값이 반환되며, 이 값은 Base64로 인코딩된 데이터 URL이다.

 

해당 과정을 거친 뒤 , firebase Storage에  UploadString 으로 파일 링크를 올려주고 , getDownLoadURL로 링크를 또 따로 저장해줬다.