-
NextJS Firebase@9으로 migration하기Next.js 2021. 9. 14. 15:16728x90
해당 글은 firebase@9.0.2 버전을 기준으로 작성되었습니다.
아직 공식 홈페이지에는 Beta라고 나오지만 이제 npm에서 다운로드하게 되면 자동으로 9 버전이 설치되게 된다.
내가 생각하기에 이번 버전에서 가장 큰 변경 점은
- tree shaking
- 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에 대한 비교를 올려보았다.
사용법 자체는 크게 차이 나지 않아서 금방 적응할 수 있을 것이다.
만약 추가적으로 궁금한 점이나 내가 사용하다 느낀 점이 있다면 글을 또 작성하도록 하겠다.
'Next.js' 카테고리의 다른 글
NextJS + Redux-Toolkit + next-redux-wrapper 설정하기 (0) 2021.09.24 NextJS Image에서 fallback 활용하기 (0) 2021.09.16 NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기 (0) 2021.09.06 NextJS Image Tag Error: Invalid src prop 해결하기 (0) 2021.09.06 NextJS 11버전에서 next Image 태그 사용하기 (0) 2021.08.09