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

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

시작하기 전에

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

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

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

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

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

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

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

2단계: 앱 등록

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

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

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

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

  2. 앱의 닉네임을 입력합니다.

    닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다.

  3. (선택사항) 웹 앱의 Firebase 호스팅을 설정합니다.

    • Firebase 호스팅을 지금 설정하거나 나중에 설정할 수 있습니다. 언제든지 프로젝트 설정에서 호스팅 사이트에 Firebase 웹 앱을 연결할 수도 있습니다.

    • 호스팅을 지금 설정하도록 선택한 경우 Firebase 웹 앱에 연결할 사이트를 드롭다운 목록에서 선택합니다.

      • 이 목록에는 프로젝트의 기본 호스팅 사이트 및 프로젝트에 설정된 다른 사이트가 표시됩니다.

      • Firebase 웹 앱에 이미 연결된 사이트는 추가 연결에 사용할 수 없습니다. 각 호스팅 사이트는 단일 Firebase 웹 앱에만 연결할 수 있습니다.

  4. 앱 등록을 클릭합니다.

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 구성을 추적할 필요는 없습니다.

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

  1. 특정 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>
    


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

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

CDN에서 추가

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

  1. 특정 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/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>
    


  2. 앱에서 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할 수 있습니다.

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

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

      npm init

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

      npm install --save firebase

  2. 특정 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";
    
  3. 앱에서 Firebase를 초기화합니다.

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

Node.js 앱

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

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

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

      npm install --save firebase
  2. 다음 옵션 중 하나를 사용하여 앱에서 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 * as firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. 앱에서 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 호스팅 사이트에 연결한 경우 사이트의 콘텐츠와 구성을 지금(웹 앱을 설정할 때) 배포하거나 나중에 언제든지 배포할 수 있습니다.

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

    컴퓨터의 어느 곳에서든 다음 npm 명령어를 실행합니다.

    npm install -g firebase-tools
  2. Google에 로그인합니다. 다음 명령어를 실행합니다.

    firebase login

    이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.

  3. Firebase 프로젝트를 초기화합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.

    firebase init

    이 초기화 명령어는 다음을 수행합니다.

    • 로컬 앱 디렉터리를 Firebase에 연결합니다.
    • Firebase 호스팅에 필요한 firebase.json 파일을 생성합니다.
    • 공개 정적 파일이 포함된 공개 루트 디렉터리(HTML, CSS, JS 등)를 지정하라는 메시지를 표시합니다.

      Firebase가 찾는 디렉터리의 기본 이름은 'public'입니다. 나중에 firebase.json 파일을 직접 수정하여 공개 디렉터리를 설정할 수도 있습니다.

  4. 콘텐츠와 호스팅 구성을 Firebase 호스팅에 배포합니다.

    기본 호스팅 사이트

    기본적으로 모든 Firebase 프로젝트에는 web.appfirebaseapp.com 도메인(project-id.web.appproject-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()

사용 가능한 라이브러리

추가 설정 옵션

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

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

  1. 먼저 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>
    
  2. 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 호스팅을 설정했다면 다음 단계 중 일부는 이미 완료된 상태일 수 있습니다.

  1. Firebase CLI를 설치하거나 업데이트합니다. 컴퓨터의 어느 곳에서든 다음 npm 명령어를 실행합니다.

    npm install -g firebase-tools
  2. Google에 로그인합니다. 다음 명령어를 실행합니다.

    firebase login

    이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.

  3. Firebase 프로젝트를 초기화합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.

    firebase init

    이 초기화 명령어는 다음을 수행합니다.

    • 로컬 앱 디렉터리를 Firebase에 연결합니다.
    • Firebase 호스팅에 필요한 firebase.json 파일을 생성합니다.
    • 공개 정적 파일이 포함된 공개 루트 디렉터리(HTML, CSS, JS 등)를 지정하라는 메시지를 표시합니다.

      Firebase가 찾는 디렉터리의 기본 이름은 'public'입니다. 나중에 firebase.json 파일을 직접 수정하여 공개 디렉터리를 설정할 수도 있습니다.

  4. 개발용 로컬 서버를 시작합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.

    firebase serve

다음 단계

Firebase 알아보기:

앱에 Firebase 서비스 추가: