[불어나는 코드 모듈로 분리] - 1차 팀프로젝트 리팩토링 #네 번째

간략한 팀프로젝트 소개

• tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 
• 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 

 

이전 리팩토링 과정

(1) - [불어나는 API_URL 관리]

(2) - [중복되는 매개변수 제거]

(3) - [spread & rest]

---

이번 리팩토링은 firebase 모듈을 `js` 파일 하나하나에서 전부 초기화를 해주고, firebase 전체를 import해서 사용하던 부분을 정리해보았다. firebase 모듈을 초기화하고 import하는 코드만 20~30행 정도를 차지하는데 싹다 밀어버렸다.

 

 

💡 기존 구조

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import {
  collection,
  addDoc,
} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    /* apiKey 어쩌구, auth 어쩌구 저쩌구 */
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const btnJoinUp = document.getElementById("join-btn");

📍 문제점

위와 같은 코드가 모든 `js` 에서 "똑같이" 사용되었다(마이페이지, 상세페이지 등..). 개인적으로 보기 흉하다. 

 

 

💡 변경된 구조

firebaseConfig.js

// firebaseConfig.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import {
  collection,
  addDoc,
  getDocs,
  doc,
  query,
  where,
  updateDoc,
} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Your web app's Firebase configuration
const firebaseConfig = {
  /* api키 어쩌구, 저쩌구 .. 코드*/
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


export { db, collection, addDoc, getDocs, doc, query, where, updateDoc };

import하는 다른 파일들

// 어쩌구.js
import {
  db, collection,
  addDoc,
  query,
  where,
  getDocs,
  updateDoc,
  doc
} from "./fireBaseConfig.js";

// 저쩌구.js
import { db, collection, getDocs } from "./fireBaseConfig.js";

firebase SDK를 가져와서 초기화를 하는 js파일을 따로 분리하였다. 각각의 js파일에서 사용되는 함수는 `firebaseConfig.js` 를 import하여 특정 함수만 사용할 수 있도록 변경하였다.

 

📍 변경 목적

• 심리적인 안정감 리소스를 덜 사용할 것 같다.(뇌피셜) 
• 관리하기 편하다. 

---

💡 정리

• 공통으로 사용되는 코드뭉치를 모듈로 분리시켰다. 
• 여러군데서 참조되는 코드(변수, 함수 등)를 모듈로 분리하는 습관을 갖자.