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 configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

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

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

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