🚀 Next.js + Firebase로 만드는 풀스택 웹앱 실전 프로젝트

🎯 목표

• Next.js(App Router) 프로젝트 생성
• Firebase Console에서 프로젝트 생성 & 서비스 켜기(Auth/Firestore/Storage)
• .env.local 환경변수 설정
• firebase.client.ts 초기화 파일 구성
• Firestore에 테스트 데이터 쓰기/읽기까지 확인

1) Next.js 프로젝트 생성

npx create-next-app@latest nextjs-firebase
# ✔ TypeScript: Yes
# ✔ ESLint: Yes
# ✔ Tailwind: No (SCSS 사용할 예정)
# ✔ App Router: Yes
# ✔ src/: 선택은 자유 (여기선 기본 루트 사용)
# ✔ import alias: Yes (@/*)
cd nextjs-firebase
npm i
npm i -D sass

※ 추후 경로를 설명할 때 최상단 src는 제외하도록 하겠습니다.

styles/globals.scss를 app/layout.tsx에 추가:

// app/layout.tsx
import './globals.scss';

2) Firebase 콘솔 설정

1. [console.firebase.google.com]에서 새 프로젝트 생성 (예: nextjs-firebase-course)
2. Authentication → Sign-in method → Email/Password 활성화(+ Google Sign-in은 3강에서)
3. Firestore → 데이터베이스 만들기 → 모드: 테스트(개발 단계) → 위치: asia-northeast3(서울)
4. Storage → 시작하기
   1. 스토리지부터는 요금 결제가 필요하므로 GCP의 Cloud Billing 계정이 연동되어야 합니다.
5. 프로젝트 설정 → 웹 앱 추가 → Firebase SDK snippet에서 apiKey 등 설정값 확인

A. 새 프로젝트 생성

B. Authentication 설정

C. Firestore 설정

Firestore Standard vs Enterprise: Technical Comparison (by ChatGPT 5)

🔍 1. Firestore Standard vs Enterprise 구조적 차이

여기서 가장 직접적인 성능 차이를 만드는 부분이 바로 "스토리지와 쿼리 엔진"입니다.

⚡ 2. 속도 차이의 원인

1. 스토리지 타입

   • 표준: 일부 데이터는 HDD(하드디스크) 기반으로 저장되어 있어, 읽기/쓰기 속도가 상대적으로 느립니다.
   • 엔터프라이즈: 전부 SSD 기반으로 운영되어, 대량의 랜덤 액세스 쿼리나 인덱스 조회 시 속도가 빠릅니다.
   • 특히 대용량 문서 집합을 대상으로 하는 복합 쿼리에서 SSD의 이점이 두드러집니다.

2. 쿼리 엔진 차이

   • Enterprise는 MongoDB 호환형 쿼리 엔진을 사용하며, 복잡한 필터링과 조인 성격의 쿼리에 최적화되어 있습니다.

   • Standard보다 인덱스 검색 및 쿼리 최적화 과정이 개선되어 있어,

     같은 쿼리라도 엔터프라이즈가 10~30% 빠르게 응답하는 사례가 있습니다.

3. 캐싱 및 복구 메커니즘

   • Enterprise는 SSD 기반 캐싱 구조를 사용하여 최근 접근한 데이터를 더 빠르게 반환합니다.
   • 대량의 실시간 업데이트(예: 실시간 대시보드, 로그 시스템)일수록 차이가 납니다.

🧪 3. 실제 체감 예시

🧭 4. 정리

✅ 결론

• 속도 차이는 분명히 존재합니다.

  특히 SSD 기반 스토리지와 고급 쿼리 엔진 덕분에 엔터프라이즈는 대규모 데이터셋 처리 시 더 빠르고 안정적입니다.

• 단, 일반적인 웹/앱 수준(수천~수만 문서)의 CRUD라면 체감 차이는 거의 없습니다.

• 하지만 대시보드, 분석, 로그, 리포팅 등 대량 쿼리 중심의 시스템이라면 Enterprise 업그레이드가 속도 향상에 확실히 도움이 됩니다.

D. Storage 설정

Cloud Billing 결제 계정 연동을 위해서 프로젝트 업그레이드를 합니다. Cloud Billing 결제 계정 생성 과정은 생략하겠습니다. 해외 결제가 가능한 카드 연동이 필요하며 실습을 위한 스토리지 비용을 연동해도 대량으로 이미지를 올리지 않는 이상 비용 결제가 거의 되지 않으니 참고 해주세요. (보안 설정도 중요합니다. 이 부분은 스토리지 부분 강의를 진행하면서 더 설명하겠습니다.)

생성한 결제 계정을 연결해서 요금제를 Spark 에서 Blaze로 변경합니다.

소액이라도 요금이 발생하면 이메일로 받을 수 있도록 예산 금액을 25원으로 설정 합니다.

좌측 하단에 변경된 요금제를 확인하고 스토리지를 시작합니다.

유료 위치의 ASIA-NORTHEAST3 (서울)를 사용하면 속도가 빠르지만 일단 무료 위치(US-CENTRAL1)를 선택합니다.

E. 웹앱 추가 및 API키 확인

웹 앱을 등록하고 나면 다음과 같이 api키를 확인할 수 있습니다.

3) 환경변수 설정

파이어베이스 설치

npm i firebase

루트에 .env.local 생성:

# Client에서 필요한 값은 반드시 NEXT_PUBLIC_ 접두사
NEXT_PUBLIC_FIREBASE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=1234567890
NEXT_PUBLIC_FIREBASE_APP_ID=1:1234567890:web:abcdefg1234567

4) Firebase 초기화 파일

lib/firebase.client.ts 생성:

import { initializeApp, getApps, getApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

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!,
  // messagingSenderId, measurementId 필요 시 추가
};

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

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

서버에서 Admin SDK를 쓸 계획이면 추후 lib/firebase.admin.ts를 추가합니다(5강 예정).

지금은 클라이언트 SDK만 사용합니다.

5) Firestore Rules (개발용)

개발 단계에서는 테스트 규칙으로 시작하고, 7강에서 프로덕션 규칙으로 강화합니다.

6) 테스트 UI: 글 추가 & 목록 보기

app/page.tsx에 간단한 폼 & 리스트(클라이언트 컴포넌트) 추가:

'use client';

import { FormEvent, useEffect, useState } from 'react';
import { db } from '@/lib/firebase.client';
import {
  collection,
  addDoc,
  serverTimestamp,
  getDocs,
  query,
  orderBy,
} from 'firebase/firestore';

type Post = {
  id: string;
  title: string;
  createdAt?: { seconds: number; nanoseconds: number } | null;
};

export default function HomePage() {
  const [title, setTitle] = useState('');
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchPosts = async () => {
    const q = query(collection(db, 'posts'), orderBy('createdAt', 'desc'));
    const snap = await getDocs(q);
    const list: Post[] = snap.docs.map((d) => ({
      id: d.id,
      ...(d.data() as any),
    }));
    setPosts(list);
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    setLoading(true);
    try {
      await addDoc(collection(db, 'posts'), {
        title: title.trim(),
        createdAt: serverTimestamp(),
      });
      setTitle('');
      await fetchPosts();
    } finally {
      setLoading(false);
    }
  };

  return (
    <main style={{ maxWidth: 720, margin: '40px auto', padding: 16 }}>
      <h1>Next.js + Firebase — Test</h1>

      <form
        onSubmit={onSubmit}
        style={{ display: 'flex', gap: 8, marginTop: 16 }}
      >
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder='제목 입력'
          style={{
            flex: 1,
            padding: 10,
            border: '1px solid #ddd',
            borderRadius: 8,
          }}
        />
        <button
          type='submit'
          disabled={loading}
          style={{ padding: '10px 16px', borderRadius: 8 }}
        >
          {loading ? '저장 중…' : '추가'}
        </button>
      </form>

      <ul style={{ marginTop: 24, display: 'grid', gap: 12 }}>
        {posts.map((p) => (
          <li
            key={p.id}
            style={{ border: '1px solid #eee', padding: 12, borderRadius: 8 }}
          >
            <strong>{p.title}</strong>
          </li>
        ))}
      </ul>
    </main>
  );
}

7) 실행 & 확인

npm run dev
# http://localhost:3000 접속 → 제목 입력 후 '추가' → Firestore에 문서 생성되는지 확인

실습 저장소

GitHub - heroyooi/nextjs-firebase at ch1_1