프로젝트 설정과 초기화

Firebase를 사용하려면 먼저 콘솔에서 프로젝트를 만들고, 웹 앱을 등록해 설정 값을 받아와야 합니다. 그다음 SDK를 설치하고 initializeApp으로 앱을 초기화하면 인증, 데이터베이스 같은 기능을 호출할 준비가 끝납니다. 이번 강의에서는 그 전체 흐름을 따라가 봅니다.

학습 목표

• Firebase 콘솔에서 프로젝트와 웹 앱을 생성한다.
• 모듈러 SDK를 설치하고 initializeApp으로 초기화한다.
• 환경 변수로 설정 값을 안전하게 관리한다.
• 공개되어도 되는 값과 숨겨야 하는 값을 구분한다.

콘솔에서 프로젝트 생성

Firebase 콘솔에 접속해 "프로젝트 추가"를 누르고 이름을 입력하면 새 프로젝트가 만들어집니다. 생성 후 좌측 메뉴에서 톱니바퀴 → "프로젝트 설정"으로 이동하면 웹 앱을 등록할 수 있습니다.

웹 아이콘(</>)을 클릭하고 앱 닉네임을 입력하면, 아래와 같은 설정 객체(firebaseConfig)를 발급받습니다.

SDK 설치

npm으로 Firebase SDK를 설치합니다. v9 이상부터는 필요한 기능만 골라 가져오는 모듈러 방식을 사용합니다.

npm install firebase

initializeApp으로 초기화

발급받은 설정 값으로 앱을 초기화합니다. 보통 lib/firebase.ts 같은 파일에 한 번만 작성하고, 다른 곳에서는 이 모듈을 가져다 씁니다.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

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,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

환경 변수 관리

설정 값을 코드에 직접 박아두기보다 환경 변수로 관리하는 것이 좋습니다. Next.js에서는 .env.local 파일을 사용하고, 클라이언트에서 접근하려면 NEXT_PUBLIC_ 접두사를 붙입니다.

# .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=my-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=my-app
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=my-app.appspot.com
NEXT_PUBLIC_FIREBASE_SENDER_ID=1234567890
NEXT_PUBLIC_FIREBASE_APP_ID=1:1234567890:web:abcdef

💡 TIP — firebaseConfig의 apiKey는 비밀 키가 아니라 프로젝트를 식별하는 공개 값입니다. 노출되어도 큰 문제는 없지만, 실제 보안은 다음 강의에서 다룰 보안 규칙으로 지켜야 합니다.

값	공개 여부	설명
apiKey	공개 가능	프로젝트 식별용 키
projectId	공개 가능	프로젝트 ID
서비스 계정 키	비공개	서버용, 절대 노출 금지

⚠️ 주의 — 서버 측에서 쓰는 서비스 계정 키(JSON)는 firebaseConfig와 전혀 다릅니다. 이 키는 절대 클라이언트 코드나 Git 저장소에 올리면 안 됩니다.

요약

• Firebase 콘솔에서 프로젝트를 만들고 웹 앱을 등록해 설정 값을 받습니다.
• npm install firebase로 모듈러 SDK를 설치합니다.
• initializeApp(firebaseConfig)로 앱을 한 번 초기화하고 재사용합니다.
• 설정은 환경 변수로 관리하며, NEXT_PUBLIC_ 접두사로 클라이언트에 노출합니다.
• apiKey는 공개 가능하지만 서비스 계정 키는 절대 노출하면 안 됩니다.

연습문제

1. 모듈러 SDK에서 getAuth와 getFirestore는 각각 무엇을 반환하나요?
2. Next.js에서 클라이언트가 접근할 환경 변수에 붙여야 하는 접두사는 무엇인가요?
3. firebaseConfig의 apiKey가 노출되어도 비교적 안전한 이유는 무엇인가요?
4. initializeApp을 여러 파일에서 여러 번 호출하면 어떤 문제가 생길 수 있을까요?

힌트 — 초기화는 앱 전체에서 한 번만 일어나야 한다는 점을 떠올려 보세요.