이 가이드를 따라 웹 앱에서 또는 다음의 클라이언트로 Firebase JavaScript SDK를 사용하세요. 최종 사용자 액세스(예: Node.js 데스크톱 또는 IoT 애플리케이션)
1단계: Firebase 프로젝트 만들기 및 앱 등록
JavaScript 앱에 Firebase를 추가하려면 우선 Firebase 프로젝트를 만들고 해당 프로젝트에 앱을 등록해야 합니다. Firebase에 앱을 등록하면 Firebase 프로젝트 리소스와 앱을 연결하는 데 사용할 Firebase 구성 객체를 얻게 됩니다.
Firebase 프로젝트와 프로젝트에 앱 추가 시 권장사항에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.
JavaScript 프로젝트가 준비되지 않았지만 Firebase 제품을 사용해 보고자 하는 경우 빠른 시작 샘플 중 하나를 다운로드하세요.
2단계: SDK 설치 및 Firebase 초기화
이 페이지에서는 자바스크립트 모듈 형식을 사용하는 Firebase JS SDK의 모듈식 API 설정 안내를 설명합니다.
이 워크플로에서는 npm을 사용하고, 모듈 번들러 또는 자바스크립트 프레임워크 도구가 필요합니다. 모듈식 API는 사용하지 않는 코드를 없애고(트리 쉐이킹) 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 서비스를 추가하고 사용할 수 있습니다.
앱에 서버 측 렌더링 (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 알아보기:
샘플 Firebase 앱을 살펴봅니다.
Firebase 웹 Codelab에서 사용 방법을 실습합니다.
GitHub의 오픈소스 코드를 살펴봅니다.
다음 지원되는 환경을 검토합니다. Firebase JavaScript SDK
AngularFire, RxFire, 웹용 FirebaseUI와 같이 Firebase에서 유지관리하는 추가 오픈소스 라이브러리를 사용하여 개발 속도를 높입니다.
앱 출시 준비
- 예산 설정 알림 Google Cloud 콘솔에서 볼 수 있습니다.
- 사용량 및 결제 모니터링 대시보드 Firebase 콘솔에서 프로젝트의 여러 Firebase 서비스의 사용량을 모니터링할 수 있습니다
- Firebase 출시 체크리스트를 검토합니다.