콘솔로 이동

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

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

시작하기 전에

  • 원하는 편집자 또는 IDE를 설치합니다.

  • 자바스크립트 프로젝트(웹 또는 Node.js)를 엽니다.

  • Google 계정을 사용하여 Firebase에 로그인합니다.

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

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

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

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

2단계: Firebase 구성 객체 가져오기

이 가이드의 각 구성 단계에서는 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",
};

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

3단계: Firebase를 사용할 수 있도록 앱 구성

웹 앱 또는 Node.js 앱이 Firebase를 사용할 수 있도록 구성할 수 있습니다.

WEB NODE.JS

웹 앱 구성

자바스크립트 웹 앱에서 Firebase를 사용할 수 있도록 구성하려면 다음 옵션 중 하나를 따릅니다.

옵션 1: CDN에서 암묵적으로 특정 SDK 추가

Firebase 자바스크립트 SDK를 부분적으로 가져와 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다.

Firebase는 Google의 글로벌 CDN(콘텐츠 전송 네트워크)에 Firebase 자바스크립트 SDK의 각 라이브러리를 저장합니다.

예를 들어 인증 및 실시간 데이터베이스만 포함하려면 앱의 body 태그 내에 다음과 같은 script 태그를 사용합니다.

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

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

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


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

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

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

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.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 SDK(CDN에서 암묵적으로)
Firebase 제품 라이브러리 참조
Firebase core
(필수항목)

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
인증

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
Firebase용 Cloud Functions 클라이언트 SDK

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
클라우드 메시징

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
실시간 데이터베이스

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

옵션 2: 특정 SDK를 번들로 포함하거나 동적으로 로드

Firebase 자바스크립트 SDK를 부분적으로 가져와 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다.

번들러(예: Browserify 또는 webpack)를 사용하는 경우, Firebase 제품을 필요할 때 개별적으로 import할 수 있습니다.

  1. Firebase 자바스크립트 SDK를 설치합니다.

    1. 아직 package.json 파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.

      npm init
    2. 다음 명령어를 실행하여 firebase npm 패키지를 설치하고 package.json 파일에 저장합니다.

      npm install --save firebase
  2. 앱에서 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/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
자바스크립트 앱에 사용할 수 있는 Firebase SDK(import 모듈)
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";
실시간 데이터베이스 import "firebase/database";

옵션 3: Firebase 자바스크립트 SDK 전체 추가

Firebase 자바스크립트 SDK 전체를 로드하려면 앱의 body 태그 내에 다음과 같은 script 태그를 사용합니다.

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

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

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

Node.js 앱 구성

  1. Firebase 자바스크립트 SDK를 설치합니다.

    1. 아직 package.json 파일이 없으면 자바스크립트 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.

      npm init
    2. 다음 명령어를 실행하여 firebase npm 패키지를 설치하고 package.json 파일에 저장합니다.

      npm install --save firebase
  2. 앱에서 Firebase 모듈을 사용합니다. 다음 옵션 중 하나를 사용합니다.

    • 자바스크립트 파일의 모듈을 require할 수 있습니다.

      • 사용할 Firebase 제품(예: 인증 및 실시간 데이터베이스)만 포함하려면 다음 명령어를 실행합니다.

        // 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/database");
        
      • Firebase 자바스크립트 SDK 전체를 포함하려면 다음 명령어를 실행합니다.

        var firebase = require("firebase");
    • ES2015를 사용하여 모듈 import를 수행할 수 있습니다.

      • 사용할 Firebase 제품(예: 인증 및 실시간 데이터베이스)만 포함하려면 다음 명령어를 실행합니다.

        // 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/database";
        
      • Firebase 자바스크립트 SDK 전체를 포함하려면 다음 명령어를 실행합니다.

        import firebase from "firebase";
  3. 앱에서 Firebase를 초기화합니다.

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
자바스크립트 앱에 사용할 수 있는 Firebase SDK(Node.js용 모듈)
Firebase 제품 라이브러리 모듈
Firebase core(필수) "firebase/app"
인증 "firebase/auth"
Cloud Firestore "firebase/firestore"
Firebase용 Cloud Functions 클라이언트 SDK "firebase/functions"
실시간 데이터베이스 "firebase/database"

4단계: 앱에서 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()
실시간 데이터베이스 firebase.database()

추가 설정 옵션

단일 앱에서 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 defaultDatabase = defaultProject.database();

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

간혹 동시에 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 defaultDatabase = firebase.database();

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

개발용 로컬 웹 서버 실행

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

  1. Firebase CLI를 설치합니다.

    컴퓨터의 아무 곳에서나 다음 명령어를 실행합니다.

    npm install -g firebase-tools
  2. 로컬 앱 디렉토리를 Firebase에 연결하고 firebase.json 파일을 생성합니다(Firebase 호스팅에 필요함).

    로컬 앱 디렉토리의 루트에서 다음 명령어를 실행합니다.

    firebase init

    초기화 중에 공개 정적 파일이 포함된 디렉토리(공개 루트 디렉토리)를 지정하라는 메시지가 표시됩니다. Firebase가 찾는 디렉토리의 기본 이름은 'public'입니다. 나중에 firebase.json 파일을 직접 수정하여 공개 디렉토리를 설정할 수도 있습니다.

  3. 개발용 로컬 서버를 시작합니다.

    로컬 앱 디렉토리의 루트에서 다음 명령어를 실행합니다.

    firebase serve

예약된 URL에서 SDK 로드

Firebase 호스팅으로 웹 앱을 호스팅하고 있는 경우 앱이 예약된 URL에서 Firebase 자바스크립트 SDK 라이브러리를 동적으로 로드하도록 구성할 수 있습니다.

이 설정 옵션을 사용하면 Firebase에 배포한 후 앱이 배포된 Firebase 프로젝트에서 Firebase 구성 객체를 자동으로 가져옵니다. 동일한 코드베이스를 여러 Firebase 프로젝트에 배포할 수 있지만 firebase.initializeApp()에 사용 중인 Firebase 구성을 추적할 필요는 없습니다.

웹 앱을 로컬에서 테스트할 때에도 이 예약된 URL 설정 옵션을 사용할 수 있습니다.

예를 들어 인증 및 실시간 데이터베이스만 포함하려면 앱의 body 태그 내에 다음과 같은 script 태그를 사용합니다.

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

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

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
자바스크립트 앱에 사용할 수 있는 Firebase SDK(예약된 URL)
Firebase 제품 라이브러리 참조(예약된 URL)
Firebase core
(필수항목)

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
인증

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
Firebase용 Cloud Functions 클라이언트 SDK

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
클라우드 메시징

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
실시간 데이터베이스

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
Firebase 자바스크립트 SDK
(전체 SDK)

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

이 설정 옵션에 대한 자세한 내용은 호스팅 문서를 참조하세요.

다음 단계

Firebase 알아보기:

앱에 Firebase 서비스 추가: