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

버전 8에서 모듈식 웹 SDK로 업그레이드

현재 Firebase 웹 SDK 버전 8 이하를 사용하는 앱은 이 가이드의 지침에 따라 버전 9로 마이그레이션하는 것을 고려해야 합니다.

이 가이드는 같은 들러 모듈을 활용할 것임을 버전 8을 잘 알고 있다고 가정하고 웹팩 또는 롤업 업그레이드 및 지속적인 버전 9 개발을위한.

개발 환경에서 모듈 번들러를 사용하는 것이 좋습니다. 하나를 사용하지 않으면 축소된 앱 크기에서 버전 9의 주요 이점을 활용할 수 없습니다. 당신은해야합니다 NPM 또는 실을 SDK를 설치합니다.

이 가이드의 업그레이드 단계는 인증 및 Cloud Firestore SDK를 사용하는 가상의 웹 앱을 기반으로 합니다. 예제를 통해 지원되는 모든 Firebase 웹 SDK를 업그레이드하는 데 필요한 개념과 실제 단계를 마스터할 수 있습니다.

호환 라이브러리 정보

Firebase 웹 SDK 버전 9에는 두 가지 유형의 라이브러리를 사용할 수 있습니다.

  • 모듈 형 - 트리 흔드는 (사용되지 않는 코드 제거)을 촉진하기 위해 설계된 새로운 API 표면은 작고 가능한 한 빨리 귀하의 웹 응용 프로그램을 만들 수 있습니다.
  • (호환) - 당신이 한 번에 중포 기지의 모든 코드를 변경하지 않고 버전 9로 업그레이드 할 수 있도록, 버전 8 SDK와 완벽하게 호환됩니다 익숙한 API 표면. Compat 라이브러리는 버전 8에 비해 크기나 성능상의 이점이 거의 또는 전혀 없습니다.

이 가이드에서는 업그레이드를 용이하게 하기 위해 버전 9 호환 라이브러리를 활용할 것이라고 가정합니다. 이러한 라이브러리를 사용하면 버전 9용으로 리팩터링된 코드와 함께 버전 8 코드를 계속 사용할 수 있습니다. 즉, 업그레이드 프로세스를 진행하면서 앱을 더 쉽게 컴파일하고 디버그할 수 있습니다.

Firebase 웹 SDK에 대한 노출이 매우 적은 앱(예: 인증 API에 대한 간단한 호출만 수행하는 앱)의 경우 버전 9 호환 라이브러리를 사용하지 않고 버전 8 코드를 리팩터링하는 것이 실용적일 수 있습니다. 이러한 앱을 업그레이드하는 경우 호환 라이브러리를 사용하지 않고 "버전 9 모듈식"에 대한 이 가이드의 지침을 따를 수 있습니다.

업그레이드 프로세스 정보

업그레이드 프로세스의 각 단계는 앱의 소스 편집을 완료한 다음 손상 없이 컴파일하고 실행할 수 있도록 범위가 지정됩니다. 요약하면 앱을 업그레이드하기 위해 수행할 작업은 다음과 같습니다.

  1. 버전 9 라이브러리와 호환 라이브러리를 앱에 추가합니다.
  2. 코드의 import 문을 v9 호환으로 업데이트합니다.
  3. 단일 제품(예: 인증)에 대한 코드를 모듈식 스타일로 리팩터링합니다.
  4. 선택 사항: 이 시점에서 계속하기 전에 인증에 대한 앱 크기 이점을 실현하기 위해 인증에 대한 인증 호환 라이브러리 및 호환 코드를 제거합니다.
  5. 각 제품(예: Cloud Firestore, FCM 등)에 대한 기능을 모듈식 스타일로 리팩터링하고 모든 영역이 완료될 때까지 컴파일 및 테스트합니다.
  6. 초기화 코드를 모듈식 스타일로 업데이트합니다.
  7. 앱에서 나머지 버전 9 compat 문과 compat 코드를 모두 제거합니다.

버전 9 SDK 다운로드

시작하려면 npm을 사용하여 버전 9 라이브러리와 호환 라이브러리를 가져옵니다.

npm i firebase@9.5.0

# OR

yarn add firebase@9.5.0

v9 호환으로 가져오기 업데이트

종속성을 v8에서 v9 베타로 업데이트한 후에도 코드가 계속 작동하도록 하려면 각 가져오기의 "호환" 버전을 사용하도록 가져오기 문을 변경하십시오. 예를 들어:

이전: 버전 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

이후: 버전 9 호환

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

모듈식 스타일로 리팩토링

버전 8 API를 점 체인 네임 스페이스와 서비스 패턴을 기반으로하고 있지만, 버전 9의 모듈 식 접근 수단이 코드는 기능 중심으로 주로 구성됩니다. 버전 9에서 firebase/app 패키지와 다른 패키지는 패키지의 모든 메소드를 포함하는 포괄적 인 수출을 반환하지 않습니다. 대신 패키지는 개별 기능을 내보냅니다.

버전 9에서는 서비스가 첫 번째 인수로 전달되고 함수는 나머지를 수행하기 위해 서비스의 세부 정보를 사용합니다. 인증 및 Cloud Firestore API에 대한 호출을 리팩터링하는 두 가지 예시에서 이것이 어떻게 작동하는지 살펴보겠습니다.

예 1: 인증 함수 리팩토링

이전: 버전 9 호환

버전 9 호환 코드는 버전 8 코드와 동일하지만 가져오기가 변경되었습니다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

이후: 버전 9 모듈식

getAuth 기능은 얻어 firebaseApp 첫번째 파라미터로. onAuthStateChanged 함수로부터 묶여 있지 않은 auth 이 버전 8되는 바와 같이 인스턴스; 대신, 필요 무료 함수의 auth 의 첫 번째 매개 변수로는.

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

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

예시 2: Cloud Firestore 함수 리팩토링

이전: 버전 9 호환

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

이후: 버전 9 모듈식

getFirestore 기능은 얻어 firebaseApp 으로부터 반환 된 첫번째 파라미터로 initializeApp 이전 예에서. 쿼리를 구성하는 코드가 버전 9에서 어떻게 매우 다른지 주목하십시오. 거기에는 체인이 없으며, 같은 방법 query 또는 where 지금 무료 함수로 노출되어있다.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

예 3: 버전 8 및 버전 9 코드 스타일 결합

업그레이드 중에 호환 라이브러리를 사용하면 버전 9용으로 리팩터링된 코드와 함께 버전 8 코드를 계속 사용할 수 있습니다. 즉, 인증 또는 기타 Firebase SDK 코드를 버전 9 스타일로 리팩터링하는 동안 Cloud Firestore용 기존 버전 8 코드를 유지할 수 있습니다. 두 코드 스타일로 앱을 성공적으로 컴파일하십시오. 동일은 클라우드 경우 FireStore 등의 제품에서 버전 8 버전 9 코드에 대한 사실이다; 호환 패키지를 가져오는 한 새 코드 스타일과 이전 코드 스타일이 공존할 수 있습니다.

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

앱이 컴파일되더라도 앱에서 compat 문과 코드를 완전히 제거할 때까지는 모듈식 코드의 앱 크기 이점을 얻을 수 없다는 점을 명심하십시오.

초기화 코드 업데이트

새로운 모듈식 버전 9 구문을 사용하도록 앱의 초기화 코드를 업데이트하세요. 당신이 당신의 응용 프로그램에서 모든 코드를 리팩토링 완료 한 후이 코드를 업데이트하는 것이 중요하다; 때문이다 firebase.initializeApp() 의 compat 및 모듈 API를 모두 전역 상태를 초기화 모듈 반면 initializeApp() 함수 모듈 만 상태를 초기화한다.

이전: 버전 9 호환

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

이후: 버전 9 모듈식

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

호환 코드 제거

버전 9 모듈 SDK의 크기 혜택을 실현하기 위해, 당신은 결국 위에 표시된 모듈 형 스타일에 대한 모든 호출을 변환하고 모두 제거해야합니다 import "firebase/compat/* 코드에서 문.이 완료되면, 아니이 있어야한다 받는 사람의 참조 firebase.* 글로벌 네임 스페이스 또는 버전 8 SDK 스타일의 다른 코드입니다.

창에서 compat 라이브러리 사용

버전 9 SDK는 오히려 브라우저의 이상의 모듈로 작업에 최적화 된 window 객체입니다. 도서관의 이전 버전은 사용하여 중포 기지의 로딩 및 관리를 허용 window.firebase 네임 스페이스를. 이것은 사용하지 않는 코드 제거를 허용하지 않으므로 앞으로 권장하지 않습니다. 그러나, 자바 스크립트 SDK의의 compat 버전으로 작업을 수행 window 바로 모듈 업그레이드 경로를 시작하지 않으 개발자를위한.

<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

호환성 라이브러리는 내부적으로 모듈식 버전 9 코드를 사용하고 버전 8 SDK와 동일한 API를 제공합니다. 이것은 당신이 참조 할 수 있습니다 의미 버전 8 API 참조 자세한 내용 및 버전 8 코드 조각. 이 방법은 장기간 사용하는 것이 아니라 완전 모듈식 버전 9 라이브러리로 업그레이드하기 위한 시작으로 권장됩니다.

버전 9의 이점 및 제한 사항

완전히 모듈화된 버전 9는 이전 버전에 비해 다음과 같은 이점이 있습니다.

  • 버전 9에서는 앱 크기를 크게 줄일 수 있습니다. 최신 JavaScript 모듈 형식을 채택하여 앱에 필요한 아티팩트만 가져오는 "트리 쉐이킹" 방식을 허용합니다. 앱에 따라 버전 9의 트리 쉐이킹은 버전 8을 사용하여 빌드된 유사한 앱보다 80% 더 적은 킬로바이트를 생성할 수 있습니다.
  • 버전 9는 지속적인 기능 개발의 이점을 계속 누리고 버전 8은 미래의 어느 시점에서 동결될 것입니다.