Firebase 실무 로드맵: Auth, Firestore, Storage, Functions

학습 목표와 사전 지식

목표: Firebase 프로젝트 생성부터 웹 앱 등록, SDK 설치, 환경변수 연결, 초기화까지 먼저 완료한 뒤 Auth·Firestore·Storage·Functions를 순서대로 학습합니다.
사전 지식: JavaScript async, HTTP 요청, 웹 앱 개발 기초, Node.js와 npm 기본 사용법

Firebase는 로그인·DB·파일·서버 코드를 연결하는 제품군입니다. 처음부터 개별 기능을 외우기보다 먼저 개발 환경을 실제 Firebase 프로젝트와 연결해야 이후 Auth나 Firestore 예제를 그대로 따라갈 수 있습니다. 이 과정에서는 기존 Next.js 프로젝트를 실습 기준으로 사용합니다.

Firebase 시작 환경 준비

처음 Firebase를 공부한다면 아래 순서부터 완료합니다. 아직 Auth나 Firestore 코드를 작성하지 않아도 됩니다. 이 단계의 목표는 프로젝트 생성 → 웹 앱 등록 → SDK 설치 → 환경변수 설정 → Firebase App 초기화 → 개발 서버 실행 확인입니다.

0. Node.js와 npm 확인

기존 Next.js 프로젝트가 실행되는 상태에서 터미널을 열고 Node.js와 npm이 설치되어 있는지 확인합니다.

node -v
npm -v

두 명령어에서 버전이 출력되면 다음 단계로 이동합니다. Next.js 프로젝트 자체가 없다면 먼저 Next.js 실행 환경을 준비한 뒤 Firebase를 연결하는 편이 학습 흐름을 이해하기 쉽습니다.

1. Firebase 프로젝트와 웹 앱 등록

Firebase Console에서 새 프로젝트를 만든 뒤 프로젝트 개요에서 웹 아이콘을 선택해 웹 앱을 등록합니다. 앱 등록을 마치면 apiKey, authDomain, projectId 등이 들어 있는 웹 설정 객체를 확인할 수 있습니다. 이 값은 현재 프런트엔드 앱이 어떤 Firebase 프로젝트를 사용할지 식별하는 설정입니다.

1. Firebase Console에서 새 프로젝트를 생성합니다.
2. 프로젝트 개요에서 웹 앱을 추가합니다.
3. 앱 이름을 입력하고 등록합니다.
4. 표시되는 Firebase 웹 설정 값을 확인합니다.

2. Firebase SDK 설치

Next.js 프로젝트 루트에서 Firebase JavaScript SDK를 설치합니다.

npm install firebase

Firebase 웹 SDK는 서비스별 모듈을 필요한 곳에서 가져오는 방식으로 사용합니다. 이후 Auth는 firebase/auth, Firestore는 firebase/firestore, Storage는 firebase/storage에서 가져옵니다.

3. 환경변수 연결

프로젝트 루트의 .env.local에 Firebase 웹 설정을 연결합니다. 아래 값은 예시 이름만 보여주는 것이므로 실제 값은 Firebase Console의 웹 앱 설정에서 확인해 넣습니다.

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

NEXT_PUBLIC_ 변수는 브라우저 번들에 포함될 수 있습니다. Firebase 웹 설정값 자체를 서버 비밀키처럼 취급하는 것과 권한 보안을 혼동하지 않습니다. 실제 데이터 접근 권한은 Authentication과 Security Rules로 제어해야 하며, 서비스 계정 private key 같은 서버 비밀값은 공개 환경변수에 넣으면 안 됩니다.

4. Firebase App 초기화

초기 학습 단계에서는 Firebase App을 한 번 만들고 재사용하는 구조만 먼저 잡습니다. 예를 들어 src/shared/libs/firebase/firebase.ts처럼 Firebase 설정을 한 파일에 모을 수 있습니다.

import { getApp, getApps, initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
};

export const firebaseApp = getApps().length
  ? getApp()
  : initializeApp(firebaseConfig);

여기서는 Firebase App 생성까지만 확인합니다. Auth·Firestore·Storage 인스턴스와 Client/Server 경계를 함께 설계하는 방법은 다음 글인 Firebase 초기화 구조: Next.js firebase.ts 설계 기준에서 이어서 다룹니다.

5. 개발 서버 실행 확인

환경변수를 저장한 뒤 개발 서버를 다시 실행합니다.

npm run dev

페이지가 정상적으로 열리고 Firebase 설정 누락이나 초기화 오류가 발생하지 않는지 확인합니다. 이 단계가 끝나면 Firebase 학습을 시작할 기본 환경은 준비된 것입니다. 다만 초기화 성공은 로그인·DB 읽기·Storage 쓰기 권한까지 성공했다는 뜻은 아닙니다. 실제 서비스 요청은 다음 단계에서 각각 검증합니다.

서비스 학습 순서

환경 준비가 끝났다면 이제 기능 개수보다 “누가 어떤 경로에 무엇을 할 수 있는가”를 기준으로 학습합니다. 아래 순서는 앞 단계의 결과를 다음 단계가 그대로 사용하도록 구성합니다.

순서	학습할 계약	완료를 확인할 증거
1. 초기화	프로젝트·웹 설정·client/server 경계	누락 설정 오류, 정확한 프로젝트
2. Auth	로그인 관찰·지속성·로그아웃	새로고침·로그아웃 상태
3. Rules	소유자·허용 작업·입력 형식	A 허용, B와 비로그인 거부
4. Firestore	문서 ID·CRUD·목록 조건	생성→읽기→수정→삭제
5. Context	인증 준비·화면 표시	첫 로딩·계정 전환·실패 UI
6. Storage	객체 경로·DB 연결·정리	업로드 성공과 실패 복구
7. Claims/Functions	서버 역할·재시도·Secret	일반 사용자 거부·중복 처리
8. 배포·관찰	대상 환경·규칙·인덱스	실제 개발 서버의 요청 결과

메모 앱 한 경로로 연습하기

users는 인증 계정, notes/{id}는 메모, ownerId는 작성자의 UID로 구분합니다. A가 메모를 만들고 B가 A의 문서 ID를 알아도 거부되어야 합니다. Auth는 A가 누구인지 확인하고 Rules는 A가 할 수 있는 일을 결정합니다. auth.currentUser가 있는지 UI에서 확인하는 것만으로 데이터 접근 제어가 끝나지 않습니다.

데이터와 파일을 나누는 이유

Firestore에는 제목·소유자·Storage 객체 경로 같은 구조화된 필드를, Storage에는 실제 이미지 바이트를 둡니다. Storage 업로드와 Firestore 저장을 하나의 원자적 트랜잭션으로 묶을 수 없으므로 실패 복구가 필요합니다. 파일을 DB에 base64로 넣는 방식을 기본으로 시작하지 마세요. 목록 크기·파일 크기·읽기 빈도도 설계 기준입니다.

Functions를 추가할 시점

관리자 Secret을 쓰거나 여러 사용자의 데이터를 신뢰 경계 안에서 갱신해야 할 때 서버 코드가 필요합니다. 모든 조회를 Functions로 감싸야 하는 것은 아닙니다. 클라이언트 SDK와 Rules로 충분한 일은 그대로 두고, 서버가 필요한 작업에는 인증·권한·입력 검증과 중복 이벤트 처리를 넣습니다.

Emulator와 실제 개발 환경을 둘 다 사용하는 이유

Emulator는 데이터와 Rules를 반복 시험하기 좋습니다. 실제 Firebase에는 인증 제공자 설정, 승인 도메인, 리전, 인덱스, 비용과 배포 권한이 추가됩니다. 에뮬레이터 통과를 곧 운영 통과로 쓰지 않습니다. Hosting의 정적 파일 배포와 SSR 서버 실행도 구분합니다. Next.js 서버 기능이 필요한 경우 배포 방식의 지원 범위를 먼저 확인하세요.

학습을 마칠 때 남길 기록

테스트 계정 A·B·비로그인의 작업 표, 사용한 경로와 쿼리, 실패 코드, 수정한 파일·설정, 실제 실행 여부를 기록합니다. 진행이 막히면 오류 허브에서 제품별 진단으로 이동하고, 과정을 다시 읽을 때는 아래 학습 순서를 유지하세요. 특정 요금이나 할당량은 예산에 직접 영향을 주므로 해당 프로젝트 Console과 공식 가격표에서 확인합니다.

직접 확인할 결과

Firebase Console 프로젝트·웹 앱 등록 흐름 확인
npm SDK 설치·환경변수·초기화 코드 확인
18개 실제 과정 링크 연결
제품 책임·완료 증거 대응 확인
실제 사용자 Firebase 프로젝트 생성·클라우드 요청 미실행

검증 범위와 기준일

공식 문서 확인일: 2026-09-16. 웹 SDK 예제는 모듈형 API 기준입니다. Firebase 공식 웹 설정 문서의 프로젝트 생성·웹 앱 등록·npm 설치·initializeApp 흐름과 대조했습니다. 이 글의 코드·구조 정적 검토와 실제 클라우드 인증·저장·배포 검증은 구분합니다. 본인 개발 Firebase 프로젝트의 실제 인증·권한·배포 요청은 이 편집 환경에서 실행하지 않았습니다.

이어서 학습하기

• Firebase 초기화 구조: Next.js firebase.ts 설계 기준
• Firebase Authentication 사용 기준: 로그인 유지와 비밀번호 재설정
• Firebase 보안 규칙 설계: Firestore와 Storage 권한 관리하기
• Firestore CRUD 사용법: 컬렉션 구조와 읽기 쓰기 흐름
• Firebase Auth Context 설계: 로그인 권한과 라우팅 관리하기
• Firebase Storage 이미지 업로드 사용법: 상품 이미지 관리 흐름 만들기
• Firebase Custom Claims 사용법: 관리자 권한 구분하기
• Firebase Functions v2 사용법: 트리거 배포 Secret 처리
• Firestore seed data 설계: 리뷰 더미 데이터 구조 잡기
• Firebase 배포 제외 파일 설정: firebase.json의 ignore 사용법
• Firebase Firestore 인덱스 삭제 질문 해결: 배포 중 안전하게 판단하기
• Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인
• Firebase permission-denied 오류 해결: Firestore Rules 체크리스트
• Firebase Storage 이미지 오류 해결: 403·404·token·Rules 확인법
• Firebase CORS 오류 해결: Storage 이미지 업로드가 막힐 때 확인할 설정
• Firebase 실무 오류 해결 모음: Storage, Firestore, Auth 체크리스트
• Firestore undefined 오류 해결: 선택 필드가 저장을 막을 때

공식 문서

• https://firebase.google.com/docs/web/setup
• https://firebase.google.com/docs/emulator-suite/connect_and_prototype
• https://firebase.google.com/docs/firestore/security/rules-query
• https://firebase.google.com/docs/functions/firestore-events