Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

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

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

기본 요건

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

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

자바스크립트 프로젝트가 준비되지 않았다면 빠른 시작 샘플 중 하나를 다운로드하여 Firebase 제품을 사용해 볼 수 있습니다.

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

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

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

2단계: Firebase에 앱 등록

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

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

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

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

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

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

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

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

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

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

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

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

Firebase는 원격 구성, FCM 등을 포함한 대부분의 Firebase 제품에 사용할 수 있는 자바스크립트 라이브러리를 제공합니다. 사용 가능한 라이브러리를 앱에 추가할 수 있습니다.

Firebase SDK를 웹 앱에 추가하는 방법은 앱에 Firebase 호스팅을 사용하도록 선택했는지 여부, 모듈 번들러와 같은 앱에서 사용 중인 도구, Node. js 앱 구성 여부에 따라 다릅니다. 이러한 대안 중에서 선택하는 데 도움이 필요한 경우 웹 SDK를 앱에 추가하는 방법을 참조하세요.

모듈식 앱 개발에 최적화된 새로운 베타 SDK를 사용해 보려면 버전 9(베타) 옵션을 선택하세요. 단, 베타 출시 버전에서는 기술 지원 의무가 없다는 점에 유의하세요.

npm 사용

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 제품(예: 인증 및 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";

  3. 앱에서 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의 각 라이브러리를 저장합니다.

  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/8.7.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.7.1/firebase-analytics.js"></script>

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


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

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

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

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.7.1/firebase-analytics.js"></script>

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


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

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

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></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 제품(예: 인증 및 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";

  3. 앱에서 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(명령줄 도구)를 사용하면 됩니다.

  1. CLI 설치 방법 또는 최신 CLI 버전으로 업데이트하는 방법을 알아보려면 Firebase CLI 문서를 참조하세요.

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

    firebase init

  3. 콘텐츠와 호스팅 구성을 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_ID",
    "public": "public",

    // ...
  }
}

    2. 사이트에 배포합니다. 앱의 디렉터리에서 다음 명령어를 실행합니다.

      firebase deploy --only hosting:SITE_ID

    3. 다음 사이트 중 하나에서 사용자의 사이트를 확인합니다.

      • SITE_ID.web.app
      • SITE_ID.firebaseapp.com

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

Firebase 자바스크립트 SDK는 다음 Firebase 제품을 지원합니다. 각 제품은 선택사항이며 표시된 메서드로 액세스할 수 있습니다.

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

Firebase 제품 네임스페이스(v8 이하) 웹 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 서비스 추가: