Firebase
Firebase는 구글이 개발한 클라우드 기반 개발 플랫폼이다. 실시간 데이터베이스, 인증, 클라우드 저장소와 같은 백엔드 인프라스트럭처 및 서비스를 제공하고, 모바일 앱 및 웹 개발을 간편하게 수행할 수 있도록 다양한 도구와 서비스를 제공한다.
Firebase 주요기능
-
실시간 데이터베이스 (Realtime Database)
실시간 데이터베이스는 JSON 형식의 데이터를 실시간으로 동기화하고 공유할 수 있는 NoSQL 데이터베이스이다. -
Authentication
Firebase는 사용자 인증을 구현할 수 있는 도구를 제공하며, 사용자 인증을 위해 이메일/비밀번호, Google, Facebook, Twitter, GitHub, apple 등 다양한 인증 방법을 지원한다. -
호스팅 (Hosting)
Hosting을 사용하면 웹 앱을 손쉽게 호스팅할 수 있으며, CDN(Content Delivery Network)을 통해 전 세계에 빠르게 배포할 수 있다. -
클라우드 함수 (Cloud Functions)
서버리스 백엔드를 만들기 위해 사용자 정의 클라우드 함수를 작성할 수 있다. -
클라우드 저장소 (Cloud Storage)
클라우드 저장소를 사용하여 사용자가 업로드한 파일을 저장하고 관리할 수 있다. -
알림 메시지 (Cloud Messaging)
알림 메세지를 사용하여 모바일 및 웹 앱으로 푸시 알림을 보낼 수 있다. -
실시간 애널리틱스 (Realtime Analytics)
실시간 애널리틱스는 앱 사용 통계를 추적하고 사용자 행동을 분석하여 앱을 개선할 수 있는 인사이트를 제공한다. -
A/B 테스팅
A/B 테스팅을 사용하여 앱의 다양한 버전을 테스트하고 사용자의 반응을 분석할 수 있다. -
인앱 광고 (AdMob)
인앱광고를 통해 모바일 앱에 광고 수익을 추가하는 데 사용할 수 있다.
Firebase 프로젝트 시작하기
- firebase 사이트를 접속하면 아래와 같은 페이지를 확인 할 수 있다. 회원가입이나 로그인을 한 후에, 시작하기 버튼을 클릭한다.
- 프로젝트 추가 버튼을 클릭하면 새로운 프로젝트를 추가할 수 있다.
-
프로젝트 이름을 작성한 후 계속 버튼을 클릭하면 구글 애널리틱스를 설정할 것인지 정할 수 있다. 구글 애널리틱스를 설정했을 경우에는 계정을 선택해주고 프로젝트 만들기 버튼을 클릭하면 된다.
-
프로젝트에 웹 또는 앱에 필요한 기능들을 추가할 수 있다. 앱에 Firebase를 추가하여 시작하기 텍스트 아래에 있는 아이콘들은 Apple, Android, Web, Unity, Flutter를 말하며, 클릭하면 추가할 수 있다. 나의 프로젝트는 웹이므로
</>를 클릭하여 웹 앱에 Firebase를 추가했다.
-
프로젝트에 적용하기 위해서 프로젝트에 npm install firebase를 입력하여 설치해준다. firebase 설치가 완료되면 firebase 파일을 만든 후 아래의 코드를 작성해준다. 이번 프로젝트는 타입스크립트를 적용하고 있어서 ts파일로 작성해주었다.
firebase.ts
웹 앱에 Firebase를 추가할 때 Firebase SDK를 초기화할 때 필요한 정보를 제공한다. firebase 파일에 바로 작성하면 보안에도 좋지 않으므로 환경 변수를 통해 중요한 데이터는 .env파일에 따로 작성한 후 Git에는 올라가지 않도록 설정하였다.
Vita로 프로젝트를 설치하였으므로 import.meta.env.VITE으로 작성하였으며 Create React App으로 프로젝트를 설치한 경우에는 process.env.REACT로 작성해주면 된다. 아래의 env파일의 내용들은 오픈할 수 없어서 임의로 작성하였다.
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_FIREBASE_APP_ID,
measurementId: import.meta.env.VITE_APP_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);.env
VITE_APP_FIREBASE_API_KEY=abcde
VITE_APP_FIREBASE_AUTH_DOMAIN=www.abcde.com
VITE_APP_FIREBASE_PROJECT_ID=abcde
VITE_APP_FIREBASE_STORAGE_BUCKET=abcde
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=abcde
VITE_APP_FIREBASE_APP_ID=abcde
VITE_APP_FIREBASE_MEASUREMENT_ID=abcde✨ 환경 변수를 저장하는 .env 파일은 프로젝트 루트 디렉토리에 위치해야한다.
