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

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

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

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

CDN에서 추가

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

  1. 특정 Firebase 제품(예: 인증 및 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/10.4.0/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/10.4.0/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { getAuth } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js'
        import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.4.0/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@10.4.0
  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);