Firebase 베스트 프랙티스 완벽 가이드

Firebase를 효율적이고 안전하게 사용하기 위한 핵심 베스트 프랙티스를 소개합니다. 보안 규칙, 데이터 구조 설계, 성능 최적화 등 실무에서 꼭 필요한 내용을 다룹니다.

---

---

들어가며

이 글에서는 Firebase 베스트 프랙티스 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Security_Rules_기본_원칙
2. 데이터_구조_플랫_설계
3. 배치_작업_활용
4. 실시간_리스너_정리
5. 페이지네이션_구현
6. 인덱스_최적화
7. 환경변수_보안_관리
8. Cloud_Functions_최적화
9. 낙관적_업데이트_패턴
10. 쿼리_캐싱_전략
11. 인증_상태_관리
12. 비용_최적화_팁

---

1. Security Rules 기본 원칙

개요

Firebase의 보안 규칙은 기본적으로 모든 접근을 거부하고, 필요한 부분만 허용하는 화이트리스트 방식을 사용해야 합니다.

코드 예제

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth != null
                         && request.auth.uid == userId;
    }
  }
}

설명

인증된 사용자만 자신의 문서에 접근할 수 있도록 제한합니다. request.auth를 통해 사용자 인증 상태를 확인하고, uid 매칭으로 본인 데이터만 접근 가능하게 합니다.

---

2. 데이터 구조 플랫 설계

개요

Firestore는 중첩된 컬렉션보다 플랫한 구조를 권장합니다. 깊은 중첩은 쿼리 성능을 저하시킵니다.

코드 예제

// Good: 플랫한 구조
const userRef = db.collection('users').doc(userId);
const postsRef = db.collection('posts')
  .where('authorId', '==', userId);

// Bad: 깊은 중첩
// db.collection('users').doc(userId).collection('posts')

설명

플랫한 구조는 여러 사용자의 게시물을 한 번에 쿼리할 수 있어 유연성이 높습니다. 중첩 구조는 특정 사용자의 데이터만 조회할 때 제한적입니다.

---

3. 배치 작업 활용

개요

여러 문서를 동시에 수정할 때는 batch를 사용하여 원자성을 보장하고 네트워크 비용을 절감합니다.

코드 예제

const batch = db.batch();

const userRef = db.collection('users').doc(userId);
batch.update(userRef, { posts: increment(1) });

const postRef = db.collection('posts').doc();
batch.set(postRef, { title, content, authorId: userId });

await batch.commit();

설명

batch.commit()은 모든 작업이 성공하거나 모두 실패하는 트랜잭션을 보장합니다. 최대 500개의 작업을 하나의 배치에 포함할 수 있습니다.

---

4. 실시간 리스너 정리

개요

Firestore의 실시간 리스너는 반드시 컴포넌트 언마운트 시 정리해야 메모리 누수를 방지합니다.

코드 예제

useEffect(() => {
  const unsubscribe = db.collection('posts')
    .onSnapshot(snapshot => {
      const data = snapshot.docs.map(doc => doc.data());
      setPosts(data);
    });

  return () => unsubscribe();
}, []);

설명

onSnapshot은 구독 해제 함수를 반환합니다. useEffect의 cleanup 함수에서 이를 호출하여 리스너를 제거하고 불필요한 네트워크 요청을 방지합니다.

---

5. 페이지네이션 구현

개요

대량의 데이터를 조회할 때는 limit과 startAfter를 사용한 커서 기반 페이지네이션을 구현합니다.

코드 예제

const pageSize = 10;
let lastDoc = null;

const getNextPage = async () => {
  let query = db.collection('posts')
    .orderBy('createdAt', 'desc')
    .limit(pageSize);

  if (lastDoc) query = query.startAfter(lastDoc);

  const snapshot = await query.get();
  lastDoc = snapshot.docs[snapshot.docs.length - 1];
  return snapshot.docs.map(doc => doc.data());
};

설명

startAfter를 사용하면 이전 페이지의 마지막 문서 이후부터 조회하여 효율적인 페이지네이션을 구현합니다. offset 방식보다 성능이 우수합니다.

---

6. 인덱스 최적화

개요

복합 쿼리를 사용할 때는 Firebase 콘솔에서 복합 인덱스를 생성하여 쿼리 성능을 향상시킵니다.

코드 예제

// 복합 쿼리 예제
const query = db.collection('posts')
  .where('status', '==', 'published')
  .where('category', '==', 'tech')
  .orderBy('createdAt', 'desc')
  .limit(20);

const snapshot = await query.get();

설명

두 개 이상의 필드를 조건으로 사용하거나 where와 orderBy를 함께 사용하면 복합 인덱스가 필요합니다. 첫 실행 시 Firebase가 인덱스 생성 링크를 제공합니다.

---

7. 환경변수 보안 관리

개요

API 키와 같은 민감한 정보는 환경변수로 관리하고, 프론트엔드에서는 보안 규칙으로 보호합니다.

코드 예제

// .env.local
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,
};

const app = initializeApp(firebaseConfig);

설명

Firebase API 키는 공개되어도 보안 규칙으로 보호되지만, 환경변수로 관리하면 프로젝트 전환이 쉽고 관리가 편리합니다. 절대 서버 전용 키는 클라이언트에 노출하지 않습니다.

---

8. Cloud Functions 최적화

개요

Cloud Functions는 콜드 스타트를 최소화하기 위해 전역 변수로 연결을 재사용하고, 적절한 메모리를 할당합니다.

코드 예제

const admin = require('firebase-admin');
admin.initializeApp(); // 전역에서 초기화

exports.updateUser = functions
  .runWith({ memory: '256MB', timeoutSeconds: 60 })
  .https.onCall(async (data, context) => {
    const { userId, updates } = data;
    return admin.firestore()
      .collection('users').doc(userId).update(updates);
  });

설명

admin.initializeApp()을 전역에서 호출하면 함수 재사용 시 연결을 재활용합니다. runWith으로 메모리와 타임아웃을 설정하여 비용을 최적화합니다.

---

9. 낙관적 업데이트 패턴

개요

사용자 경험 향상을 위해 서버 응답 전에 UI를 먼저 업데이트하고, 실패 시 롤백합니다.

코드 예제

const likePost = async (postId) => {
  const optimisticPosts = posts.map(p =>
    p.id === postId ? {...p, likes: p.likes + 1} : p
  );
  setPosts(optimisticPosts);

  try {
    await db.collection('posts').doc(postId)
      .update({ likes: increment(1) });
  } catch (error) {
    setPosts(posts); // 롤백
  }
};

설명

UI를 즉시 업데이트하여 반응성을 높이고, 실제 데이터베이스 작업은 백그라운드에서 처리합니다. 실패 시 원래 상태로 복구합니다.

---

10. 쿼리 캐싱 전략

개요

enablePersistence를 활성화하여 오프라인 상태에서도 캐시된 데이터를 사용할 수 있게 합니다.

코드 예제

import { enableIndexedDbPersistence } from 'firebase/firestore';

const db = getFirestore(app);

enableIndexedDbPersistence(db)
  .catch((err) => {
    if (err.code === 'failed-precondition') {
      console.log('Multiple tabs open');
    } else if (err.code === 'unimplemented') {
      console.log('Browser not supported');
    }
  });

설명

IndexedDB를 사용해 로컬에 데이터를 캐싱하여 오프라인 지원과 빠른 초기 로딩을 제공합니다. 단, 여러 탭에서는 하나만 활성화됩니다.

---

11. 인증 상태 관리

개요

onAuthStateChanged를 사용하여 인증 상태를 전역으로 관리하고, 보호된 라우트를 구현합니다.

코드 예제

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      setUser({ uid: user.uid, email: user.email });
    } else {
      setUser(null);
      router.push('/login');
    }
  });

  return () => unsubscribe();
}, []);

설명

onAuthStateChanged는 인증 상태 변화를 실시간으로 감지합니다. 새로고침 시에도 토큰을 자동으로 확인하여 로그인 상태를 유지합니다.

---

12. 비용 최적화 팁

개요

불필요한 읽기/쓰기를 줄이고, 적절한 캐싱과 쿼리 최적화로 Firebase 비용을 절감합니다.

코드 예제

// Good: 필요한 필드만 조회
const users = await db.collection('users')
  .select('name', 'email')
  .get();

// Good: 조건부 쿼리로 읽기 최소화
if (lastFetchTime < Date.now() - 300000) {
  const posts = await fetchPosts();
  setLastFetchTime(Date.now());
}

설명

select()로 필요한 필드만 가져오고, 캐싱 전략으로 중복 요청을 방지합니다. 실시간 리스너는 신중히 사용하고, 불필요한 구독은 즉시 해제합니다.

---

마치며

이번 글에서는 Firebase 베스트 프랙티스 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Firebase #SecurityRules #Firestore #RealtimeDatabase #Authentication