현재 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 모듈식"에 대한 이 가이드의 지침을 따를 수 있습니다.
업그레이드 프로세스 정보
업그레이드 프로세스의 각 단계는 앱의 소스 편집을 완료한 다음 손상 없이 컴파일하고 실행할 수 있도록 범위가 지정됩니다. 요약하면 앱을 업그레이드하기 위해 수행할 작업은 다음과 같습니다.
- 버전 9 라이브러리와 호환 라이브러리를 앱에 추가합니다.
- 코드의 import 문을 v9 호환으로 업데이트합니다.
- 단일 제품(예: 인증)에 대한 코드를 모듈식 스타일로 리팩터링합니다.
- 선택 사항: 이 시점에서 계속하기 전에 인증에 대한 앱 크기 이점을 실현하기 위해 인증에 대한 인증 호환 라이브러리 및 호환 코드를 제거합니다.
- 각 제품(예: Cloud Firestore, FCM 등)에 대한 기능을 모듈식 스타일로 리팩터링하고 모든 영역이 완료될 때까지 컴파일 및 테스트합니다.
- 초기화 코드를 모듈식 스타일로 업데이트합니다.
- 앱에서 나머지 버전 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은 미래의 어느 시점에서 동결될 것입니다.