애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • NextJS Firebase@9으로 migration하기
    Next.js 2021. 9. 14. 15:16
    728x90

    해당 글은 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에 대한 비교를 올려보았다.

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

     

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

    댓글

Designed by Tistory.