자바스크립트 프로젝트에 Firebase 추가

이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션에서)로 Firebase 자바스크립트 SDK를 사용하는 방법을 설명합니다.

시작하기 전에

원하는 편집자 또는 IDE를 설치합니다.
자바스크립트 프로젝트(웹 또는 Node.js)를 엽니다.
Google 계정을 사용하여 Firebase에 로그인합니다.

아직 자바스크립트 프로젝트가 없는 경우 Firebase를 사용해 보려면 빠른 시작 샘플 중 하나를 다운로드하면 됩니다.

1단계: Firebase 프로젝트 만들기

자바스크립트 앱에 Firebase를 추가하려면 먼저 앱에 연결할 Firebase 프로젝트를 만들어야 합니다.

Firebase 프로젝트와 앱을 프로젝트에 추가하는 권장사항에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

Firebase 프로젝트 만들기

Firebase Console에서 프로젝트 추가를 클릭한 후 프로젝트 이름을 선택하거나 입력합니다.

기존 Google Cloud Platform(GCP) 프로젝트가 있으면 프로젝트 이름 드롭다운 메뉴에서 프로젝트를 선택할 수 있습니다. 기존 프로젝트가 없다면 프로젝트 이름을 새로 입력합니다.
(선택사항) 프로젝트 ID를 수정합니다.

Firebase는 Firebase 프로젝트에 자동으로 고유한 ID를 할당합니다. Firebase에서 프로젝트 ID를 사용하는 방법은 Firebase 프로젝트 이해를 참조하세요.

Firebase에서 Firebase 프로젝트용 리소스를 프로비저닝한 후에는 프로젝트 ID를 변경할 수 없습니다.
특정 식별자를 사용하려면 설정 단계에서 프로젝트 ID를 수정해야 합니다.
Firebase Console에서 나머지 설정 단계를 따른 다음 프로젝트 만들기(또는 기존 Google 프로젝트를 사용 중인 경우 Firebase 추가)를 클릭합니다.

Firebase에서 Firebase 프로젝트용 리소스를 자동으로 프로비저닝합니다. 프로세스가 완료되면 Firebase Console에서 Firebase 프로젝트의 개요 페이지로 이동됩니다.

2단계: 앱 등록

Firebase 프로젝트가 준비되었으면 웹 앱을 추가할 수 있습니다.

앱을 Firebase 프로젝트에 추가할 때의 권장사항 및 고려사항을 자세히 알아보려면 Firebase 프로젝트 이해를 참조하세요.

Firebase Console의 프로젝트 개요 페이지에 있는 웹 아이콘()을 클릭하여 설정 워크플로를 시작합니다.

Firebase 프로젝트에 앱을 이미 추가한 경우 앱 추가를 클릭하여 플랫폼 옵션을 표시합니다.
앱의 닉네임을 입력합니다.

닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다.
(선택사항) 웹 앱의 Firebase 호스팅을 설정합니다.
- Firebase 호스팅을 지금 설정하거나 나중에 설정할 수 있습니다. 언제든지 프로젝트 설정에서 호스팅 사이트에 Firebase 웹 앱을 연결할 수도 있습니다.
- 호스팅을 지금 설정하도록 선택한 경우 Firebase 웹 앱에 연결할 사이트를 드롭다운 목록에서 선택합니다.
  - 이 목록에는 프로젝트의 기본 호스팅 사이트 및 프로젝트에 설정된 다른 사이트가 표시됩니다.
  - Firebase 웹 앱에 이미 연결된 사이트는 추가 연결에 사용할 수 없습니다. 각 호스팅 사이트는 단일 Firebase 웹 앱에만 연결할 수 있습니다.
참고: 웹 앱에서 Firebase 제품을 사용할 때 Firebase 호스팅은 필요하지 않습니다.
앱 등록을 클릭합니다.

3단계: Firebase SDK 추가 및 Firebase 초기화

지원되는 Firebase 제품을 앱에 추가할 수 있습니다.

앱에 Firebase SDK를 추가하는 방법은 앱에 Firebase 호스팅을 사용하도록 선택했는지 여부, Bundler와 같은 앱에서 사용 중인 도구, Node.js 앱을 구성했는지 여부에 따라 다릅니다.

호스팅 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/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
</body>

개별 SDK 대신 Firebase 자바스크립트 SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="/__/firebase/6.2.0/firebase.js"></script>
  <body>

앱에서 Firebase를 초기화합니다. 예약된 호스팅 URL을 사용하는 경우에는 Firebase 구성 객체를 포함시킬 필요가 없습니다.
```
<body>
  

  
  <script src="/__/firebase/init.js"></script>
</body>
```

CDN에서 추가

Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다. Firebase는 Google의 글로벌 CDN(콘텐츠 전송 네트워크)에 Firebase 자바스크립트 SDK의 각 라이브러리를 저장합니다.

<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/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
</body>

개별 SDK 대신 Firebase 자바스크립트 SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase.js"></script>
  </body>

앱에서 Firebase를 초기화합니다.

<body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

모듈 Bundler 사용

Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다. Bundler(예: Browserify 또는 webpack)를 사용하는 경우 Firebase 제품을 필요할 때 개별적으로 import할 수 있습니다.

Firebase 자바스크립트 SDK를 설치합니다.
1. 아직 package.json 파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.
```
npm init
```
2. 다음 명령어를 실행하여 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 * as firebase from "firebase/app";

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Node.js 앱

Firebase 자바스크립트 SDK를 설치합니다.
1. 아직 package.json 파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.
```
npm init
```
2. 다음 명령어를 실행하여 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");
```
  개별 SDK 대신 Firebase 자바스크립트 SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).
  
  프로덕션 웹 앱에 SDK 전체를 로드하는 것은 비효율적입니다.
  개발 목적으로만 이 옵션을 사용하세요.
```
var firebase = require("firebase");
```
- ES2015를 사용하여 모듈을 import할 수 있습니다.
  
  특정 Firebase 제품(예: 인증 및 Cloud Firestore)만 포함하려면 다음 명령어를 실행합니다.
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
```
  개별 SDK 대신 Firebase 자바스크립트 SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).
  
  프로덕션 웹 앱에 SDK 전체를 로드하는 것은 비효율적입니다.
  개발 목적으로만 이 옵션을 사용하세요.
```
import firebase from "firebase";
```
  참고: Node.js에 import 구문을 직접 사용하는 것은 실험적이지만 Babel과 같은 컴파일러를 사용하여 CommonJS 형식(require 구문)으로 변환할 수 있습니다.

앱에서 Firebase를 초기화합니다.

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Firebase 구성 객체

앱에서 Firebase를 초기화하려면 앱의 Firebase 프로젝트 구성을 제공해야 합니다.

예약된 호스팅 URL을 사용하는 경우 프로젝트에서 Firebase 구성을 자동으로 가져오므로 코드에 객체를 명시적으로 제공할 필요가 없습니다.

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",
};

언제든지 Firebase 구성 객체를 가져올 수 있습니다.

4단계: (선택사항) CLI 설치 후 Firebase 호스팅에 배포

Firebase 웹 앱을 Firebase 호스팅 사이트에 연결한 경우 사이트의 콘텐츠와 구성을 지금(웹 앱을 설정할 때) 배포하거나 나중에 언제든지 배포할 수 있습니다.

Firebase를 배포하려면 Firebase CLI(명령줄 도구)를 사용하면 됩니다. CLI를 설치하거나 최신 CLI 버전으로 업데이트합니다.

컴퓨터의 어느 곳에서든 다음 npm 명령어를 실행합니다.
```
npm install -g firebase-tools
```
참고: 명령어가 실패하면 자세한 CLI 설치 안내를 검토하세요.
Google에 로그인합니다. 다음 명령어를 실행합니다.
```
firebase login
```
이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.
Firebase 프로젝트를 초기화합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.
```
firebase init
```
이 초기화 명령어는 다음을 수행합니다.
- 로컬 앱 디렉터리를 Firebase에 연결합니다.
- Firebase 호스팅에 필요한 firebase.json 파일을 생성합니다.
- 공개 정적 파일이 포함된 공개 루트 디렉터리(HTML, CSS, JS 등)를 지정하라는 메시지를 표시합니다.
  
  Firebase가 찾는 디렉터리의 기본 이름은 'public'입니다. 나중에 firebase.json 파일을 직접 수정하여 공개 디렉터리를 설정할 수도 있습니다.
콘텐츠와 호스팅 구성을 Firebase 호스팅에 배포합니다.
기본 호스팅 사이트
기본적으로 모든 Firebase 프로젝트에는 web.app 및 firebaseapp.com 도메인(project-id.web.app 및 project-id.firebaseapp.com)에 무료 하위 도메인이 있습니다.
1. 사이트에 배포합니다. 앱의 디렉터리에서 다음 명령어를 실행합니다.
```
firebase deploy
```
2. 다음의 기본 사이트 중 하나에서 사용자의 사이트를 확인합니다.
  - project-id.web.app
  - project-id.firebaseapp.com
기본이 아닌 호스팅 사이트
Firebase 프로젝트는 여러 사이트를 지원합니다. 이러한 사이트는 기본이 아닌 사이트로 간주됩니다. Console의 웹 앱 설정 워크플로 단계 또는 Console의 호스팅 페이지에서 추가 사이트를 프로젝트에 추가할 수 있습니다.

아래에 설명된 빠른 시작 샘플 안내는 초기 개발 목적으로만 사용할 수 있습니다. 프로덕션 앱의 경우 추가 사이트의 개발 설정을 위한 권장사항을 따르세요.
1. firebase init 실행 중 생성된 firebase.json 파일에 사이트를 추가합니다.
  
  이 firebase.json 구성은 각 사이트별로 별도의 저장소가 있다고 가정합니다.
```
{
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}
```
2. 사이트에 배포합니다. 앱의 디렉터리에서 다음 명령어를 실행합니다.
```
firebase deploy --only hosting:site-name
```
3. 다음 사이트 중 하나에서 사용자의 사이트를 확인합니다.
  - site-name.web.app
  - site-name.firebaseapp.com

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

Firebase 자바스크립트 SDK는 다음 Firebase 제품을 지원합니다. 각 제품은 선택사항이며 firebase 네임스페이스에서 액세스할 수 있습니다.

사용할 수 있는 메서드는 Firebase 자바스크립트 참조 문서를 참조하세요.

Firebase 제품	네임스페이스	웹	Node.js
인증	`firebase.auth()`
Cloud Firestore	`firebase.firestore()`
Firebase용 Cloud Functions 클라이언트 SDK	`firebase.functions()`
클라우드 메시징	`firebase.messaging()`
Cloud Storage	`firebase.storage()`
Performance Monitoring(베타 출시 버전)	`firebase.performance()`
실시간 데이터베이스	`firebase.database()`

사용 가능한 라이브러리

사용 가능한 JS SDK(예약된 호스팅 URL에서 추가)

Firebase 제품	라이브러리 참조(예약된 URL)
Firebase core (필수항목)	<script src="/__/firebase/6.2.0/firebase-app.js"></script>
인증	<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
Firebase용 Cloud Functions 클라이언트 SDK	<script src="/__/firebase/6.2.0/firebase-functions.js"></script>
클라우드 메시징	<script src="/__/firebase/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="/__/firebase/6.2.0/firebase-storage.js"></script>
Performance Monitoring (베타 출시 버전)	<script src="/__/firebase/6.2.0/firebase-performance.js"></script>
실시간 데이터베이스	<script src="/__/firebase/6.2.0/firebase-database.js"></script>
Firebase 자바스크립트 SDK (전체 SDK)	<script src="/__/firebase/6.2.0/firebase.js"></script>

사용 가능한 Firebase JS SDK(CDN에서 추가)

Firebase 제품	라이브러리 참조
Firebase core (필수항목)	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
인증	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
Firebase용 Cloud Functions 클라이언트 SDK	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-functions.js"></script>
클라우드 메시징	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
Performance Monitoring (베타 출시 버전)	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-performance.js"></script> 독립형 경량 Performance Monitoring SDK 옵션을 추가하려면 Performance Monitoring 시작하기를 참조하세요.
실시간 데이터베이스	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>

사용 가능한 Firebase JS SDK(모듈과 함께 Bundler 사용)

Firebase 제품	라이브러리 참조
Firebase core(필수)	`import "firebase/app";`
인증	`import "firebase/auth";`
Cloud Firestore	`import "firebase/firestore";`
Firebase용 Cloud Functions 클라이언트 SDK	`import "firebase/functions";`
클라우드 메시징	`import "firebase/messaging";`
Cloud Storage	`import "firebase/storage";`
Performance Monitoring(베타 출시 버전)	`import "firebase/performance";`
실시간 데이터베이스	`import "firebase/database";`

사용 가능한 Firebase JS SDK(Node.js용 모듈)

Firebase 제품	라이브러리 모듈
Firebase core(필수)	`"firebase/app"`
인증	`"firebase/auth"`
Cloud Firestore	`"firebase/firestore"`
Firebase용 Cloud Functions 클라이언트 SDK	`"firebase/functions"`
실시간 데이터베이스	`"firebase/database"`

추가 설정 옵션

Firebase SDK의 로드 지연(CDN에서 추가)

전체 페이지가 로드될 때까지 Firebase SDK 포함을 지연시킬 수 있습니다.

먼저 Firebase SDK의 각 script 태그에 defer 플래그를 추가한 후 두 번째 스크립트를 사용하여 Firebase 초기화를 지연시킵니다. 예를 들면 다음과 같습니다.

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

init-firebase.js 파일을 만든 후 파일에 다음을 포함시킵니다.

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

단일 앱에서 Firebase 프로젝트 여러 개 사용

대부분의 경우 기본 앱 하나에서만 Firebase를 초기화하면 됩니다. 이 앱을 통해 유사한 두 가지 방법으로 Firebase에 액세스할 수 있습니다.

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

간혹 동시에 Firebase 프로젝트 여러 개에 액세스해야 하는 경우가 있습니다. 예를 들어 한 Firebase 프로젝트의 데이터베이스에서 데이터를 읽어 다른 Firebase 프로젝트에 파일을 저장하고 싶을 수 있습니다. 또는 두 번째 프로젝트를 인증되지 않은 상태로 유지하면서 한 프로젝트를 인증하려 할 수도 있습니다.

Firebase 자바스크립트 SDK를 사용하면 단일 앱에서 Firebase 프로젝트 여러 개를 동시에 초기화하고 사용할 수 있으며, 이 때 각 프로젝트에서는 자체 Firebase 구성 정보를 사용합니다.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

개발용 로컬 웹 서버 실행

웹 앱을 빌드하는 경우, Firebase 자바스크립트 SDK의 특정 부분에서는 로컬 파일 시스템이 아닌 서버에서 웹 앱을 제공하라고 요구합니다. 이 경우 Firebase CLI를 사용하여 로컬 서버를 실행할 수 있습니다.

앱에 Firebase 호스팅을 설정했다면 다음 단계 중 일부는 이미 완료된 상태일 수 있습니다.

Firebase CLI를 설치하거나 업데이트합니다. 컴퓨터의 어느 곳에서든 다음 npm 명령어를 실행합니다.
```
npm install -g firebase-tools
```
참고: 명령어가 실패하면 자세한 CLI 설치 안내를 검토하세요.
Google에 로그인합니다. 다음 명령어를 실행합니다.
```
firebase login
```
이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.
Firebase 프로젝트를 초기화합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.
```
firebase init
```
이 초기화 명령어는 다음을 수행합니다.
- 로컬 앱 디렉터리를 Firebase에 연결합니다.
- Firebase 호스팅에 필요한 firebase.json 파일을 생성합니다.
- 공개 정적 파일이 포함된 공개 루트 디렉터리(HTML, CSS, JS 등)를 지정하라는 메시지를 표시합니다.
  
  Firebase가 찾는 디렉터리의 기본 이름은 'public'입니다. 나중에 firebase.json 파일을 직접 수정하여 공개 디렉터리를 설정할 수도 있습니다.
개발용 로컬 서버를 시작합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.
```
firebase serve
```

다음 단계

Firebase 알아보기:

샘플 Firebase 앱을 살펴봅니다.
Firebase Web Codelab에서 사용 방법을 실습합니다.
GitHub의 오픈소스 코드를 살펴봅니다.
Firebase 자바스크립트 SDK에 지원되는 환경을 검토합니다.
AngularFire, RxFire, 웹용 FirebaseUI와 같이 Firebase에서 유지되는 추가 오픈소스 라이브러리를 사용하여 개발 속도를 높입니다.
앱 출시를 준비합니다.
- 결제 알림 설정
- Firebase 출시 체크리스트 검토

앱에 Firebase 서비스 추가:

Firebase 호스팅으로 앱을 호스팅합니다.
인증으로 사용자 인증 흐름을 설정합니다.
Cloud Firestore 또는 실시간 데이터베이스로 사용자 정보 등의 데이터를 저장합니다.
Cloud Storage로 사진, 동영상 등의 파일을 저장합니다.
Performance Monitoring으로 앱의 성능 문제를 파악합니다.
Cloud Functions로 보안 환경에서 실행되는 백엔드 코드를 트리거합니다.
클라우드 메시징으로 알림을 보냅니다.

자바스크립트 프로젝트에 Firebase 추가

시작하기 전에

1단계: Firebase 프로젝트 만들기

2단계: 앱 등록

3단계: Firebase SDK 추가 및 Firebase 초기화

호스팅 URL에서 추가

CDN에서 추가

모듈 Bundler 사용

Node.js 앱

Firebase 구성 객체

4단계: (선택사항) CLI 설치 후 Firebase 호스팅에 배포

기본 호스팅 사이트

기본이 아닌 호스팅 사이트

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

사용 가능한 라이브러리

사용 가능한 JS SDK(예약된 호스팅 URL에서 추가)

사용 가능한 Firebase JS SDK(CDN에서 추가)

사용 가능한 Firebase JS SDK(모듈과 함께 Bundler 사용)

사용 가능한 Firebase JS SDK(Node.js용 모듈)

추가 설정 옵션

Firebase SDK의 로드 지연(CDN에서 추가)

단일 앱에서 Firebase 프로젝트 여러 개 사용

개발용 로컬 웹 서버 실행

다음 단계