Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

이 가이드는 귀하가 버전 8에 익숙하고 업그레이드 및 지속적인 버전 9 개발을 위해 webpack 또는 Rollup 과 같은 모듈 번들러를 활용할 것이라고 가정합니다.

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

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

호환 라이브러리 정보

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

  • 모듈식 - 웹 앱을 가능한 한 작고 빠르게 만들기 위해 트리 쉐이킹(사용하지 않는 코드 제거)을 용이하게 하도록 설계된 새로운 API 표면입니다.
  • Compat - 버전 8 SDK와 완전히 호환되는 친숙한 API 표면으로 모든 Firebase 코드를 한 번에 변경하지 않고도 버전 9로 업그레이드할 수 있습니다. 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.15.0

# OR

yarn add firebase@9.15.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 모듈식

firebaseApp 함수는 getAuth 을 첫 번째 매개변수로 사용합니다. onAuthStateChanged 함수는 버전 8에서처럼 auth 인스턴스에서 연결되지 않습니다. 대신, 첫 번째 매개변수로 auth 를 취하는 무료 함수입니다.

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

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

인증 메소드 getRedirectResult 처리 업데이트

버전 9에서는 getRedirectResult 의 주요 변경 사항을 소개합니다. 리디렉션 작업이 호출되지 않으면 버전 9는 null 사용자가 있는 UserCredential 을 반환한 버전 8과 달리 null 을 반환합니다.

이전: 버전 9 호환

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

이후: 버전 9 모듈식

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

예시 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());
});

Firestore DocumentSnapshot.exists 에 대한 참조 업데이트

버전 9에서는 firestore.DocumentSnapshot.exists 속성이 메서드 로 변경된 주요 변경 사항이 도입되었습니다. 기능은 기본적으로 동일하지만(문서 존재 여부 테스트) 다음과 같이 v9 메서드를 사용하도록 코드를 리팩토링해야 합니다.

이전: 버전 9 호환

if (snapshot.exists) {
  console.log("the document exists");
}

이후: 버전 9 모듈식

if (snapshot.exists()) {
  console.log("the document exists");
}

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

업그레이드 중에 호환 라이브러리를 사용하면 버전 9용으로 리팩터링된 코드와 함께 버전 8 코드를 계속 사용할 수 있습니다. 즉, 인증 또는 기타 Firebase SDK 코드를 버전 9 스타일로 리팩터링하는 동안 Cloud Firestore용 기존 버전 8 코드를 유지할 수 있습니다. 두 코드 스타일로 앱을 성공적으로 컴파일하십시오. Cloud 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 네임스페이스를 사용하여 Firebase를 로드하고 관리할 수 있었습니다. 이것은 사용하지 않는 코드 제거를 허용하지 않으므로 앞으로 권장하지 않습니다. 그러나 JavaScript SDK의 호환 버전은 모듈식 업그레이드 경로를 즉시 시작하지 않으려는 개발자를 위한 window 에서 작동합니다.

<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.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은 미래의 어느 시점에서 동결될 것입니다.