Catch up on everthing we announced at this year's Firebase Summit. Learn more

웹 및 Firebase에 대해 자세히 알아보기

Firebase를 사용하여 웹 앱을 개발할 때 익숙하지 않은 개념이나 프로젝트에 대한 올바른 결정을 내리기 위해 추가 정보가 필요한 영역을 접할 수 있습니다. 이 페이지는 이러한 질문에 답하거나 더 자세히 알아볼 수 있는 리소스를 안내하는 것을 목표로 합니다.

이 페이지에서 다루지 않은 주제에 대한 문의 사항이있는 경우 중 하나를 방문 온라인 커뮤니티를 . 우리는 또한 이 페이지를 새로운 주제로 주기적으로 업데이트할 것이므로 배우고 싶은 주제가 추가되었는지 다시 확인하십시오.

SDK 버전 8 및 9

Firebase는 웹 앱을 위한 두 가지 SDK 버전을 제공합니다.

  • 버전 8이는 중포 기지는 몇 년 동안 유지 기존 중포 기지 애플리케이션과 웹 개발자에게 친숙한 것을 자바 스크립트 인터페이스입니다. Firebase는 한 번의 주요 릴리스 주기 후에 이 버전에 대한 지원을 제거하므로 새 앱은 대신 버전 9를 채택해야 합니다.
  • 모듈 형 버전 9. 이 SDK는 다음과 같은 현대적인 자바 스크립트 빌드 도구와 SDK 크기와 효율성을 감소 제공하는 모듈 방식 도입 웹팩 또는 롤업을 .

버전 9는 "트리 쉐이킹"으로 알려진 프로세스인 앱에서 사용되지 않는 코드를 제거하는 빌드 도구와 잘 통합됩니다. 이 SDK로 빌드된 앱은 크기가 크게 감소한 이점이 있습니다. 버전 8은 모듈로 사용할 수 있지만 엄격한 모듈식 구조가 아니며 동일한 정도의 크기 축소를 제공하지 않습니다.

버전 9 SDK의 대부분은 버전 8과 동일한 패턴을 따르지만 코드 구성은 다릅니다. 일반적으로 버전 8은 네임스페이스 및 서비스 패턴을 지향하는 반면 버전 9는 개별 기능을 지향합니다. 예를 들어, 버전 8의 점은 체인과 같은 firebaseApp.auth() , 하나의 버전에 의해 대체된다 9 getAuth() 필요 기능 firebaseApp 복귀에 인증 인스턴스.

즉, 버전 8 이하로 만든 웹 앱은 버전 9의 모듈식 접근 방식을 활용하기 위해 리팩토링이 필요합니다. Firebase는 이러한 전환을 용이하게 하기 위해 호환 라이브러리를 제공합니다. 투시 업그레이드 가이드 자세한 내용을.

무엇을 지원합니까?

버전 8과 버전 9는 코드 스타일이 다르지만 Firebase 기능 및 옵션에 대해 매우 유사한 지원을 제공합니다. 이 가이드에서 자세히 설명하겠지만 두 SDK 버전 모두 SDK 추가/설치를 위한 여러 옵션과 함께 JavaScript 및 Node.js 변형을 지원합니다.

다음을 사용하여 SDK 추가 8.0(네임스페이스) 9.0(모듈식)
npm
  • 자바스크립트의 경우
  • Node.js의 경우
  • 자바스크립트의 경우
  • Node.js의 경우
CDN(콘텐츠 전송 네트워크)
  • 자바스크립트의 경우
  • 자바스크립트의 경우
호스팅 URL
  • 자바스크립트의 경우
  • Node.js의 경우

자세한 내용은 방법은 앱에 웹 SDK를 추가 하고 중포 기지 웹 SDK는 변형 이 페이지에 나중에.

새 앱용 버전 9

당신이 중포 기지와 새로운 통합을 시작하는 경우 당신이 때, 당신은 버전 9 SDK로 선택할 수 있습니다 추가하고 SDK를 초기화 .

앱을 개발할 때, 코드를 기능 중심으로 주로 구성됩니다 것을 명심하십시오. 버전 9에서는 서비스가 첫 번째 인수로 전달되고 함수는 서비스의 세부 정보를 사용하여 나머지를 수행합니다. 예를 들어:

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

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

더 많은 예제와 자세한 내용은 각 제품 영역에 대한 가이드뿐만 아니라 참조 버전 9 참조 문서를 .

앱에 웹 SDK를 추가하는 방법

Firebase는 원격 구성, FCM 등을 포함한 대부분의 Firebase 제품에 대한 JavaScript 라이브러리를 제공합니다. 웹 앱에 Firebase SDK를 추가하는 방법은 앱과 함께 사용하는 도구(예: 모듈 번들러) 또는 앱이 Node.js와 같은 비 브라우저 환경에서 실행되는지 여부에 따라 다릅니다.

당신은 어떤 추가 할 수 있습니다 가능한 라이브러리를 지원되는 방법 중 하나를 통해 앱 :

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

자세한 설치 지침은 자바 스크립트 응용 프로그램에 중포 기지를 추가합니다 . 이 섹션의 나머지 부분에는 사용 가능한 옵션 중에서 선택하는 데 도움이 되는 정보가 포함되어 있습니다.

npm

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

같은 들러 모듈로 NPM을 사용 웹팩 또는 롤업은 "나무가 흔들"사용하지 않는 코드에 최적화 옵션을 제공하고 크게 응용 프로그램의 크기의 풋 프린트를 줄일 수 있습니다 대상 polyfills을 적용합니다. 이러한 기능을 구현하면 구성 및 빌드 체인에 약간의 복잡성이 추가될 수 있지만 다양한 주류 CLI 도구가 이를 완화하는 데 도움이 될 수 있습니다. 이 도구는 다음과 각도 , 반작용 , , 다음 , 그리고 다른 사람을.

요약해서 말하자면:

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

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

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

요약해서 말하자면:

  • 익숙하고 단순한
  • 앱 크기가 주요 관심사가 아닌 경우에 적합
  • 웹 사이트에서 빌드 도구를 사용하지 않을 때 적합합니다.

Firebase 웹 SDK 변형

현재 Firebase는 두 가지 웹 SDK 변형을 제공합니다.

  • 브라우저에서 사용할 모든 Firebase 기능을 지원하는 JavaScript 번들입니다.
  • 전부는 아니지만 많은 Firebase 기능을 지원하는 클라이언트 측 Node.js 번들입니다. 목록보기 지원되는 환경을 .

이러한 SDK 변형은 모두 Node.js 데스크톱 또는 IoT 애플리케이션과 같은 최종 사용자 액세스를 위한 웹 앱 또는 클라이언트 앱을 빌드하는 데 도움이 되도록 설계되었습니다. 당신의 목표는 사용 (예 : 서버) 특권 환경에서 관리 액세스 권한을 설정하는 경우 중포 기지 관리 SDK를 대신.

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

npm을 사용하여 Firebase 웹 SDK를 설치하면 JavaScript 및 Node.js 버전이 모두 설치됩니다. 패키지는 애플리케이션에 적합한 번들을 활성화하기 위한 상세한 환경 감지 기능을 제공합니다.

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

Firebase 구성 객체에 대해 알아보기

앱에서 Firebase를 초기화하려면 앱의 Firebase 프로젝트 구성을 제공해야 합니다. 당신은 할 수 귀하의 중포 기지의 구성 오브젝트를 취득 언제든지.

  • : 우리는 수동으로 특히 다음과 같은 필수 "중포 기지 옵션", 당신의 구성 객체 편집하지 않는 것이 좋습니다 apiKey , projectIdappID . 이러한 필수 "Firebase 옵션"에 대해 유효하지 않거나 누락된 값으로 앱을 초기화하면 앱 사용자에게 심각한 문제가 발생할 수 있습니다.

  • 당신이 당신의 중포 기지 프로젝트에서 Google 웹 로그 분석을 사용하도록 설정 한 경우, 사용자의 설정 객체는 필드 포함 measurementId . 에서이 분야에 대해 자세히 알아보기 시작 페이지를 얻는 웹 로그 분석을 .

다음은 모든 서비스가 활성화된 구성 개체의 형식입니다(이 값은 자동으로 채워짐).

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

사용 가능한 라이브러리

추가 설정 옵션

Firebase SDK 로드 지연(CDN에서)

전체 페이지가 로드될 때까지 Firebase SDK 포함을 지연할 수 있습니다. 당신이 버전 9 CDN 스크립트를 사용하는 경우 <script type="module"> 이 기본 동작입니다. 버전 8 CDN 스크립트를 모듈로 사용하는 경우 다음 단계를 완료하여 로드를 연기하십시오.

  1. 추가 defer 각 플래그를 script 다음 예를 들어, 두 번째 스크립트를 사용하여 중포 기지의 초기화를 연기는 중포 기지 SDK (소프트웨어 개발 도구)에 대한 태그 :

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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에 액세스할 수 있습니다.

웹 버전 9

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

웹 버전 8

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

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

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

웹 버전 9

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

웹 버전 8

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

개발용 로컬 웹 서버 실행

웹 앱을 빌드하는 경우 Firebase JavaScript SDK의 일부에서는 로컬 파일 시스템이 아닌 서버에서 웹 앱을 제공해야 합니다. 당신은 사용할 수 있습니다 중포 기지 CLI를 로컬 서버를 실행합니다.

앱에 Firebase 호스팅을 이미 설정했다면 아래 단계 중 몇 가지를 이미 완료했을 수 있습니다.

웹 앱을 제공하기 위해 명령줄 도구인 Firebase CLI를 사용합니다.

  1. 하는 방법을 배울 수있는 중포 기지 CLI 설명서를 방문 CLI를 설치 하거나 최신 버전으로 업데이트를 .

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

    firebase init

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

    firebase serve

Firebase JavaScript SDK용 오픈 소스 리소스

Firebase는 오픈 소스 개발을 지원하며 커뮤니티 기여와 피드백을 권장합니다.

Firebase 자바스크립트 SDK

대부분의 중포 기지 자바 스크립트 SDK를 우리의 공공 장소에서 오픈 소스 라이브러리로 개발 중포 기지 GitHub의 저장소 .

빠른 시작 샘플

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