[학습 목적] Express.js => Firebase 마이그레이션 과정

 

 

Express.js => Firebase 마이그레이션 과정

 

 

 

⭐️ 시작하기 앞서

 

6개월간의 부트캠프가 끝나고 처음으로 사이드 프로젝트를 진행하게 되었다. 

 

설문 조사 플랫폼을 만들기로 결정했지만, 가장 큰 고민은 백엔드 서버를 혼자 구축해야 한다는 점이었다.

 

프론트엔드 개발자 혼자 프로젝트를 개발하기 위해 백엔드에 대한 기본적인 이해가 필요하다고 생각했다.

 

 

 

❕ 처음 Express.js 선택하게된 계기 (공식문서)

 

1. 쉽게 접근 가능

- Node.js 프레임워크인 Express.js는 JavaScript 언어를 사용하기 때문에 새로운 언어를 배운다는 부담이 적어 접근하기 쉬울 것이라고 생각했다.

 

2. 프레임워크 사용자가 많아 방대한 커뮤니티

- 공식문서도 한글을 지원했고 커뮤니티도 크다고 판단해 쉽게 배울 수 있다고 생각했다.

 

3. 빠른 프로토타입 개발이 가능

 

4. REST API 이해

- RESTful API 서버 구축 (HTTP 메서드 구현, 미들웨어, API 엔드 포인트 설계 등)

 

// MobX + Express.js
// server/index.ts
// 미들웨어(json 내장 미들웨어, 라우팅 미들웨어, 써드파티(vite.middlewares)), API 엔드포인트 설계 경험
import express from "express";
import surveyRouter from "./api/serveys";

async function startServer() {
  const app = express();
  
  app.use(express.json());
  
  app.use("/api/surveys", surveyRouter);
  ...
}



// server/api/survey.ts
// REST API HTTP 메서드 구현 (GET, POST, PUT, PATCH 등)
router.get("/:id/statistics", (req, res) => {
  const id = Number(req.params.id);
  const data = storage.get(id);

  if (!data) {
    return res.status(404).json({ error: "Not found" });
  }

  const { sections, responses } = data;

  const statistics: Statistics = getStatistics(sections, responses);

  return res.json({ statistics });
});

export default router;

 

 

내가 느낀 장점

1. 친절한 공식문서 설명으로 빠른 프로토타입 개발이 가능했다. (제일 큼)

 

2. 자바스크립트 기반의 낮은 진입 장벽 (제일 큼)

 

3. 초기 프로젝트 개발 시 파일 시스템 기반의 간단한 데이터 저장으로 빠른 개발 가능

 

// 파일 시스템 기반 데이터 관리
const storage = new JsonStorage<SurveyData>(
  path.join(__dirname, "../data/surveys.json")
);

 

4. API 라우팅 구현이 쉬웠다. (HTTP 메서드 지원)

 

app.use("/api/surveys", surveyRouter);

 

5. 커뮤니티가 컸기에 모르는 부분이 있다면 바로바로 찾을 수 있었다.

 

 

 

 

 

내가 느낀 단점

1. 파일 시스템 기반의 데이터 저장의 한계

- MongoDB, Redis, MySQL 등의 데이터베이스 도입 시 추가적인 학습 부담

 

2. 싱글 스레드 모델이기에 하나의 작업이 오래 걸리면 전체 시스템 성능에 영향 많이 준다.

 

3. 스크립트 언어의 특성 상 런타임에 에러를 확인할 수 있고, 그러한 경우 프로세스가 종료되기에 잘 죽는다 (실제로 많이 느낌)

 

4. 실시간 데이터 처리

- 웹소켓 구현 복잡성

 

// Express에서는 실시간 업데이트가 어려웠던 통계 데이터 처리
const { statistics } = await callApi<{
  statistics: Statistics;
}>(`/surveys/${surveyId}/statistics`);

 

5. 에러처리 복잡성

 

// Express의 에러 처리
   router.get("/:id", (req, res) => {
     try {
       const id = Number(req.params.id);
       const data = storage.get(id);
   
       if (!data) {
         return res.status(404).json({ 
           error: "Survey not found",
           code: "SURVEY_NOT_FOUND" 
         });
       }
   
       return res.json(data);
     } catch (error) {
       // 에러 로그
       console.error("Survey fetch error:", error);
       
       // 적절한 에러 응답 일일이 구현해야 함
       return res.status(500).json({ 
         error: "Internal server error",
         code: "INTERNAL_ERROR"
       });
     }

 

 

 

 

 

🔥 Firebase로 마이그레이션 하게 된 계기 (Firebase Store, Firebase Auth)

Firebase 공부 포스팅

 

1. 백엔드 관리의 부담 감소 (프론트 집중)

 

   // Firebase의 간단한 데이터 생성 로직
   const docRef = await addDoc(collection(db, "surveys"), {
     sections: sectionsData,
     emailCollected: false,
     uid: user?.uid,
     createdAt: new Date()?.toLocaleDateString("ko"),
   });

 

2. Express로 기본기 배운 후, 개발 생산성을 위해 Firebase 선택

 

3. 프로젝트 규모가 작고, 실시간 데이터 처리가 필요했음 (제일큼)

 

4. 인증 로직 쉽게 해결

- Express로 직접 구현해야 했던 부분이 Firebase Auth로 해결

 

   // Firebase Auth를 통한 간단한 인증 구현
   const auth = getAuth(app);
   await signInWithEmailAndPassword(auth, data.email, data.password);

 

5. 실시간 데이터베이스의 필요성

- 설문 응답의 실시간 업데이트

- 통계 데이터 실시간 반영

 

 // Firestore를 통한 실시간 데이터 동기화
async fetchSurvey(surveyId: string) {
  const docRef = doc(db, "surveys", surveyId);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    const data = docSnap.data();
    runInAction(() => {
      this.sections = newSections;
      this.focusedSectionId = newSections[0]?.id || null;
      this.emailCollected = data.emailCollected;
    });
  }
}

 

6. 간단한 에러 처리

 

// Firebase의 간단한 에러 처리
try {
  const docRef = await addDoc(collection(db, "surveys"), {
    sections: sectionsData,
    emailCollected: false,
  });
  toast.success("설문지가 생성되었습니다.");
} catch (error) {
  toast.error("설문지 생성에 실패했습니다.");
}

 

 

 

 

🧐 결론

학습을 목적으로 백엔드 개발 서버를 구축해보고자 Exprees.js를 선택했는데 오히려 Firebase 까지 두 가지 기술의 장단점을 이해할 수 있는 좋은 기회가 된 것 같다.