Storage

Cloud Storage는 이미지, 동영상, 문서 같은 파일을 저장하는 공간입니다. 업로드한 파일은 다운로드 URL을 통해 어디서든 접근할 수 있어, 프로필 사진이나 게시글 첨부 이미지를 다루기에 적합합니다. 이번 강의에서는 업로드부터 URL 발급까지의 흐름을 살펴봅니다.

학습 목표

• Storage 참조(ref)와 폴더 구조 개념을 이해한다.
• uploadBytes로 파일을 업로드한다.
• getDownloadURL로 접근 가능한 URL을 받는다.
• 이미지 업로드의 전체 흐름을 구현한다.

참조와 폴더 구조

파일이 저장될 경로를 ref로 지정합니다. 경로에 슬래시를 넣으면 폴더처럼 구조화됩니다. 사용자별로 폴더를 나누면 관리와 보안이 쉬워집니다.

import { getStorage, ref } from 'firebase/storage';
import { app } from '@/lib/firebase';

const storage = getStorage(app);

// users/{uid}/avatar.png 경로
const avatarRef = ref(storage, `users/${uid}/avatar.png`);

uploadBytes로 업로드

파일(Blob 또는 File 객체)을 uploadBytes로 업로드합니다. 업로드가 끝나면 메타데이터가 담긴 결과를 반환합니다.

import { ref, uploadBytes } from 'firebase/storage';

async function uploadAvatar(uid: string, file: File) {
  const fileRef = ref(storage, `users/${uid}/avatar.png`);
  const result = await uploadBytes(fileRef, file);
  console.log('업로드 완료:', result.metadata.fullPath);
  return fileRef;
}

getDownloadURL로 URL 발급

업로드한 파일을 화면에 보여주려면 다운로드 URL이 필요합니다. getDownloadURL로 받아 img 태그의 src 등에 사용합니다.

import { getDownloadURL } from 'firebase/storage';

const url = await getDownloadURL(fileRef);
// <img src={url} />

이미지 업로드 전체 흐름

업로드 → URL 발급 → Firestore에 URL 저장으로 이어지는 것이 일반적인 패턴입니다.

import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { doc, updateDoc } from 'firebase/firestore';
import { db } from '@/lib/firebase';

async function changeProfileImage(uid: string, file: File) {
  const fileRef = ref(storage, `users/${uid}/avatar.png`);
  await uploadBytes(fileRef, file);
  const url = await getDownloadURL(fileRef);
  await updateDoc(doc(db, 'users', uid), { photoURL: url });
  return url;
}

💡 TIP — 진행률 표시가 필요하면 uploadBytesResumable을 쓰세요. state_changed 이벤트로 업로드 퍼센트를 받아 프로그레스 바를 그릴 수 있습니다.

⚠️ 주의 — Storage도 기본적으로 보안 규칙의 보호를 받습니다. 규칙을 열어두면 누구나 파일을 올리고 받을 수 있으니, 다음 강의에서 다룰 규칙으로 사용자별 접근을 제한해야 합니다.

함수	역할
ref	저장 경로 참조 생성
uploadBytes	파일 업로드
getDownloadURL	접근 URL 발급
deleteObject	파일 삭제

요약

• ref로 저장 경로를 지정하며, 슬래시로 폴더 구조를 만듭니다.
• uploadBytes로 File/Blob을 업로드합니다.
• getDownloadURL로 화면에서 쓸 수 있는 접근 URL을 받습니다.
• 보통 업로드 후 URL을 Firestore에 저장해 함께 관리합니다.
• 진행률은 uploadBytesResumable, 접근 제어는 보안 규칙으로 처리합니다.

연습문제

1. 파일을 저장할 경로를 지정하는 함수는 무엇인가요?
2. 업로드한 이미지를 화면에 표시하려면 어떤 함수로 무엇을 받아야 하나요?
3. 사용자별로 파일을 분리해 관리하려면 경로를 어떻게 구성하면 좋을까요?
4. 업로드 진행률을 표시하려면 어떤 함수를 사용하나요?

힌트 — 단순 업로드와 재개 가능한 업로드의 차이를 떠올려 보세요.