Firebase Warning: "It looks like you're using the..." 문구 없애기

웹 앱을 만드는 도중 개발자 도구를 봤는데 이런 문구가 생겼다.

Warning! Warning!

"이 문제는 Firebase JS SDK를 사용하면서 생긴 것 같아. 너가 프로덕션에 firebase 앱을 배포할 때는 너가 필요한 것만 import해서 사용하는 것을 추천할게."

 

개발자 도구 콘솔이 친절하게 알려줬다. SDK 전체를 불러와서 사용하지 말고 내 웹 앱에 필요한 것만 불러와서 사용하는 것을 권장하는 것 같다. 

 

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp;

 

firebase를 불러와 firebaseConfig에 구성 객체를 설정하고, initializeApp()의 인자로 제공해서 firebase를 초기화 해주었다.

이제 보니 내 웹 앱에선 firebase 전체를 불러왔던 것이다. 

초기화 해주는 initializeApp() 메서드를 VSCode로 들여다 보면(패키지를 추가하면 node_modules 안에 들어있다) firebase 안에 app 안에 App이라는 인터페이스를 리턴하는데 이 인터페이스 안에 내가 사용하려는 auth()와 database()가 있다.

firebase 안에(.) app 안에(.) App을 리턴!

그 App이 나야

이제 알겠다. 그럼 import를 다음과 같이 하자.

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

export const firebaseAuth = firebaseApp.auth();
export const firebaseDatabase = firebaseApp.database();
// App 인터페이스엔 Provider()가 없다.
export const googleProvider = new firebase.auth.GoogleAuthProvider();
export const githubProvider = new firebase.auth.GithubAuthProvider();

 

내가 필요한 것만 import를 하고, firebaseApp 전체를 export 하는 것이 아닌 각각의 모듈, 서비스에서 필요한 것만 import 할 수 있도록 export도 쓰이는 곳에 맞게 분류했다. 코드는 더 길어졌지만 가독성과 유지보수성이 올라갔다. 고마워 콘솔! 🙋🏻‍♂️