Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

JavaScript 프로젝트에 Firebase 추가

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

이 가이드에 따라 웹 앱에서 Firebase JavaScript SDK를 사용하거나 예를 들어 Node.js 데스크톱 또는 IoT 애플리케이션에서 최종 사용자 액세스를 위한 클라이언트로 사용하세요.

1단계 : Firebase 프로젝트 생성 및 앱 등록

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

Firebase 프로젝트 및 프로젝트에 앱을 추가하기 위한 권장사항에 대해 자세히 알아보려면 Firebase 프로젝트 이해 를 방문하세요.

아직 자바스크립트 프로젝트가 없고 Firebase 제품을 사용해 보고 싶다면 빠른 시작 샘플 중 하나를 다운로드할 수 있습니다.

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

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

이 워크플로는 npm을 사용하며 모듈 번들러 또는 JavaScript 프레임워크 도구가 필요합니다. v9 SDK는 사용하지 않는 코드(트리 쉐이킹)를 제거하고 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 서비스를 추가하고 사용할 수 있습니다.

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

Firebase 서비스(예: Cloud Firestore, 인증, 실시간 데이터베이스, 원격 구성 등)는 개별 하위 패키지 내에서 가져올 수 있습니다.

아래 예는 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에 대해 알아보기: