Firebase 이란 ? Firebase 사용 방법 - 저장소 , storage , bucket 사용 방법

시작하기

https://firebase.google.com/docs/storage/web/start?authuser=0 

웹에서 Cloud Storage 시작하기  |  Firebase Documentation

 

1. getStorage() 하기

 

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// Set the configuration for your app
// TODO: Replace with your app's config object
const firebaseConfig = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket-url>'
};
const firebaseApp = initializeApp(firebaseConfig);

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage(firebaseApp);

 

2. 참조 만들기 , ref

파일을 저장할 위치를 정하는 것입니다.

 

import { ref } from 'firebase/storage';
const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);

 

https://firebase.google.com/docs/storage/web/create-reference?authuser=0 

웹에서 Cloud Storage 참조 만들기  |  Firebase Documentation

 

 

3. 파일 업로드하기 

 

문자열로 올릴 시 uploadString을 사용하며(  파일 ref , 보낼 파일 데이터 , 포맷 ) 순서로 코드를 작성하면 됩니다

import { ref, uploadString } from 'firebase/storage';
const response = await uploadString(fileRef, photoSource, 'data_url');

 

https://firebase.google.com/docs/storage/web/upload-files?authuser=0 

웹에서 Cloud Storage로 파일 업로드  |  Firebase Documentation

 

혹시 업로드가 되지 않는다면 규칙에서 다음과 같이 바꿔보세요

 

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

 

업로드가 잘 된 모습

4. 파일 다운로드 받기 (이미지 파일 URL 얻기)

 

getDownloadURL ( 파일 업로드할 때 했던 uploadString의 객체를 인자로 넣고. ref를 하면 이미지 주소가 나옵니다)

 

 

 

https://firebase.google.com/docs/storage/web/download-files

웹에서 Cloud Storage로 파일 다운로드  |  Firebase Documentation

import { getDownloadURL, ref, uploadString } from 'firebase/storage';

let photoURL = '';
    if (photoSource !== '') {
      const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
      const response = await uploadString(fileRef, photoSource, 'data_url');
      photoURL = await getDownloadURL(response.ref);

 

 

이렇게 파일 주소가 나옵니다

 

얻은 url로 데이터를 생성한 모습

5. 파일 삭제

 

deleteObject을 이용해서 삭제하면 됩니다.

 

import { dbService, storageService } from '../firebase';
import { deleteObject, ref } from 'firebase/storage';


await deleteObject(ref(storageService, photoURL));

https://firebase.google.com/docs/storage/web/delete-files

웹에서 Cloud Storage로 파일 삭제  |  Firebase Documentation