Frontend & Architecture

도전 과제: 팀원 이탈 속에서의 아키텍처 설계와 개발 병목 현상

프로젝트 초기, 팀원 이탈로 인해 프론트엔드 개발 리소스가 부족해졌고, 백엔드 API 개발이 지연되면서 프론트엔드 개발 전체가 중단될 위기에 처했습니다. 이러한 위기 상황 속에서, 저는 팀 리딩 역할을 맡아 지속 가능한 개발 환경을 구축하고, 성능과 확장성을 모두 만족시키는 모던 프론트엔드 아키텍처를 설계해야 하는 복합적인 도전에 직면했습니다.

해결 전략: 모노레포 도입과 MSW를 활용한 API 모킹

코드의 일관성과 재사용성을 높이기 위해 Turborepo를 도입했습니다. 백엔드 개발 지연 문제를 해결하기 위해 Mock Service Worker (MSW)를 도입하여, 실제 API가 없는 상황에서도 프론트엔드 팀이 독립적으로 개발과 테스트를 진행할 수 있는 환경을 구축했습니다. 또한, Next.js의 App Router를 기반으로 SSR/CSR 혼합 전략을 사용하여 초기 로딩 성능을 최적화했습니다.

[그림 11] MSW를 활용한 독립적인 프론트엔드 개발 환경

MSW는 서비스 워커 레벨에서 네트워크 요청을 가로채 모의 응답을 반환하므로, 코드 수정 없이 실제 API와 모의 API 간의 전환이 가능합니다. 이를 통해 백엔드 팀과의 의존성을 분리하고 프론트엔드 개발을 중단 없이 진행할 수 있었습니다.

// 예시: MSW를 사용한 API 모킹 핸들러
import { http, HttpResponse } from 'msw';

// /api/books/:bookId 요청을 가로채는 핸들러
export const handlers = [
  http.get('/api/books/:bookId', ({ params }) => {
    const { bookId } = params;

    // 모의 데이터 반환
    return HttpResponse.json({
      id: bookId,
      title: '모던 프론트엔드 아키텍처',
      quizzes: [
        { id: 'q1', question: 'SSR의 장점은 무엇인가요?' },
        { id: 'q2', question: 'Turborepo의 역할은 무엇인가요?' },
      ],
    });
  }),
];

// Next.js 개발 환경에서 MSW 활성화
// if (process.env.NODE_ENV === 'development') {
//   const { worker } = require('./mocks/browser');
//   worker.start();
// }

결과 및 성과

MSW 도입을 통해 백엔드 개발 지연에도 불구하고 프론트엔드 기능 개발을 일정에 맞춰 완료할 수 있었습니다. SSR/CSR 혼합 전략을 통해 초기 페이지 로딩 속도(LCP)를 약 40% 개선했으며, Turborepo 기반의 모노레포는 팀의 개발 생산성을 높이는 안정적인 기반이 되었습니다. 위기 상황 속에서 기술적 리더십을 발휘하여 프로젝트를 성공적으로 이끈 경험은 저를 한 단계 더 성장시켰습니다.