밍부스34) 파이어베이스로 이미지 업로드하기 (s3 손절각)

firebase.js

//!1.  npm i fire base
//!2. https://firebase.google.com/docs/web/setup 위 사이트에서 initialize 코드 붙여넣기
import { initializeApp } from "firebase/app";
//! 5. 임포트해주기
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
//!3. 내 프로젝트 설정에 들어가서 나의 config를 붙여넣는다.  --> 연동설정 끝
//!4. 파이어베이스 사이트에서 스토리지 만들어주기
const firebaseConfig = {
 ....
};

const app = initializeApp(firebaseConfig);
//!6 익스포트 해주기
export const storage = getStorage(app);
export default app;

app.js

import logo from "./logo.svg";
import "./App.css";
import { useRef, useState } from "react";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { storage } from "./shared/firebase";

function App() {
  const [submit, setSubmit] = useState("");
  const file_link_ref = useRef(null);
  const uploadFb = async (e) => {
    console.log(e.target.files);
    const uploaded_file = await uploadBytes(
      ref(storage, `images/${e.target.files[0].name}`),
      e.target.files[0]
    );
    //!여기 까지 하고, 파이어베이스의 rules에 들어가서 쓰기권한 풀어주기
    //! 5번째 줄에 이렇게 : allow read, write;
    //!이제 콘솔에 사진파일을 넣으면 사진이 스토리지에 저장된걸 볼 수 있다.

    console.log(uploaded_file);
    //!다운로드된 url가져오기 : https://firebase.google.com/docs/storage/web/download-files
    const file_url = await getDownloadURL(uploaded_file.ref);
    console.log(file_url);
    //!url을 담아놓는 저장소로 ref를 사용해볼것
    file_link_ref.current = { url: file_url };
    console.log(file_link_ref.current.url);
  };

  return (
    <div className="App">
      <h1>파이어 베이스 연습중입니다.</h1>
      <input
        type="file"
        placeholder="사진을 추가해주세요 "
        onChange={uploadFb}
      />
      <button>전송하기 </button>
    </div>
  );
}

export default App;