🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법

---

01

🔥 파이어베이스 (Firebase)란?

Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다.

 

기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다.

 

특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.

---

02

Firebase 프로젝트 생성하기

Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합니다.

 

1️⃣ Firebase 홈페이지에 접속하여 Google 계정으로 로그인합니다.

Firebase | Google's Mobile and Web App Development Platform

 

2️⃣ Firebase Console 화면에서 "Go to Console" 버튼을 클릭합니다.

 

3️⃣ "프로젝트 시작하기" 버튼을 클릭하여 새 프로젝트를 생성합니다.

 

4️⃣ 프로젝트의 이름을 입력한 후 "계속" 버튼을 클릭합니다.

 

5️⃣ Firebase AI 기능(Gemini) 사용 여부를 선택합니다. (필수 사항은 아닙니다.)

 

6️⃣ Google Analytics 사용 여부를 선택합니다. (선택 사항이지만 활성화를 추천합니다.)

 

7️⃣ Google Analytics 약관에 동의하고 설정을 완료합니다.

 

8️⃣ Firebase가 내부적으로 클라우드 리소스를 설정하는 ‘리소스 프로비저닝’ 과정이 진행됩니다.

 

9️⃣ 설정이 완료되면 Firebase 프로젝트 개요 화면이 나타납니다.

 

이제 Firebase 프로젝트가 생성되었습니다.

 

 

💡 Firebase 플랜 요금제 비교

Firebase는 무료 요금제(Spark)에서도 다양한 기능을 제공하며 , 사용량 초과 시 종량제(Blaze)로 자동 전환됩니다.

	무료 요금제 (Spark)	종량제 요금제 (Blaze)
Hosting	10GB 저장, 1일 360MB 데이터 전송 가능	저장한 크기 1기가당 0.026$ (37.71원) 데이터 이동 1기가당 0.15$ (217.55원)
Realtime Database	1GB 저장, 100개 동시 연결, 월 10GB 다운로드 제공	저장된 크기 1기가당 5$ (7,251.70원) 다운로드한 크기 1기가당 1$ (1,450.34원)
Cloud Storage	5GB 저장, 1일 1GB 다운로드 가능, 1일 2만 건 업로드 가능	1기가당 0.026$ (37.71원) 다운로드 1기가당 0.12$ (174.04원) 업로드 1만번에 0.05$ (72.52원) 다운로드 1만번에 0.005$ (7.25원)

2025년 3월 기준으로 계산한 값입니다.

 

참고

: 2024년 10월 30일부터는 새로운 Cloud Storage 버킷을 생성하려면 Blaze 요금제를 사용해야 하며,

2025년 10월 1일부터는 기존 버킷에 접근하려면 Blaze 요금제로 업그레이드해야 합니다.

---

03

Firebase 앱 추가하기

Firebase 프로젝트를 생성한 후에는 앱을 추가해야 합니다.
Firebase는 웹(Web), iOS, Android, Unity 등 다양한 플랫폼을 지원합니다.

 

1️⃣ Firebase Console에서 "앱 추가" 버튼을 클릭합니다.

2️⃣  웹(Web), iOS, Android, Unity 중에서 원하는 플랫폼을 선택합니다. 저는 웹앱으로 진행하겠습니다.

 

3️⃣ 앱 이름을 입력하고 "앱 등록" 버튼을 클릭합니다.  

4️⃣ Firebase에서 웹 SDK 정보를 제공하며, 이를 프로젝트에 추가해야 합니다.

 

5️⃣ Firebase SDK 확인 및 연동 방법 선택

Firebase는 다음 두 가지 방법으로 웹 애플리케이션과 연동할 수 있습니다.

✅ NPM 패키지 설치 방식을 사용합니다.
✅ <script> 태그를 HTML에 추가하는 방식을 사용합니다.

 

보안상 중요한 정보(API Key 등)는. env 파일로 관리해야 하며, GitHub 등에 유출되지 않도록 주의해야 합니다.

---

04

Firebase SDK 설정 및 환경변수 관리

제 프로젝트는 React Vite 기반이며, npm 방식으로 설치했습니다.

 

1️⃣ Firebase SDK 설치 (NPM 방식)

npm install firebase

 

2️⃣ Firebase 설정 파일 생성 (firebase.js)

src/firebase.js 파일을 생성하고 Firebase 프로젝트 정보를 설정합니다.

이후 환경 변수(.env)를 활용하여 중요한 정보를 보호하는 것이 핵심입니다.

 

3️⃣ 환경 변수 설정 (.env 파일 생성)

API Key 등의 민감한 정보를 .env 파일에 저장하고, 코드에서 이를 불러오도록 설정합니다.

 

💡 .env 파일을 gitignore에 추가하여 GitHub에 노출되지 않도록 설정해야 합니다.

# .gitignore
.env

 

4️⃣  .env 파일을 불러오지 못할 경우 체크리스트

만약 .env 파일이 정상적으로 로드되지 않는다면 아래 사항을 하나씩 확인해 보세요.

• ✅ .env 파일이 올바르게 작성되었는지 확인하기
• ✅ Vite를 완전히 재시작하기 (Ctrl + C → npm run dev)
• ✅ 환경 변수가 정상적으로 로드되는지 확인하기
• console.log(import.meta.env.VITE_PROJECT_ID);
• ✅ Vite 설정 수정 후 다시 실행하기
  : Vite는 기본적으로 process.env를 지원하지 않으므로, vite.config.js에서 define 옵션을 추가해야 할 수 있습니다.
• import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vite.dev/config/ export default defineConfig({ define: { "process.env": process.env, }, plugins: [react()], });
• ✅ .gitignore에 .env 추가되었는지 확인하기
• ✅ .env 파일이 프로젝트 루트(최상단)에 위치해야 함 (src 폴더 안 ❌)
• ✅ Firebase SDK 최신 버전으로 업데이트하기
• npm install firebase@latest

🔥 Firebase 초기 설정 완료!

---

05

Firebase 블로그 다른 글

 

👉 링크

👉 링크