JavaScript 프로젝트에 Firebase 추가

이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션)로 Firebase JavaScript SDK를 사용하는 방법을 설명합니다.

1단계: Firebase 프로젝트 만들기 및 앱 등록

JavaScript 앱에 Firebase를 추가하려면 우선 Firebase 프로젝트를 만들고 해당 프로젝트에 앱을 등록해야 합니다. Firebase에 앱을 등록하면 Firebase 프로젝트 리소스와 앱을 연결하는 데 사용할 Firebase 구성 객체를 얻게 됩니다.

Firebase 프로젝트와 프로젝트에 앱 추가 시 권장사항에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

JavaScript 프로젝트가 준비되지 않았지만 Firebase 제품을 사용해 보고자 하는 경우 빠른 시작 샘플 중 하나를 다운로드하세요.

2단계: SDK 설치 및 Firebase 초기화

이 페이지에서는 자바스크립트 모듈 형식을 사용하는 Firebase JS SDK의 모듈식 API 설정 안내를 설명합니다.

이 워크플로에서는 npm을 사용하고, 모듈 번들러 또는 자바스크립트 프레임워크 도구가 필요합니다. 모듈식 API는 사용하지 않는 코드를 없애고(트리 쉐이킹) SDK 크기를 줄이기 위해 모듈 번들러와 연동하도록 최적화되었기 때문입니다.

  1. npm을 사용하여 Firebase를 설치합니다.

    npm install firebase

  2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만듭니다.

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Firebase 앱은 일반적인 구성을 저장하고 Firebase 서비스 간에 인증을 공유하는 컨테이너와 유사한 객체입니다. 코드에서 Firebase 앱 객체를 초기화한 후 Firebase 서비스를 추가하고 사용할 수 있습니다.

    앱에 서버 측 렌더링(SSR)을 기반으로 하는 동적 기능이 포함되어 있는 경우 서버 렌더링과 클라이언트 렌더링 패스 전반에서 구성이 유지되도록 몇 가지 추가 단계를 수행해야 합니다. 서버 로직에서 FirebaseServerApp 인터페이스를 구현하여 앱의 서비스 워커를 사용한 세션 관리를 최적화합니다.

3단계: 앱에서 Firebase에 액세스

Firebase 서비스(Cloud Firestore, Authentication, Realtime Database, Remote Config 등)를 개별 하위 패키지 내에서 가져올 수 있습니다.

아래 예시는 Cloud Firestore Lite SDK를 사용하여 데이터 목록을 검색하는 방법을 보여줍니다.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

4단계: 크기 축소를 위해 모듈 번들러(webpack/Rollup) 사용

Firebase 웹 SDK는 사용하지 않는 코드를 삭제(트리 쉐이킹)하기 위해 모듈 번들러와 연동되도록 설계되었습니다. 프로덕션 앱에는 이 방식을 사용하는 것이 좋습니다. Angular CLI, Next.js, Vue CLI, Create React App과 같은 도구는 npm을 통해 설치하고 코드베이스로 가져온 라이브러리의 모듈 번들링을 자동으로 처리합니다.

자세한 내용은 Firebase와 함께 모듈 번들러 사용 가이드를 참조하세요.

웹에서 사용 가능한 Firebase 서비스

이제 Firebase를 사용하도록 설정했으므로 웹 앱에서 다음과 같은 사용 가능한 Firebase 서비스를 추가하고 사용할 수 있습니다.

다음 명령어는 npm을 사용하여 로컬에 설치된 Firebase 라이브러리를 가져오는 방법을 보여줍니다. 다른 가져오기 옵션은 사용 가능한 라이브러리 문서를 참조하세요.

다음 단계

Firebase 알아보기: