정중식의 개발공부로그

Firebase SDK 리팩토링

16 Sep 2023 | firebase

리팩토링 전 코드

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);

export default firebase;

리팩토링 후 코드

import { initializeApp, FirebaseApp, getApp } from 'firebase/app';
import 'firebase/auth';

export let app: FirebaseApp;

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

try {
  // 초기화가 되었는지 확인
  app = getApp('app');
} catch (e) {
  // 초기화
  app = initializeApp(firebaseConfig);
}

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);

export default firebase;

이렇게 작성한 이유는 앱을 초기화 할 때마다, initializeApp하는건 비효율적이라서다.

getApp()을 파이어베이스 공홈에서 찾아보면,

  • 앱 이름이 제공되면 해당 이름에 해당하는 앱이 반환된다.
  • 검색 중인 앱이 아직 초기화되지 않은 경우 ‘예외’가 발생한다. (공홈 getApp설명)

라고 명시되어있다.

즉 위의 코드는 app이 초기화가 안되어있다면 예외를 발생시켜 초기화 시킨다.

Related Posts