Firebase의 예제들을 보면 쓰는 법이 여러가지라 헷갈렸는데, 손 가는 대로 쓰다가 결국엔 씅나서 알아보는 포스팅.

---

쓰는 법이 왜이렇게 다르니?

Firebase는 v8에서 v9로 업데이트되면서 Module API를 지원했고, 앞으로 Namespace API가 아닌 Module API를 쓸 것을 권고했다. 실제로는 앞으로 Namespace API 지원을 끊을 거라고.

주의사항: compat 라이브러리는 향후 주요 SDK 버전(예: 버전 10 또는 버전 11)에서 완전히 제거되는 임시 솔루션입니다. 궁극적인 목표는 compat 코드를 삭제하고 앱에서 모듈식 코드만 유지하는 것입니다.

v9로 릴리즈가 된 것은 Javascript 기준 2021년 8월 25일이고, 2023년 7월 6일 기준으로 v10이 릴리즈가 됐는데도 24년 6월 기준 아직까지 8버전을 쓰는 예제들이 많다.

되도록이면 최신 버전을 원하는 나는 맨땅에 삽질하는 머시기를 할 수밖에 ..
확실히 Firebase 공식 문서들이 불친절하다는 걸 많이 느낌

---

Namespace API와 Module API

v8과 v9의 가장 큰 차이점은 인스턴스 위주냐, 함수 위주이냐로 갈린다. 그렇기 때문에 사용법이 그렇게 많이 달라지는 것.

네임스페이스화된 API는 점으로 체이닝된 네임스페이스 및 서비스 패턴을 기반으로 하지만 모듈식 접근방식은 코드가 함수를 중심으로 구성됩니다. 모듈식 API에서 firebase/app 패키지와 기타 패키지는 패키지의 모든 메서드를 포함하는 포괄적인 내보내기를 반환하지 않습니다. 대신 패키지는 개별 함수를 내보냅니다.

간단히 Firebase의 인스턴스와 Auth 패키지를 가져오는 예제를 통해 알아보자.

• Namespace API로 쓸 때

  import firebase from "firebase/app"
  import 'firebase/auth';
  
  firebase.initializeApp(config)
  const auth = firebase.auth();

• Module API로 쓸 때

  import { initializeApp } from 'firebase/app'
  import { getAuth } from 'firebase/auth';
  
  const firebase = initializeApp(config)
  const auth = getAuth(firebase)

요런 느낌.

확실히 Namespace화 된 녀석은 '파이어베이스'에게 부탁하는 느낌이지만, Module은 파이어베이스의 기능을 직접 끌어다 쓰는 느낌이다. 예전엔 나도 이전 방식을 주로 사용했었지만, 요샌 후자의 방법을 자주 사용해서 그런지 더 쓰기 편하다.

또, 해당 앱의 인스턴스를 가져오는 방법 뿐만 아니라 메서드를 쓰는 방법도 달라졌다.

• Namespace API로 쓸 때

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

• Module API로 쓸 때

  import { initializeApp } from 'firebase/app';
  import { getAuth, onAuthStateChanged } from 'firebase/auth';
  
  const firebaseApp = initializeApp({ /* config \*/ });
  const auth = getAuth(firebaseApp);
  
  onAuthStateChanged(auth, user => {
    // Check for user status
  });

Namespace API는 그 구조상 인스턴스의 메소드를 호출하는 방법으로 이어갔다면, Module API는 함수의 연속이다. 모듈에서 필요한 메서드를 불러와서 쓰는 식.

---

• https://firebase.google.com/docs/web/modular-upgrade?hl=ko&_gl=1*1g1z7jy*_up*MQ..*_ga*MTg1ODM1NzI4Ni4xNzE3NzQ2OTky*_ga_CW55HF8NVT*MTcxNzc0Njk5Mi4xLjAuMTcxNzc0Nzk3MC4wLjAuMA