이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션에서)로 Firebase 자바스크립트 SDK를 사용하는 방법을 설명합니다.
기본 요건
원하는 편집자 또는 IDE를 설치합니다.
Google 계정을 사용하여 Firebase에 로그인합니다.
자바스크립트 프로젝트가 준비되지 않았다면 빠른 시작 샘플 중 하나를 다운로드하여 Firebase 제품을 사용해 볼 수 있습니다.
1단계: Firebase 프로젝트 만들기
자바스크립트 앱에 Firebase를 추가하려면 먼저 앱에 연결할 Firebase 프로젝트를 만들어야 합니다.
Firebase 프로젝트와 앱을 프로젝트에 추가하는 권장사항에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.
2단계: Firebase에 앱 등록
Firebase 프로젝트가 준비되었으면 웹 앱을 추가할 수 있습니다.
앱을 Firebase 프로젝트에 추가할 때의 권장사항 및 고려사항을 자세히 알아보려면 Firebase 프로젝트 이해를 참조하세요.
Firebase Console의 프로젝트 개요 페이지 중앙에 있는 웹 아이콘( )을 클릭하여 설정 워크플로를 시작합니다.
Firebase 프로젝트에 앱을 이미 추가한 경우 앱 추가를 클릭하여 플랫폼 옵션을 표시합니다.
앱의 닉네임을 입력합니다.
닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다.(선택사항) 웹 앱의 Firebase 호스팅을 설정합니다.
앱 등록을 클릭합니다.
3단계: Firebase SDK 추가 및 Firebase 초기화
Firebase는 원격 구성, FCM 등을 포함한 대부분의 Firebase 제품에 사용할 수 있는 자바스크립트 라이브러리를 제공합니다. 사용 가능한 라이브러리를 앱에 추가할 수 있습니다.
웹 앱에 Firebase SDK를 추가하는 방법은 앱에 Firebase 호스팅을 사용하도록 선택했는지 여부, 모듈 번들러와 같은 앱에서 사용 중인 도구, Node. js 앱 구성 여부에 따라 다릅니다. 이러한 대안 중에서 선택하는 데 도움이 필요한 경우 웹 SDK를 앱에 추가하는 방법을 참조하세요.
모듈 번들러 사용
Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다. Bundler(예: Browserify 또는 webpack)를 사용하는 경우 Firebase 제품을 필요할 때 개별적으로 import
할 수 있습니다.
Firebase 자바스크립트 SDK를 설치합니다.
아직
package.json
파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.npm init
다음 명령어를 실행하여
firebase
npm 패키지를 설치하고package.json
파일에 저장합니다.npm install --save firebase
특정 Firebase 제품(예: 인증 및 Cloud Firestore)만 포함하려면 Firebase 모듈을
import
합니다.// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // Add the Firebase products that you want to use import "firebase/auth"; import "firebase/firestore";
앱에서 Firebase를 초기화합니다.
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
CDN에서 추가
Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다. Firebase는 Google의 글로벌 CDN(콘텐츠 전송 네트워크)에 Firebase 자바스크립트 SDK의 각 라이브러리를 저장합니다.
특정 Firebase 제품(예: 인증 및 Cloud Firestore)만 포함하려면
<body>
태그 하단에 다음 스크립트를 추가하세요. 단, Firebase 서비스를 사용하기 전에 진행해야 합니다.<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script> </body>
앱에서 Firebase를 초기화합니다.
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
호스팅 URL에서 추가
Firebase 호스팅을 사용 중이면 예약된 URL에서 동적으로 Firebase 자바스크립트 SDK 라이브러리를 로드하도록 앱을 구성할 수 있습니다. 자세한 내용은 예약된 호스팅 URL을 통해 SDK 추가에서 확인해 보세요.
이 설정 옵션을 사용하면 Firebase에 배포한 후 배포한 Firebase 프로젝트에서 Firebase 구성 객체를 앱이 자동으로 가져옵니다. 동일한 코드베이스를 여러 Firebase 프로젝트에 배포할 수 있지만 firebase.initializeApp()
에 사용 중인 Firebase 구성을 추적할 필요는 없습니다.
웹 앱을 로컬에서 테스트할 때에도 이 설정 옵션을 사용할 수 있습니다.
특정 Firebase 제품(예: 애널리틱스, 인증 또는 Cloud Firestore)만 포함하려면
<body>
태그 하단에 다음 스크립트를 추가하세요. 단, Firebase 서비스를 사용하기 전에 진행해야 합니다.<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.3.1/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.3.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.3.1/firebase-auth.js"></script> <script src="/__/firebase/8.3.1/firebase-firestore.js"></script> </body>
앱에서 Firebase를 초기화합니다. 예약된 호스팅 URL을 사용하는 경우에는 Firebase 구성 객체를 포함시킬 필요가 없습니다.
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Node.js 앱
Firebase 자바스크립트 SDK를 설치합니다.
아직
package.json
파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.npm init
다음 명령어를 실행하여
firebase
npm 패키지를 설치하고package.json
파일에 저장합니다.npm install --save firebase
다음 옵션 중 하나를 사용하여 앱에서 Firebase 모듈을 사용합니다.
자바스크립트 파일의 모듈을
require
할 수 있습니다.특정 Firebase 제품(예: 인증 및 Cloud Firestore)만 포함하려면 다음 명령어를 실행합니다.
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs var firebase = require("firebase/app"); // Add the Firebase products that you want to use require("firebase/auth"); require("firebase/firestore");
ES2015를 사용하여 모듈
import
특정 Firebase 제품(예: 인증 및 Cloud Firestore)만 포함하려면 다음 명령어를 실행합니다.
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore";
앱에서 Firebase를 초기화합니다.
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Firebase 구성 객체 알아보기
앱에서 Firebase를 초기화하려면 앱의 Firebase 프로젝트 구성을 제공해야 합니다. 언제든지 Firebase 구성 객체를 가져올 수 있습니다.
예약된 호스팅 URL을 사용하는 경우 Firebase 프로젝트에서 Firebase 구성을 자동으로 가져오므로 코드에 구성 객체를 명시적으로 제공할 필요가 없습니다.
구성 객체, 특히
apiKey
,projectId
,appID
등의 필수 'Firebase 옵션'은 수동으로 편집하지 않는 것이 좋습니다. 이러한 필수 'Firebase 옵션'에 대해 유효하지 않거나 누락된 값으로 앱을 초기화하면 앱 사용자에게 심각한 문제가 발생할 수 있습니다.Firebase 프로젝트에서 Google 애널리틱스를 사용 설정하면 구성 객체에
measurementId
필드가 포함됩니다. 이 필드에 대한 자세한 내용은 애널리틱스 시작하기 페이지를 참조하세요.
다음은 모든 서비스가 사용 설정된 구성 객체의 형식입니다. 이러한 값은 자동으로 입력됩니다.
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", databaseURL: "https://PROJECT_ID.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", measurementId: "G-MEASUREMENT_ID", };
다음은 예시 값이 입력된 구성 객체입니다.
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" };
4단계: (선택사항) CLI 설치 후 Firebase 호스팅에 배포
Firebase 웹 앱을 Firebase 호스팅 사이트에 연결한 경우 사이트의 콘텐츠와 구성을 지금(웹 앱을 설정할 때) 배포하거나 나중에 언제든지 배포할 수 있습니다.
Firebase를 배포하려면 Firebase CLI(명령줄 도구)를 사용하면 됩니다.
CLI 설치 방법 또는 최신 CLI 버전으로 업데이트하는 방법을 알아보려면 Firebase CLI 문서를 참조하세요.
Firebase 프로젝트를 초기화합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.
firebase init
콘텐츠와 호스팅 구성을 Firebase 호스팅에 배포합니다.
기본 호스팅 사이트
기본적으로 모든 Firebase 프로젝트에는
web.app
및firebaseapp.com
도메인( 및PROJECT_ID.web.app
)에 무료 하위 도메인이 있습니다.PROJECT_ID.firebaseapp.com
사이트에 배포합니다. 앱의 디렉터리에서 다음 명령어를 실행합니다.
firebase deploy
다음의 기본 사이트 중 하나에서 사용자의 사이트를 확인합니다.
PROJECT_ID.web.app
PROJECT_ID.firebaseapp.com
기본이 아닌 호스팅 사이트
Firebase 프로젝트는 여러 사이트를 지원합니다. 이러한 사이트는 기본이 아닌 사이트로 간주됩니다. Console의 웹 앱 설정 워크플로 단계 또는 Console의 호스팅 페이지에서 추가 사이트를 프로젝트에 추가할 수 있습니다.
firebase init
실행 중 생성된firebase.json
파일에 사이트를 추가합니다.이
firebase.json
구성은 각 사이트별로 별도의 저장소가 있다고 가정합니다.{ "hosting": { "site": "SITE_ID", "public": "public", // ... } }
사이트에 배포합니다. 앱의 디렉터리에서 다음 명령어를 실행합니다.
firebase deploy --only hosting:SITE_ID
다음 사이트 중 하나에서 사용자의 사이트를 확인합니다.
SITE_ID.web.app
SITE_ID.firebaseapp.com
5단계: 앱에서 Firebase에 액세스
Firebase 자바스크립트 SDK는 다음 Firebase 제품을 지원합니다. 각 제품은 선택사항이며 firebase
네임스페이스에서 액세스할 수 있습니다.
사용할 수 있는 메서드는 Firebase 자바스크립트 참조 문서를 참조하세요.
Firebase 제품 | 네임스페이스 | 웹 | Node.js |
---|---|---|---|
애널리틱스 | firebase.analytics() |
||
인증 | firebase.auth() |
||
Cloud Firestore | firebase.firestore() |
||
Firebase용 Cloud Functions 클라이언트 SDK | firebase.functions() |
||
클라우드 메시징 | firebase.messaging() |
||
Cloud Storage | firebase.storage() |
||
Performance Monitoring(베타 출시 버전) | firebase.performance() |
||
실시간 데이터베이스 | firebase.database() |
||
원격 구성(베타 출시 버전) | firebase.remoteConfig() |
사용 가능한 라이브러리
다음 단계
Firebase 알아보기:
샘플 Firebase 앱을 살펴봅니다.
Firebase Web Codelab에서 사용 방법을 실습합니다.
GitHub의 오픈소스 코드를 살펴봅니다.
Firebase 자바스크립트 SDK가 지원되는 환경을 검토합니다.
AngularFire, RxFire, 웹용 FirebaseUI와 같이 Firebase에서 유지되는 추가 오픈소스 라이브러리를 사용하여 개발 속도를 높입니다.
앱 출시 준비
- Google Cloud Console에서 프로젝트의 예산 알림을 설정합니다.
- Firebase Console에서 사용량 및 결제 대시보드를 모니터링하여 여러 Firebase 서비스에서 프로젝트 사용량을 전체적으로 파악합니다.
- Firebase 출시 체크리스트를 검토합니다.
앱에 Firebase 서비스 추가:
Firebase 호스팅으로 앱을 호스팅합니다.
인증으로 사용자 인증 흐름을 설정합니다.
Cloud Firestore 또는 실시간 데이터베이스로 사용자 정보 등의 데이터를 저장합니다.
Cloud Storage로 사진, 동영상 등의 파일을 저장합니다.
Performance Monitoring으로 앱의 성능 문제를 파악합니다.
Cloud Functions로 보안 환경에서 실행되는 백엔드 코드를 트리거합니다.
클라우드 메시징으로 알림을 보냅니다.