모듈식 웹 SDK(v9)로 업그레이드

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

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

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

compat 라이브러리 정보

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

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

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

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

업그레이드 프로세스 정보

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

앱에 버전 9 라이브러리와 compat 라이브러리를 추가합니다.
코드의 import 문을 v9 compat로 업데이트합니다.
코드를 모듈식 스타일로 리팩터링합니다.
앱 크기 이점을 활용하려면 인증 compat 라이브러리와 인증용 compat 코드를 삭제하세요.
초기화 코드를 모듈식으로 업데이트합니다.
앱에서 남은 버전 9 compat 문과 compat 코드를 모두 삭제합니다.

버전 9 SDK 가져오기

시작하려면 npm을 사용하여 버전 9 라이브러리와 compat 라이브러리를 가져오세요.(최신 버전 https://www.npmjs.com/package/firebase):

npm i firebase@10.12.3

# OR

yarn add firebase@10.12.3

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/앱 패키지와 기타 패키지는 패키지의 모든 메서드를 포함하는 포괄적인 내보내기를 반환하지 않습니다. 대신 패키지는 개별 함수를 내보냅니다.

버전 9에서는 서비스가 첫 번째 인수로 전달되며, 그런 다음 이 함수의 세부정보를 사용하여 나머지 작업을 수행합니다.

예: 간단한 인증 함수 리팩터링

이전: 버전 9 compat

버전 9 compat 코드는 버전 8 코드와 동일하지만 가져오기가 변경되었습니다. 업그레이드 중에 compat 라이브러리를 사용하면 버전 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 함수는 버전 8처럼 인증 인스턴스에서 연결되지 않지만, 대신 auth를 첫 번째 매개변수로 사용하는 무료 함수입니다.

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

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

초기화 코드 업데이트

앱의 초기화 코드를 업데이트하여 새 모듈식 버전 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.* 전역 네임스페이스 또는 다른 코드에 대한 참조가 더 이상 없어야 합니다.

버전 9의 이점과 제한사항

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

버전 9를 사용하면 앱 크기를 상당히 줄일 수 있습니다. 최신 자바스크립트 모듈 형식을 채택하여 앱에 필요한 아티팩트만 가져오는 '트리 쉐이킹' 방식을 지원합니다. 앱에 따라 버전 9에서 트리 쉐이킹을 사용하면 버전 8로 빌드된 비교 가능한 앱보다 KB를 80% 줄일 수 있습니다.
버전 9는 지속적인 기능 개발의 이점을 계속해서 누릴 수 있는 반면, 버전 8은 향후 특정 시점에서 중지됩니다.