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

대부분의 Firebase 웹 앱의 경우 npm을 통해 SDK 버전 9를 사용하는 것이 좋습니다. 그러나 특별한 요구사항이 있는 사용자를 위해 Firebase는 SDK를 추가하는 대체 방법을 제공합니다. 이 페이지에서는 이러한 대체 방법에 대한 자세한 설정 지침을 제공합니다.

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

이러한 방법을 사용하여 버전 9에 사용 가능한 라이브러리 를 앱에 추가할 수 있습니다.

CDN에서

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

  1. 특정 Firebase 제품 (예: 인증 및 Cloud Firestore)만 포함하려면 Firebase 서비스를 사용하기 전에 <body> 태그 하단에 다음 스크립트를 추가하세요.

    <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/9.8.4/firebase-app.js'
    
        // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
        import { analytics } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { auth } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js'
        import { firestore } from 'https://www.gstatic.com/firebasejs/9.8.4/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@9.8.4
  2. 다음 옵션 중 하나를 사용하여 앱에서 Firebase 모듈을 사용하세요.

    • 모든 JavaScript 파일에서 모듈을 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 구성 객체를 추가한 다음 앱에서 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);