8/6 파이어베이스 스토리지 구축

이미지 파일을 저장하고 불러오기 위해 파이어베이스 스토리지를 구축하였다.
데이터베이스와 마찬가지로 쓰기 권한을 허용하였다.
파이어베이스 공식문서에서 매뉴얼을 찾아볼 수 있었다.

import { getStorage, ref, uploadBytes, getDownloadURL } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js';

여기서 경로는 'https://www.gstatic.com/firebasejs/9.22.0/firebase-' 까지는 동일하며 - 뒤에는 서비스명을 적는다.

링크 - https://firebase.google.com/docs/web/setup?hl=ko

 const app = initializeApp(firebaseConfig);
      const db = getFirestore(app);
      const storage = getStorage(app);
  
      $('#qwebtn').click(async function () {
        const pfimgInput = $('#pfimg')[0];
        //pfimg 인풋 => pfimgInput
        const pfname = $('#pfname').val();
        const pfhobby = $('#pfhobby').val();
        const pfint = $('#pfint').val();
        const pfgoals = $('#pfgoals').val();
        const pfdtr = $('#pfdtr').val();
  
        const file = pfimgInput.files[0];
        //pfimgInput의 파일 => file
  
        if (!file) {
          alert('업로드할 파일을 올려주세요.');
          return;
        }
        //파일이 없으면 경고
  

        const storageRef = ref(storage, 'images/' + file.name);
  

        try {
          await uploadBytes(storageRef, file);
          const downloadURL = await getDownloadURL(storageRef);
  

          const doc = {
            pfimg: downloadURL,
            pfname: pfname,
            pfhobby: pfhobby,
            pfint: pfint,
            pfgoals: pfgoals,
            pfdtr: pfdtr
          };
  

          await addDoc(collection(db, 'inputdata'), doc);
          alert('성공했습니다.');
          window.location.reload();
        } catch (error) {
          console.error('에러', error);
          alert('에러');
        }
      });

글을 쓰면서 파이어베이스 구성원 기능이 있음을 알았다. 초대해달라고 해야겠다.