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

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

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

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

CDN에서 추가

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

특정 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/10.13.1/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.13.1/firebase-analytics.js'

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

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 앱

Firebase JavaScript SDK 설치:
1. 아직 package.json 파일이 없으면 JavaScript 프로젝트의 루트에서 다음 명령어를 실행하여 파일을 만듭니다.
```
npm init
```
2. 다음 명령어를 실행하여 firebase npm 패키지를 설치하고 package.json 파일에 저장합니다.
```
npm install --save firebase@10.13.1
```
다음 옵션 중 하나를 사용하여 앱에서 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");
```
  개별 SDK 대신 Firebase JavaScript SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).
  
  프로덕션 웹 앱에 SDK 전체를 로드하는 것은 비효율적입니다.
  개발 목적으로만 이 옵션을 사용하세요.
```
var firebase = require("firebase");
```
- 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";
```
  개별 SDK 대신 Firebase JavaScript SDK 전체를 포함합니다(프로덕션 앱에는 권장되지 않음).
  
  프로덕션 웹 앱에 SDK 전체를 로드하는 것은 비효율적입니다.
  개발 목적으로만 이 옵션을 사용하세요.
```
import firebase from "firebase";
```
  참고: Node.js에 import 구문을 직접 사용하는 것은 실험용이지만 Babel과 같은 컴파일러를 사용하여 CommonJS 형식(require 구문)으로 변환할 수 있습니다.

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);