firebase ver 8 with React (1) setting

flutter에서 사용해봤으니까, 가입 등 간단한 절차는 생략하고 사용 위주로 작성해보겠습니다.

firebase 버전 8을 기준으로 설명합니다. 

 

firebase.google.com/docs/web/setup?authuser=0#using-module-bundlers

자바스크립트 프로젝트에 Firebase 추가

 

사용하는 언어에 따라 다릅니다만 firebase 구현체에 설정을 파라미터로 넣고 initializeApp만 해주면 되는 건 같습니다.

앱의 엔트리 포인트에 파이어 베이스를 구성하여 넣어주면 됩니다.

yarn add firebase

 

즉시실행함수던 아래처럼 구성하던 마음대로 프로젝트의 성격에 맞게 ㅇㅇ

특정한 firebase의 서비스를 사용하고 싶을때, 추가적으로 패키지를 추가해주시면 되겠습니다.

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

// Initialize Firebase. 즉시 실행 함수로 실행. 뭐 방법은 많음. 편한 것으로 하시면 됨.
(function () {
  firebase.initializeApp(firebaseConfig);
})();

 

다음과 같이 간단히 사용 가능합니다.

// 엔트리 포인트에 넣어두거나 (전체 임포트) => 여러번 init하게 될 수 있는데, 좋은 방법은 아님
import "./firebase";

// 특정 서비스만 export
import { fAuth } import "./firebase"

 

사용하고 싶은 서비스에 따라 아래처럼 사용합니다.

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";

// 사용
firebase.auth()
firebase.auth().method()

 

문서에 따르면 다음과 같은 서비스들이 있군요. (곧 9버전 올라갈 것 같긴 합니다)

 

그런데 생각해보면, 특정 로직이 필요할 때마다 매번 firebase.something()를 호출하는 것은 좋지 않겠다는 생각이 자연스럽게 듭니다.

코드 가동성 뿐만 아니라 메모리 효율성에서 있어서도 그렇습니다.

 

따라서, 아래처럼 한 번만 호출한 후 다른 곳에서 import해서 사용하는 것이 좋겠다는게 생각입니다.

export const firebaseInstance = firebase;

export const authService = firebase.auth();
export const dbService = firebase.firestore();
export const storageService = firebase.storage();