[Firebase] React에서 Storage로 프로필 사진 업데이트 하기

 

React에서 Storage로 프로필 사진 업데이트 하기

 

---

 

 프로필 업데이트 기능은 Firebase의 Authentication에서, 이미지 업로드 기능은 Firebase의 Storage를 이용하여 구현할 수 있다. 우선 사용자 프로필 업데이트 기능을 구현하려면, 사용자가 존재해야 한다. 사용자를 생성하는 것, 즉, 계정을 생성하고 로그인을 할 수 있는 기능이 이미 있어야 한다. (Authentication 관련 내용 : 이전 글 참고 https://inthedev.tistory.com/37)

 

firebase 9.16.0 버전 기준으로 작성되었습니다.

 

---

 

1. src에 firebase 파일 생성하기

 

 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다.

 

// src/fbase.js

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APPID,
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
export const auth = getAuth(app);

 

파일 이름은 마음대로 설정하면 된다. (여기서는 fbase.js) getAuth와 export const auth~는 auth와 관련된 코드, getStorage와 const storage~는 storage와 관련된 코드이다.

 

 

2. 프로필 업데이트 창을 생성하려고 하는 js 파일로 와서 firebase를 import 해주기

 

// src/UserPage.js

import { getAuth, updateProfile } from "firebase/auth";
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";

 

"firebase/auth"에서는 프로필 업데이트 기능, "firebase/storage"에서는 사진 업로드 기능을 가져와준다.

 

 

3. 사진 업로드 함수 만들기

 

// 변수 생성

const fileInputRef = useRef();

 

 

// 함수 생성

const handleUserPhotoUpdate = async (event) => {
    event.preventDefault();
    let image = fileInputRef.current.files[0];
    const auth = getAuth();
    const storage = getStorage();
    const storageRef = ref(storage, `profileImages/${image.name}`);
    const metadata = {
      contentType: "image/jpeg",
    };
    await uploadBytes(storageRef, image, metadata);
    await getDownloadURL(storageRef).then((url) => {
      updateProfile(auth.currentUser, {
        photoURL: url,
      });
    });
};

 

- `profileImages/${image.name}`의 profileImages : Firebase Storage에 생성될 폴더의 이름

- `profileImages/${image.name}`의 ${image.name} : 파일의 이름

- contentType : 저장될 파일의 형식

 

 

4. html 작성

 

<>
 <form >
   <input
	  type="file"
	  accept="image/*"
	  ref={fileInputRef}
	  onChange={handleUserPhotoUpdate}
   />
 </form>
</>

 

이렇게 작성해주면 완성! 인데 혹시 input의 디자인을 바꾸고 싶다면

 

<>
 <form >
    <label htmlFor="input-file">
    	사진 변경
    </label>
    <input
	  type="file"
	  accept="image/*"
	  ref={fileInputRef}
	  onChange={handleUserPhotoUpdate}
      id="input-file"
    />
 </form>
</>

 

이렇게 input 위에다 label 태그를 넣어준다. input에는 id를 추가하고, label에는 htmlFor="아이디"로 작성해주면 input은 숨겨지고 label만 보이게 된다. label에다 디자인을 넣어주면 된다. 그럼 사진 업데이트 기능 끝!

 

---

 

참고 자료

https://firebase.google.com/docs/storage/web/start?hl=ko