JavaScript 프로젝트에 Firebase를 추가하는 다른 방법

대부분의 Firebase 웹 앱에서는 npm을 통한 SDK를 사용하는 것이 좋습니다. 그러나 Firebase는 특별한 요구사항이 있는 사용자를 위해 SDK를 추가할 수 있는 또 다른 방법을 제공합니다. 바로 아래와 같은 방법이며 이 페이지에서 자세한 설정 안내를 제공합니다.

  • CDN(콘텐츠 전송 네트워크)
  • Node.js 앱용 npm

이러한 메서드를 통해 사용 가능한 라이브러리를 앱에 추가할 수 있습니다.

CDN에서 추가

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

  1. 특정 Firebase 제품(예: Authentication 및 Cloud Firestore)만 포함하려면 <body> 태그 맨 아래에 다음 스크립트를 추가하세요. 단, Firebase 서비스를 사용하기 전에 진행해야 합니다.

    <body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js'
  </script>
</body>

  2. Firebase 구성 객체를 추가한 후 앱에서 Firebase를 초기화합니다.

    <body>
  <script type="module">
    // ...

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

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
</body>

Node.js 앱

  1. Firebase JavaScript SDK 설치:

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

      npm init

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

      npm install --save firebase@11.0.2

  2. 다음 옵션 중 하나를 사용하여 앱에서 Firebase 모듈을 사용합니다.

    • JavaScript 파일의 모듈을 require할 수 있습니다.

      특정 Firebase 제품(예: Authentication 및 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 제품(예: Authentication 및 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 구성 객체를 추가한 후 앱에서 Firebase를 초기화합니다.

    import { initializeApp } from 'firebase/app';

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

// Initialize Firebase
const app = initializeApp(firebaseConfig);