[8주차] 리액트: Firestore의 Cloud Storage 사용하기

Firestore의 Cloud Storage 사용하기

1.  초기설정

Firestore 웹사이트

- Project 선택

- Storage (왼쪽 탭에서 선택)

- 시작하기

- 프로덕션 모드에서 시작하기 클릭

 

 

 

- Cloud Storage 위치 : asia-northeast3 으로 선택 후 완료 클릭

 

 

 

- 기본 버킷 생성 중...이 완료되면 아래화면처럼 나온다

 

 

- 그런 다음 '파일 업로드'를 눌러, 사진 파일을 하나 업로드 해준 다음 그 아래 디스플레이쪽에 사진 파일이 저장되는 것을 확인하고, 다시 파일을 삭제한다

 

 

2.  파일 업로드 하기 : Firestore SDK 추가

현재 파일 구조

 

 MyPage.jsx

import React, { useEffect } from 'react';
import styled from 'styled-components';
import FileUpload from '../components/FileUpload';

function MyPage() {
  return (
    <StOuterFrame>
      <StMainContainer>
        {/* Layout(Header) */}
        <div></div>
        <StMyInformationContainer>
          <StProfilePicture />
          <StMyId>아이디 : </StMyId>
          <StButtonContainer>
            <StButton>홈으로 가기</StButton>
            <FileUpload />
          </StButtonContainer>
        </StMyInformationContainer>
        <StMyPostContainer>
          <h3>내가 쓴 글</h3>
          <StMyPostList>
            <StMyPost>포스트 1</StMyPost>
            <StMyPost>포스트 2</StMyPost>
            <StMyPost>포스트 3</StMyPost>
            <StMyPost>포스트 4</StMyPost>
          </StMyPostList>
        </StMyPostContainer>
      </StMainContainer>
    </StOuterFrame>
  );
}

export default MyPage;

... styled components

 

 

firebase.config.js

// firebase.js

import { getStorage } from 'firebase/storage';

export const storage = getStorage(app);

 

 

FileUpload.jsx

import { ref, uploadBytes } from 'firebase/storage';
import React, { useState } from 'react';
import { storage } from '../firebase/firebase.config';

function FileUpload() {

  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0]);
  }

  const handleUpload = () => {
    const imageRef = ref(storage, "folder/file");
    uploadBytes(imageRef, selectedFile);
  };

  return (
    <div>
      <input type="file" onChange={handleFileSelect}/>
      <button onClick={handleUpload}>변경사항 저장</button>
    </div>
  )
}

export default FileUpload;

 

 

---

참고자료

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

 

GCP Cloud Storage + Springboot 연동하기

 

파이어베이스 클라우드스토리지 시작하기(Firebase Cloud Storage)