이 가이드에 따라 웹 앱에서 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 크기를 줄이기 위해 모듈 번들러 와 함께 작동하도록 최적화되어 있기 때문입니다.
npm을 사용하여 Firebase를 설치합니다.
npm install firebase
앱에서 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에 대해 알아보기:
샘플 Firebase 앱 을 살펴보세요.
Firebase Web Codelab 을 직접 체험해 보세요.
GitHub 에서 오픈 소스 코드를 살펴보세요.
Firebase JavaScript SDK에 지원되는 환경 을 검토하세요.
AngularFire , RxFire , 웹용 FirebaseUI 등 Firebase에서 관리하는 추가 오픈소스 라이브러리를 사용하여 개발 속도를 높이세요.
앱 실행 준비:
- Google Cloud Console에서 프로젝트에 대한 예산 알림 을 설정하세요.
- Firebase Console에서 사용량 및 결제 대시보드 를 모니터링하여 여러 Firebase 서비스에서 프로젝트 사용량을 전체적으로 파악하세요.
- Firebase 출시 체크리스트 를 검토하세요.