NextJS Firebase@9으로 migration하기

해당 글은 firebase@9.0.2 버전을 기준으로 작성되었습니다.

 

아직 공식 홈페이지에는 Beta라고 나오지만 이제 npm에서 다운로드하게 되면 자동으로 9 버전이 설치되게 된다.

내가 생각하기에 이번 버전에서 가장 큰 변경 점은

1. tree shaking
2. firestore-lite

위 두가지 이다.

간단하게 테스트했을 때 번들 사이즈의 경우 8 버전 대비 40% 정도의 사이즈 감소가 있었다.

그리고 firestore-lite의 경우 크게 offline기능과 snapshot 기능을 지원하지 않는데, 9 버전과 firestore에서 lite로 변경하며 데이터를 가져오는 속도와 total blockTime이 크게 감소했다.

 

물론 아직 버그가 있을 수 있지만, 지금까지의 장점만으로도 충분히 버전을 올릴만한 가치가 있다고 판단한다.

 

이제 8 버전에서 9 버전으로 마이그레이션을 진행해 보자.

//firebase config

// v8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

export const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);

export const Firebase = firebase;
export const Auth = firebase.auth();
export const Storage = firebase.storage();
export const FireStore = firebase.firestore();

// v9

import { getApps, initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore/lite';
import { getFirestore as getOGFirestore } from 'firebase/firestore';

export const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};
let firebase;
if (!getApps().length) firebase = initializeApp(firebaseConfig);

export const Firebase = firebase;
export const Auth = getAuth(firebase);
export const Storage = getStorage(firebase);
export const FireStore = getFirestore(firebase);
export const OGFireStore = getOGFirestore(firebase);

트리 쉐이킹으로 변경되며 모든 import가 firebase로 통일된 것과 달리 필요한 요소만 선택하여 불러오게 변경되었다.

9 버전의 경우 init을 한 뒤 사용하고자 하는 것을 만들어 준 뒤 사용할 수 있는데 편의성을 위해 모두 만든 뒤 export 해서 사용하는 방식을 채택했다.

// v8

import {FireStore} from '../firebaseConfig';

const manyDataGetAPI = async () => {
	return FireStore.collection('Test')
    .limit(10)
    .get()
    .then((refs) => refs.docs.map((doc) => doc.data()));
}

const oneDataGetAPI = () => {
	return FireStore.collection('Test')
    .doc('One')
    .get()
    .then((refs) => refs.docs.map((doc) => doc.data()));
}

const dataAddAPI = (data) => {
	return FireStore.collection('Test')
    .add(data);
}

const oneDataUpdateAPI = (data) => {
	return FireStore.collection('Test')
    .doc('One')
    .update(data);
}

const oneDataDelAPI = () => {
	return FireStore.collection('Test')
    .doc('One')
    .delete();
}

// v9

import { FireStore } from '../firebaseConfig';
import {
  collection,
  query,
  getDocs,
  getDoc,
  setDoc,
  updateDoc,
  deleteDoc,
} from 'firebase/firestore/lite';

const manyDataGetAPI = () => {
	const cols = collection(FireStore, 'Test');
    const q = query(cols, limit(10));
    return getDocs(q).then((refs) => refs.docs.map((doc) => doc.data()));
}

const oneDataGetAPI = () => {
	const docName = doc(FireStore, 'Test', 'One');
    return getDoc(docName).then((refs) => refs.docs.map((doc) => doc.data()));
}

const dataAddAPI = (data) => {
	const docName = doc(FireStore, 'Test');
    return setDoc(docName,data);
}

const oneDataUpdateAPI = (data) => {
	const docName = doc(FireStore, 'Test', 'One');
    return updateDoc(docName,data);
}

const oneDataDelAPI = () => {
	const docName = doc(FireStore, 'Test', 'One');
    return deleteDoc(docName);
}

간단하게 CR(one, many) UD에 대한 비교를 올려보았다.

사용법 자체는 크게 차이 나지 않아서 금방 적응할 수 있을 것이다.

 

만약 추가적으로 궁금한 점이나 내가 사용하다 느낀 점이 있다면 글을 또 작성하도록 하겠다.