콘솔로 이동

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

기본 요건

시작하기 전에 Firebase를 추가할 자바스크립트(웹 또는 Node.js) 앱이 있어야 합니다. 앱이 준비되지 않았다면 빠른 시작 샘플 중 하나를 다운로드할 수 있습니다.

Node.js 데스크톱 또는 IoT 기기와 같은 최종 사용자 액세스용 클라이언트가 아니라 서버와 같은 관리자 권한 환경이나 Cloud Functions와 같은 서버리스 백엔드에서 Node.js를 사용하려는 경우 Admin SDK 설정 안내를 따라야 합니다.

앱에 Firebase 추가

앱에 Firebase를 추가하려면 Firebase 프로젝트와 프로젝트에 대한 일부 세부정보가 있는 초기화 코드의 간단한 스니펫이 필요합니다.

  1. Firebase 콘솔에서 Firebase 프로젝트를 만듭니다.

    • 기존에 Firebase 프로젝트가 없으면 프로젝트 추가를 클릭하고 기존의 Google Cloud Platform 프로젝트 이름 또는 새 프로젝트 이름을 입력합니다.
    • 사용할 기존 Firebase 프로젝트가 있는 경우 콘솔에서 해당 프로젝트를 선택합니다.
  2. Firebase 콘솔의 프로젝트 개요 페이지에서 웹 앱에 Firebase 추가를 클릭합니다. 프로젝트에 앱이 이미 있으면 프로젝트 개요 페이지에서 앱 추가를 선택합니다.

  3. 페이지의 <head> 태그에서 프로젝트의 맞춤설정된 코드를 복사하여 다른 스크립트 태그 앞에 붙여넣습니다.

    아래는 초기화 코드 스니펫의 예제입니다.

복사를 클릭하고 코드를 애플리케이션 HTML에 붙여넣습니다. 코드 스니펫의 형태는 다음과 같습니다.

<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

이 스니펫에 인증, Cloud Storage, 실시간 데이터베이스, Cloud Firestore를 사용하도록 Firebase 자바스크립트 SDK를 구성하기 위한 초기화 정보가 포함되어 있습니다. 필요한 기능만 포함하면 앱의 코드 양을 줄일 수 있습니다. 개별적으로 설치 가능한 구성요소는 다음과 같습니다.

  • firebase-app - 핵심 firebase 클라이언트(필수)
  • firebase-auth - Firebase 인증(선택사항)
  • firebase-database - Firebase 실시간 데이터베이스(선택사항)
  • firebase-firestore - Cloud Firestore(선택사항)
  • firebase-storage - Cloud Storage(선택사항)
  • firebase-messaging - Firebase 클라우드 메시징(선택사항)
  • firebase-functions - Firebase용 Cloud Functions(선택사항)

CDN에서 필요한 개별 구성요소를 포함합니다. firebase-app을 맨 처음에 포함해야 합니다.

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Browserify 또는 webpack 등의 번들러를 사용하는 경우 사용하는 구성요소만 require()할 수 있습니다.

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

Firebase SDK는 npm으로도 제공됩니다. package.json 파일이 아직 없다면 npm init로 파일을 만듭니다. 그런 다음 firebase npm 패키지를 설치하고 package.json에 저장합니다.

$ npm install firebase --save

애플리케이션에서 모듈을 사용하려면 자바스크립트 파일에서 require로 가져옵니다.

var firebase = require("firebase");

ES2015를 사용하는 경우 import로 모듈을 가져올 수 있습니다.

import firebase from "firebase";

위에서 확인한 코드를 사용하여 Firebase SDK를 초기화합니다. 코드의 형태는 다음과 같습니다.

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Firebase 서비스 사용

Firebase App은 여러 Firebase 서비스를 사용할 수 있습니다. firebase 네임스페이스로 각 서비스에 액세스할 수 있습니다.

개별 서비스 사용 방법에 대한 문서는 각 서비스에서 확인하세요.

개발용 로컬 웹 서버 실행

웹 앱을 개발하는 경우 Firebase 자바스크립트 SDK의 특정 부분에서는 로컬 파일 시스템이 아닌 서버에서 웹 앱을 제공하도록 요구합니다. Firebase CLI에서 다음과 같이 로컬 서버를 실행할 수 있습니다.

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Firebase 호스팅을 사용하여 웹 앱 호스팅

정적 콘텐츠로만 구성된 웹 앱을 빌드하는 경우 Firebase 호스팅을 사용하여 손쉽게 배포할 수 있습니다.

Firebase 호스팅은 최신 프런트엔드 웹 애플리케이션을 위한 개발자 중심의 정적 웹 호스팅 서비스입니다. Firebase 호스팅을 사용하면 명령 한 번으로 SSL 지원 웹 앱을 글로벌 콘텐츠 전송 네트워크(CDN)의 자체 도메인에 배포할 수 있습니다.

SDK 가져오기 및 암시적 초기화

Firebase 호스팅으로 웹 앱을 호스팅하면 프로젝트 구성이 간편해집니다. 다음 코드 스니펫을 애플리케이션 HTML에 붙여넣어 Firebase SDK를 가져오고 앱이 호스팅되는 프로젝트에서 SDK를 자동으로 구성합니다.

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.9.1/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.9.1/firebase-auth.js"></script>
    <script src="/__/firebase/5.9.1/firebase-database.js"></script>
    <script src="/__/firebase/5.9.1/firebase-messaging.js"></script>
    <script src="/__/firebase/5.9.1/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.9.1/firebase-storage.js"></script> -->

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

여러 앱 초기화

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

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

사용 사례에 따라서는 여러 앱을 동시에 만들어야 할 수 있습니다. 예를 들어 Firebase 프로젝트 중 하나의 실시간 데이터베이스에서 데이터를 읽고 다른 프로젝트에 파일을 저장해야 하는 경우가 있습니다. 또는 여러 앱 중 하나만 인증해야 할 수 있습니다. Firebase SDK로 각각 고유한 구성 정보를 사용하여 여러 앱을 동시에 만들 수 있습니다.

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

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

// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

다음 단계

Firebase 알아보기:

앱에 Firebase 서비스 추가: