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

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

이 가이드는 사용자가 버전 8 사용에 익숙하며 업그레이드와 향후 버전 9 개발에 webpack 또는 Rollup과 같은 모듈 번들러를 사용하는 것으로 가정합니다.

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

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

compat 라이브러리 정보

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

  • Modular - 웹 앱을 가능한 한 빠르고 작게 만들기 위해 Tree Shaking(사용하지 않는 코드 삭제)을 촉진하도록 설계된 새로운 API 노출 영역입니다.
  • Compat - 버전 8 SDK와 완벽하게 호환되는 친숙한 API 노출 영역을 사용하면 모든 Firebase 코드를 한 번에 변경하지 않고도 버전 9로 업그레이드할 수 있습니다. Compat 라이브러리는 버전 8에 비해 크기나 성능상의 이점이 거의 없습니다.

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

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

업그레이드 프로세스 정보

업그레이드 프로세스의 각 단계에는 범위가 지정되므로 앱의 소스 수정을 완료한 후 중단 없이 컴파일하고 실행할 수 있습니다. 요약하면, 다음을 수행하여 앱을 업그레이드합니다.

  1. 앱에 버전 9 라이브러리와 compat 라이브러리를 추가합니다.
  2. 코드의 import 문을 v9 compat로 업데이트합니다.
  3. 단일 제품(예: 인증)의 코드를 모듈식으로 리팩터링합니다.
  4. 선택사항: 이 시점에서 계속하기 전에 인증을 위한 앱 크기 이점을 활용하려면 인증 compat 라이브러리와 인증용 compat 코드를 삭제하세요.
  5. 모든 영역이 완료될 때까지 각 제품(예: Cloud Firestore, FCM 등)의 기능을 모듈식으로 리팩터링합니다.
  6. 초기화 코드를 모듈식으로 업데이트합니다.
  7. 앱에서 남은 버전 9 compat 문과 compat 코드를 모두 삭제합니다.

버전 9 SDK 가져오기

시작하려면 npm을 사용하여 버전 9 라이브러리와 compat 라이브러리를 가져오세요.

npm i firebase@9.22.0

# OR

yarn add firebase@9.22.0

v9 compat으로 가져오기 업데이트

v8에서 v9 베타로 종속 항목을 업데이트한 후에도 코드가 계속 작동하도록 하려면 가져오기 문을 변경하여 각 가져오기의 'compat' 버전을 사용합니다. 예를 들면 다음과 같습니다.

이전: 버전 8

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

이후: 버전 9 compat

// 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 compat

버전 9 compat 코드는 버전 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 함수는 버전 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 사용자와 함께 null을 반환했던 버전 8과는 달리 UserCredential을 반환합니다.

이전: 버전 9 compat

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 compat

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 compat

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

이후: 버전 9 모듈

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

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

업그레이드 중에 compat 라이브러리를 사용하면 버전 9용으로 리팩터링된 코드와 함께 버전 8 코드를 계속 사용할 수 있습니다. 즉, 인증 또는 기타 Firebase SDK 코드를 버전 9 스타일로 리팩터링하는 동안 Cloud Firestore의 기존 버전 8 코드를 그대로 유지하면서 두 코드 스타일을 사용하여 앱을 성공적으로 컴파일할 수 있습니다. Cloud Firestore와 같은 제품 내 버전 8 및 버전 9 코드도 마찬가지입니다. compat 패키지를 가져오는 한 신규 및 이전 코드 스타일이 공존할 수 있습니다.

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와 모듈식 API의 전역 상태를 초기화하지만 모듈식 initializeApp() 함수는 모듈식 상태만 초기화하기 때문입니다.

이전: 버전 9 compat

import firebase from "firebase/compat/app"

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

이후: 버전 9 모듈

import { initializeApp } from "firebase/app"

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

compat 코드 삭제

버전 9 모듈식 SDK의 크기 이점을 활용하려면 결국 모든 호출을 위에 표시된 모듈식 스타일로 변환하고 코드에서 모든 import "firebase/compat/* 문을 삭제해야 합니다. 작업을 완료한 후에는 버전 8 SDK 스타일의 firebase.* 전역 네임스페이스 또는 다른 코드에 대한 참조가 더 이상 없어야 합니다.

창에서 compat 라이브러리 사용

버전 9 SDK는 브라우저의 window 객체가 아닌 모듈과 연동하도록 최적화되었습니다. 이전 버전의 라이브러리에서는 window.firebase 네임스페이스를 사용하여 Firebase를 로드하고 관리할 수 있었습니다. 이 방법은 미사용 코드를 제거할 수 없으므로 앞으로 권장되지 않습니다. 그러나 모듈식 업그레이드 경로를 즉시 시작하지 않으려는 개발자를 위해 자바스크립트 SDK의 compat 버전은 window와 연동됩니다.

<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.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를 사용하면 앱 크기를 상당히 줄일 수 있습니다. 최신 자바스크립트 모듈 형식을 채택하여 앱에 필요한 아티팩트만 가져오는 '트리 쉐이킹' 방식을 지원합니다. 앱에 따라 버전 9에서 트리 쉐이킹을 사용하면 버전 8로 빌드된 비교 가능한 앱보다 KB를 80% 줄일 수 있습니다.
  • 버전 9는 지속적인 기능 개발의 이점을 계속해서 누릴 수 있는 반면, 버전 8은 향후 특정 시점에서 중지됩니다.