웹용 Firebase 이해

Firebase를 사용하여 웹 앱을 개발하다 보면 생소한 개념을 맞닥뜨리거나 프로젝트와 관련해 올바른 결정을 내리기 위해 추가 정보가 필요한 경우가 있습니다. 이 페이지는 이러한 상황에 대한 해결책을 제시하고 관련된 유용한 리소스를 안내합니다.

이 페이지에서 다루지 않은 주제와 관련해 궁금한 점이 있으면 온라인 커뮤니티를 방문하세요. 이 페이지에는 정기적으로 새로운 주제가 업데이트되므로 알아보려는 주제가 추가되었는지 추후에 다시 확인해 보세요.

SDK 버전: 네임스페이스화 및 모듈식

Firebase는 웹 앱에 두 가지 API 노출 영역을 제공합니다.

  • JavaScript - 네임스페이스화. Firebase에서 여러 해 동안 유지해 온 JavaScript 인터페이스로 이전 Firebase 앱을 사용하는 웹 개발자에게 익숙한 버전입니다. 네임스페이스화된 API는 새로운 기능 지원의 이점을 지속적으로 누리지 못하므로 대부분의 신규 앱은 대신 모듈식 API를 채택해야 합니다.
  • JavaScript - 모듈식. 이 SDK는 webpack이나 Rollup과 같은 최신 JavaScript 빌드 도구를 사용하여 SDK 크기를 줄이고 효율성을 높이는 모듈식 접근 방식을 기반으로 합니다.

모듈식 API는 앱에서 사용하지 않는 코드를 제거(이 과정을 '트리 쉐이킹'이라고 함)하는 빌드 도구와 원활하게 통합되며 이 SDK를 사용하여 앱을 빌드하면 크기를 상당히 줄일 수 있습니다. 네임스페이스화된 API도 모듈로 사용할 수는 있지만 엄격한 모듈식 구조가 아니며 크기 감소 효과가 떨어집니다.

모듈식 API의 대부분은 네임스페이스화된 API와 동일한 패턴을 따르지만 코드 구성에 차이가 있습니다. 일반적으로 네임스페이스화된 API는 네임스페이스와 서비스 패턴에 중점을 두는 반면 모듈식 API는 개별 함수에 중점을 둡니다. 예를 들어 firebaseApp.auth()와 같은 네임스페이스화된 API의 점 체이닝 방식은 모듈식 API에서 firebaseApp을 취하고 Authentication 인스턴스를 반환하는 단일 getAuth() 함수로 대체됩니다.

따라서 네임스페이스화된 API로 만든 웹 앱에서 모듈식 앱 디자인을 활용하려면 리팩터링이 필요합니다. 자세한 내용은 업그레이드 가이드를 참조하세요.

JavaScript - 새 앱을 위한 모듈식 API

Firebase와 새롭게 통합하려는 경우 SDK를 추가하고 초기화할 때 모듈식 API를 선택할 수 있습니다.

이 경우 앱을 개발할 때 코드가 함수를 중심으로 구성된다는 점에 유의하세요. 모듈식 API에서는 서비스가 첫 번째 인수로 전달되며, 함수는 이 서비스의 세부정보를 사용해 나머지 작업을 수행합니다. 예를 들면 다음과 같습니다.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

더 많은 예시를 비롯해 자세한 내용은 제품 영역별 가이드와 모듈식 API 참조 문서를 확인하세요.

웹 SDK를 앱에 추가하는 방법

Firebase는 Remote Config, FCM 등을 포함한 대부분의 Firebase 제품에 사용할 수 있는 자바스크립트 라이브러리를 제공합니다. 웹 앱에 Firebase SDK를 추가하는 방법은 모듈 번들러와 같은 앱에서 사용 중인 도구에 따라 다릅니다.

다음 지원되는 방법 중 하나를 통해 사용 가능한 라이브러리를 앱에 추가할 수 있습니다.

  • npm(모듈 번들러용)
  • CDN(콘텐츠 전송 네트워크)

자세한 설정 안내는 자바스크립트 앱에 Firebase 추가를 참조하세요. 이 섹션의 나머지 부분에서는 사용 가능한 옵션 중에서 어떤 옵션을 선택할지 결정하는 데 도움이 되는 정보를 제공합니다.

npm

Firebase npm 패키지(브라우저 및 Node.js 번들 포함)를 다운로드하면 Firebase SDK의 로컬 복사본이 제공됩니다(Node.js 앱, React Native 또는 Electron과 같은 비 브라우저 애플리케이션에 필요할 수 있음). 다운로드에는 일부 패키지에 대한 옵션으로 Node.js 및 React Native 번들이 포함됩니다. Node.js 번들은 SSR 프레임워크의 서버 측 렌더링(SSR) 단계에 필요합니다.

webpack 또는 Rollup과 같은 모듈 번들러와 함께 npm을 사용하면 미사용 코드를 '트리 쉐이킹'하고 타겟팅된 폴리필(polyfill)을 적용하여 앱의 사용 공간을 크게 줄일 수 있는 최적화 옵션이 제공됩니다. 이러한 기능을 구현하면 구성과 빌드 체인이 복잡해질 수 있지만 다양한 주요 CLI 도구로 복잡성을 줄일 수 있습니다. 이러한 도구로는 Angular, React, Vue, Next 등이 있습니다.

요약하면 다음과 같습니다.

  • 유용한 앱 크기 최적화 제공
  • 모듈을 관리할 수 있는 강력한 도구 제공
  • Node.js의 경우 SSR에 필요

CDN(콘텐츠 전송 네트워크)

Firebase의 CDN에 저장된 라이브러리를 추가하는 것은 많은 개발자에게 익숙한 간단한 SDK 설정 방법입니다. CDN을 사용하여 SDK를 추가하면 빌드 도구가 필요 없으며 빌드 체인이 모듈 번들러로 작업하는 것에 비해 훨씬 간단하고 쉬울 수 있습니다. 특히 앱의 설치 크기가 중요하지 않고 TypeScript에서 트랜스파일링하는 등의 별도 요구사항이 없는 경우에는 CDN을 선택하는 것이 좋습니다.

요약하면 다음과 같습니다.

  • 익숙하고 간단한 방법
  • 앱 크기가 큰 문제가 아닌 경우 적합
  • 웹사이트에서 빌드 도구를 사용하지 않는 경우 적합

Firebase 웹 SDK 변형

Firebase의 웹 SDK는 브라우저와 노드 애플리케이션 모두에서 사용할 수 있습니다. 그러나 노드 환경에서는 사용할 수 없는 제품이 몇 가지 있습니다. 지원되는 환경 목록을 참조하세요.

일부 제품 SDK는 별도의 브라우저 및 노드 변형을 제공하며 각각 ESM 및 CJS 형식으로 제공되며 일부 제품 SDK는 Cordova 또는 React Native 변형을 제공하기도 합니다. 웹 SDK는 도구 구성이나 환경에 따라 올바른 변형을 제공하도록 구성되며 대부분의 경우 수동 선택이 필요하지 않습니다. 모든 SDK 변형은 Node.js 데스크톱 또는 IoT 애플리케이션과 같이 최종 사용자의 액세스를 위한 웹 앱 또는 클라이언트 앱을 빌드하는 데 도움이 되도록 설계되었습니다. 권한이 있는 환경(예: 서버)에서 관리 액세스를 설정하는 것이 목표라면 대신 Firebase Admin SDK를 사용하세요.

번들러 및 프레임워크를 사용한 환경 감지

npm을 사용하여 Firebase 웹 SDK를 설치하면 자바스크립트 및 Node.js 버전이 모두 설치됩니다. 이 패키지는 애플리케이션에 적합한 번들을 사용 설정할 수 있는 자세한 환경 감지를 제공합니다.

코드에서 Node.js require 문을 사용하면 SDK가 노드에 맞는 번들을 찾습니다. 그렇지 않은 경우 package.json 파일의 올바른 진입점 필드(예: main, browser 또는 module)를 감지하도록 번들러 설정을 올바르게 구성해야 합니다. SDK에서 런타임 오류가 발생하면 번들러가 현재 환경에 맞는 번들 유형에 우선순위를 부여하도록 구성되었는지 확인하세요.

Firebase 구성 객체 알아보기

앱에서 Firebase를 초기화하려면 앱의 Firebase 프로젝트 구성을 제공해야 합니다. 언제든지 Firebase 구성 객체를 가져올 수 있습니다.

  • 구성 객체, 특히 apiKey, projectId, appID 등의 필수 'Firebase 옵션'은 수동으로 편집하지 않는 것이 좋습니다. 이러한 필수 'Firebase 옵션'에 대해 유효하지 않거나 누락된 값으로 앱을 초기화하면 앱 사용자에게 심각한 문제가 발생할 수 있습니다. authDomain은 예외이며 signInWithRedirect 사용 권장사항에 따라 업데이트할 수 있습니다.

  • Firebase 프로젝트에서 Google Analytics를 사용 설정하면 구성 객체에 measurementId 필드가 포함됩니다. 이 필드에 대한 자세한 내용은 Analytics 시작하기 페이지를 참조하세요.

  • Firebase 웹 앱을 만든 후 Google Analytics 또는 Realtime Database를 사용 설정하는 경우 앱에서 사용하는 Firebase 구성 객체가 연결된 구성 값(각각 measurementId 및 databaseURL)으로 업데이트되어야 합니다. 언제든지 Firebase 구성 객체를 가져올 수 있습니다.

다음은 모든 서비스가 사용 설정된 구성 객체의 형식입니다. 이러한 값은 자동으로 입력됩니다.

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

사용 가능한 라이브러리

추가 설정 옵션

Firebase SDK의 로드 지연(CDN에서 추가)

전체 페이지가 로드될 때까지 Firebase SDK 포함을 지연시킬 수 있습니다. <script type="module">과 함께 모듈식 API CDN 스크립트를 사용하는 경우 기본 동작입니다. 네임스페이스화된 CDN 스크립트를 모듈로 사용하는 경우 다음 단계를 완료하여 로드를 지연하세요.

  1. 먼저 Firebase SDK의 각 script 태그에 defer 플래그를 추가한 후 두 번째 스크립트를 사용하여 Firebase 초기화를 지연시킵니다. 예를 들면 다음과 같습니다.

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. init-firebase.js 파일을 만든 후 파일에 다음을 포함시킵니다.

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

단일 앱에서 여러 Firebase 프로젝트 사용

대부분의 경우 기본 앱 하나에서만 Firebase를 초기화하면 됩니다. 이 앱을 통해 아래의 두 가지 방법 중 하나로 Firebase에 액세스할 수 있습니다.

Web

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

간혹 동시에 여러 Firebase 프로젝트에 액세스해야 하는 경우가 있습니다. 예를 들어 한 Firebase 프로젝트의 데이터베이스에서 데이터를 읽어 다른 Firebase 프로젝트에 파일을 저장해야 할 수 있습니다. 또는 두 번째 프로젝트를 인증되지 않은 상태로 유지하면서 한 프로젝트를 인증해야 할 수도 있습니다.

Firebase JavaScript SDK를 사용하면 단일 앱에서 여러 Firebase 프로젝트를 동시에 초기화하고 사용할 수 있으며, 이 때 각 프로젝트에서는 자체 Firebase 구성 정보를 사용합니다.

Web

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

개발용 로컬 웹 서버 실행

웹 앱을 빌드하는 경우, Firebase JavaScript SDK의 특정 부분에서는 로컬 파일 시스템이 아닌 서버에서 웹 앱을 제공하도록 요구합니다. 이 경우 Firebase CLI를 사용하여 로컬 서버를 실행할 수 있습니다.

앱에 Firebase Hosting을 설정했다면 다음 단계 중 일부는 이미 완료된 상태일 수 있습니다.

웹 앱을 제공하려면 Firebase CLI(명령줄 도구)를 사용하면 됩니다.

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

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

    firebase init

  3. 개발용 로컬 서버를 시작합니다. 로컬 앱 디렉터리의 루트에서 다음 명령어를 실행합니다.

    firebase serve

Firebase 자바스크립트 SDK용 오픈소스 리소스

Firebase는 오픈소스 개발을 지원하며 커뮤니티 참여와 의견 제공을 권장합니다.

Firebase 자바스크립트 SDK

대부분의 Firebase 자바스크립트 SDK는 공개 Firebase GitHub 저장소의 오픈소스 라이브러리로 개발됩니다.

빠른 시작 샘플

Firebase는 웹용 Firebase API 대부분에 대한 빠른 시작 샘플 모음을 유지관리합니다. 공개 Firebase GitHub 빠른 시작 저장소에서 이러한 빠른 시작을 찾아보세요. Firebase SDK를 사용하기 위한 예시 코드로 이 빠른 시작을 사용할 수 있습니다.