Firebase 완벽 가이드 | Authentication·Firestore

이 글의 핵심

Firebase로 풀스택 앱을 구축하는 완벽 가이드입니다. Authentication, Firestore, Storage, Cloud Functions, Hosting, Analytics까지 실전 예제로 정리했습니다.

실무 경험 공유: 스타트업 MVP를 Firebase로 구축하면서, 백엔드 개발 없이 2주 만에 출시하고 초기 인프라 비용을 제로로 만든 경험을 공유합니다.

들어가며: “백엔드 개발이 부담돼요”

실무 문제 시나리오

시나리오 1: 인증 구현이 복잡해요

JWT, 세션, OAuth를 직접 구현해야 합니다. Firebase는 내장되어 있습니다. 시나리오 2: 데이터베이스 설정이 번거로워요

PostgreSQL 설치, 스키마 설계가 필요합니다. Firestore는 즉시 사용 가능합니다. 시나리오 3: 파일 업로드 서버가 필요해요

S3 설정이 복잡합니다. Firebase Storage는 간단합니다.

1. Firebase란?

핵심 특징

Firebase는 Google의 백엔드 서비스 플랫폼입니다. 주요 서비스:

• Authentication: 인증
• Firestore: NoSQL 데이터베이스
• Storage: 파일 저장소
• Cloud Functions: 서버리스 함수
• Hosting: 정적 호스팅
• Analytics: 사용자 분석 가격:
• Spark (무료): 50K reads/day
• Blaze (종량제): $0.06 / 100K reads

---

2. 프로젝트 설정

Firebase 프로젝트 생성

1. https://console.firebase.google.com/
2. “프로젝트 추가” 클릭
3. 프로젝트 이름 입력

SDK 설치

npm install firebase

초기화

// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

---

3. Authentication

이메일/비밀번호

import { auth } from './lib/firebase';
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from 'firebase/auth';
// 회원가입
async function signUp(email: string, password: string) {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  return userCredential.user;
}
// 로그인
async function signIn(email: string, password: string) {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  return userCredential.user;
}
// 로그아웃
async function logout() {
  await signOut(auth);
}
// 인증 상태 감지
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('Logged in:', user.email);
  } else {
    console.log('Logged out');
  }
});

Google 로그인

import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
const provider = new GoogleAuthProvider();
async function signInWithGoogle() {
  const result = await signInWithPopup(auth, provider);
  return result.user;
}

---

4. Firestore

데이터 추가

import { db } from './lib/firebase';
import { collection, addDoc, doc, setDoc } from 'firebase/firestore';
// 자동 ID
const docRef = await addDoc(collection(db, 'users'), {
  name: 'John',
  email: '[email protected]',
  createdAt: new Date(),
});
// 커스텀 ID
await setDoc(doc(db, 'users', 'user123'), {
  name: 'John',
  email: '[email protected]',
});

데이터 조회

import { collection, getDocs, doc, getDoc, query, where, orderBy, limit } from 'firebase/firestore';
// 전체 조회
const querySnapshot = await getDocs(collection(db, 'users'));
querySnapshot.forEach((doc) => {
  console.log(doc.id, doc.data());
});
// 단일 조회
const docSnap = await getDoc(doc(db, 'users', 'user123'));
if (docSnap.exists()) {
  console.log(docSnap.data());
}
// 쿼리
const q = query(
  collection(db, 'posts'),
  where('published', '==', true),
  orderBy('createdAt', 'desc'),
  limit(10)
);
const snapshot = await getDocs(q);

실시간 리스너

import { onSnapshot } from 'firebase/firestore';
const unsubscribe = onSnapshot(collection(db, 'posts'), (snapshot) => {
  const posts = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));
  console.log('Posts:', posts);
});
// 구독 해제
unsubscribe();

---

5. Storage

파일 업로드

import { storage } from './lib/firebase';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
async function uploadFile(file: File) {
  const storageRef = ref(storage, `uploads/${Date.now()}-${file.name}`);
  
  const snapshot = await uploadBytes(storageRef, file);
  const downloadURL = await getDownloadURL(snapshot.ref);
  
  return downloadURL;
}

React 예제

import { useState } from 'react';
function FileUpload() {
  const [url, setUrl] = useState(');
  const [uploading, setUploading] = useState(false);
  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    const downloadURL = await uploadFile(file);
    setUrl(downloadURL);
    setUploading(false);
  };
  return (
    <div>
      <input type="file" onChange={handleUpload} disabled={uploading} />
      {uploading && <p>Uploading...</p>}
      {url && <img src={url} alt="Uploaded" />}
    </div>
  );
}

---

6. Cloud Functions

설치

npm install -g firebase-tools
firebase login
firebase init functions

함수 작성

// functions/src/index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();
// HTTP 함수
export const helloWorld = functions.https.onRequest((request, response) => {
  response.json({ message: 'Hello from Firebase!' });
});
// Firestore 트리거
export const onUserCreate = functions.firestore
  .document('users/{userId}')
  .onCreate(async (snap, context) => {
    const user = snap.data();
    console.log('New user:', user);
    // 환영 이메일 전송 등
    await admin.firestore().collection('emails').add({
      to: user.email,
      subject: 'Welcome!',
      body: 'Thanks for signing up!',
    });
  });
// 스케줄 함수
export const dailyCleanup = functions.pubsub
  .schedule('0 0 * * *')  // 매일 자정
  .onRun(async (context) => {
    console.log('Running daily cleanup');
    // 정리 작업
  });

배포

firebase deploy --only functions

---

7. Hosting

배포

# 초기화
firebase init hosting
# 빌드
npm run build
# 배포
firebase deploy --only hosting

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|webp)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }
}

---

8. Security Rules

Firestore Rules

// firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 공개 읽기, 인증된 사용자만 쓰기
    match /posts/{postId} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    // 본인 데이터만 접근
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Storage Rules

// storage.rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/{fileName} {
      allow read: if true;
      allow write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

취업·면접과 연결하기

Firestore 규칙·Auth·Functions는 BaaS·보안 질문으로 잘 이어집니다. 기술 면접 완벽 대비 가이드와, 이력서에 서비스 규모·기능을 쓰는 법은 개발자 이력서·서류·면접 가이드를 보세요.

정리 및 체크리스트

핵심 요약

• Firebase: Google의 BaaS 플랫폼
• Authentication: 간편한 인증
• Firestore: 실시간 NoSQL DB
• Storage: 파일 저장소
• Cloud Functions: 서버리스
• Hosting: 정적 호스팅

구현 체크리스트

• Firebase 프로젝트 생성
• Authentication 구현
• Firestore CRUD 구현
• Storage 파일 업로드
• Cloud Functions 작성
• Security Rules 설정
• Hosting 배포

---

같이 보면 좋은 글

• Supabase 완벽 가이드
• AWS Lambda 완벽 가이드
• React 18 심화 가이드

---

이 글에서 다루는 키워드

Firebase, BaaS, Authentication, Firestore, Cloud Functions, Google Cloud

내부 동작과 핵심 메커니즘

이 글의 주제는 「Firebase 완벽 가이드 | Authentication·Firestore·Storage·Functions·Hosting」입니다. 앞선 튜토리얼을 구현·런타임 관점에서 다시 압축합니다. 시스템·런타임 경계(스케줄링, I/O, 메모리, 동시성)를 기준으로 “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)·동시성이 어디서 터지는가”를 한 장면으로 그리면 장애 분석이 빨라집니다.

처리 파이프라인(개념도)

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

경계에서의 지연·실패(시퀀스 관점)

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(프로세스·런타임·게이트웨이)
  participant D as 의존성(외부 API·DB·큐)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

알고리즘·프로토콜·리소스 관점 체크포인트

• 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(버퍼 경계, 프로토콜 상태, 트랜잭션 격리, 파일 디스크립터 상한)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
• 결정성: 동일 입력에 동일 출력이 보장되는 순수 층과, 시간·네트워크·스레드 스케줄에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
• 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합, GC·할당, 캐시 미스처럼 누적 비용을 의심 목록에 넣습니다.
• 백프레셔: 생산자가 소비자보다 빠를 때(소켓 버퍼, 큐 깊이, 스트림) 어디서 어떤 신호로 속도를 줄일지 정의합니다.

---

프로덕션 운영 패턴

실서비스에서는 기능과 함께 관측·배포·보안·비용·규제가 동시에 요구됩니다.

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율/지연 분위수(p95/p99), 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시 계층·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션 호환성·플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·파일 디스크립터·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 가능한 한 프로덕션에 가깝게 맞추는 것이 재현율을 높입니다.

---

확장 예시: 엔드투엔드 미니 시나리오

「Firebase 완벽 가이드 | Authentication·Firestore·Storage·Functions·Hosting」을 실제 배포·운영 흐름으로 옮긴 체크리스트형 시나리오입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드 표를 API 또는 이벤트 경계에 둔다.
2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 한 화면(로그+메트릭+트레이스)에서 추적한다.
3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지(또는 피처 플래그) 확인한다.
5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값이 기대 범위인지 본다.

의사코드 스케치(프레임워크 무관)

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)        // 경계에서 거절
  authorize(validated, ctx)                  // 권한·테넌트
  result = domainCore(validated)             // 순수에 가까운 규칙
  persistOrEmit(result, idempotentKey)       // I/O: 멱등·재시도 정책
  recordMetrics(ctx, latency, outcome)
  return result

---

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성 불안정, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정이 로컬과 다름	프로필·시크릿·기본값, 지역 리전	단일 소스(예: 스키마 검증된 설정)와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

자주 묻는 질문 (FAQ)

Q. Firebase vs Supabase, 어떤 게 나은가요?

A. Firebase는 더 성숙하고 기능이 많습니다. Supabase는 오픈소스이고 PostgreSQL을 사용합니다. 빠른 개발은 Firebase, SQL이 필요하면 Supabase를 권장합니다.

Q. 비용이 얼마나 나오나요?

A. 무료 플랜으로 시작 가능합니다. 트래픽이 늘면 종량제로 전환하세요. 대부분의 스타트업은 월 $25 미만입니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Duolingo, The New York Times 등 많은 앱이 Firebase를 사용합니다.

Q. 오프라인 지원이 되나요?

A. 네, Firestore는 오프라인 캐싱을 지원합니다.