기술 학습 노트

테마

로컬 개발 환경 ​

마이크로 프론트엔드 개발 시 전체 실행, 개별 실행, 하이브리드 세 가지 로컬 환경 구성법의 트레이드오프를 정리한다.

학습 목표 ​

  1. 마이크로 프론트엔드 로컬 개발 환경의 세 가지 접근법을 비교할 수 있다.
  2. 각 접근법의 장단점과 적합한 상황을 판단할 수 있다.
  3. 실무에서 가장 실천적인 로컬 개발 환경을 설계할 수 있다.

1. 로컬 개발 환경의 과제 ​

마이크로 프론트엔드에서 로컬 개발 환경 구성은 모놀리식 앱과 근본적으로 다른 과제를 안고 있다. 모놀리식에서는 npm run dev 한 번이면 전체 앱을 띄울 수 있지만, 마이크로 프론트엔드에서는 Shell, 여러 마이크로 앱, 프래그먼트가 각각 독립된 서버로 실행되어야 한다.

핵심 질문은 이것이다: "나의 마이크로 앱을 개발하기 위해 얼마나 많은 서비스를 동시에 띄워야 하는가?"

2. 접근법 1: 전체 실행 ​

개념 ​

모든 마이크로 앱과 프래그먼트를 동시에 로컬에서 실행하여 전체 앱 환경을 그대로 재현한다.

실행 구조 ​

# 터미널 1
cd apps/shell && npm run dev      # 포트 3000

# 터미널 2
cd apps/auth && npm run dev       # 포트 3001

# 터미널 3
cd apps/dashboard && npm run dev  # 포트 3002

# 터미널 4
cd apps/payment && npm run dev    # 포트 3003

# 터미널 5
cd apps/content && npm run dev    # 포트 3004

# 터미널 6-7
cd fragments/header && npm run dev   # 포트 3010
cd fragments/sidebar && npm run dev  # 포트 3011

장점 ​

  • 프로덕션과 동일한 환경에서 전체 앱의 동작을 확인할 수 있다.
  • 마이크로 앱 간 통합 이슈를 로컬에서 미리 발견할 수 있다.
  • 별도의 모킹이나 추가 설정이 필요 없다.

단점 ​

문제설명
리소스 과다 사용마이크로 앱이 5개 이상이면 8GB 메모리로도 버벅거린다
느린 시작 시간모든 앱을 빌드하고 시작하는 데 수 분이 걸린다
HMR 성능 저하여러 dev 서버가 동시에 파일 감시를 하면 HMR 반응이 느려진다
불필요한 부하인증 앱을 개발하는데 결제, 콘텐츠 앱이 동시에 돌고 있다

적합한 상황 ​

  • 배포 전 최종 통합 테스트 시에만 사용한다.
  • 마이크로 앱이 3개 이하인 초기 프로젝트에서는 사용 가능하다.

3. 접근법 2: 개별 실행 ​

개념 ​

자신의 마이크로 앱만 로컬에서 실행하고, 나머지 앱은 모킹하거나 프로덕션/스테이징 환경의 배포본을 참조한다.

방식 A: Shell + 내 앱만 실행 ​

Shell과 자신의 마이크로 앱만 로컬에서 실행한다. 다른 마이크로 앱의 위치에는 빈 화면이나 플레이스홀더가 표시된다.

# 터미널 1
cd apps/shell && npm run dev         # 포트 3000

# 터미널 2
cd apps/auth && npm run dev          # 포트 3001

# 나머지 앱은 실행하지 않음
# Shell이 다른 앱을 로드하지 못하면 에러 바운더리가 대신 표시

방식 B: 의존 기능 내장 (독립 실행) ​

Shell의 핵심 기능(라우팅, 인증, 레이아웃)을 마이크로 앱의 개발 환경에 탑재하여 Shell 없이도 단독 실행이 가능하게 한다.

javascript
// apps/auth/dev-server.js
// Shell의 기능을 모킹하여 단독 실행 가능하게 구성
const devShell = {
  router: createMemoryRouter(),    // Shell 라우터 모킹
  auth: createMockAuth(),          // 인증 상태 모킹
  layout: DevLayout,               // 개발용 레이아웃 컴포넌트
  eventBus: createMockEventBus(),  // 이벤트 버스 모킹
};

이 방식은 특히 프래그먼트 개발 시 필수적이다. 프래그먼트는 혼자서는 화면에 표시될 수 없으므로, 데모 환경(호스트 역할)을 마련해야 한다.

방식 C: 다른 앱은 프로덕션 연결 ​

Shell은 로컬에서 실행하되, Module Federation 설정에서 다른 마이크로 앱의 remoteEntry.js를 프로덕션 CDN 주소로 지정한다.

javascript
// webpack.config.dev.js
new ModuleFederationPlugin({
  remotes: {
    // 내 앱은 로컬
    auth: 'auth@http://localhost:3001/remoteEntry.js',
    // 나머지는 프로덕션
    dashboard: 'dashboard@https://cdn.example.com/dashboard/remoteEntry.js',
    payment: 'payment@https://cdn.example.com/payment/remoteEntry.js',
  },
});

개별 실행의 장단점 ​

장점단점
리소스 사용 최소화모킹 코드 유지보수 필요
빠른 시작과 HMR다른 앱과의 통합 이슈를 로컬에서 확인 불가
개발자 경험(DX) 우수Shell 기능 변경 시 모킹도 업데이트해야 함

4. 접근법 3: 하이브리드 ​

개념 ​

원격 서버(개발 환경 또는 스테이징)에서 전체 앱을 실행하되, 자신의 마이크로 앱만 로컬 개발 서버로 연결(프록시)한다.

동작 원리 ​

구현 방법 ​

  • 리버스 프록시: Nginx 또는 개발 서버의 프록시 설정으로 특정 경로만 로컬로 전달
  • 커스텀 DNS: 로컬 hosts 파일이나 DNS 설정으로 특정 도메인을 로컬로 리다이렉트
  • 브라우저 확장: Module Federation 원격 URL을 로컬로 오버라이드하는 개발 도구
  • 환경 변수: 원격 서버에서 특정 쿼리 파라미터나 쿠키가 있으면 로컬 URL을 사용하도록 설정

하이브리드의 장단점 ​

장점단점
가장 실제에 가까운 테스트 환경보안 이슈 (로컬 서버 외부 노출)
다른 앱과의 통합을 실시간 확인팀별 개발 서버를 여러 벌 운영해야 함
전체 앱을 로컬에서 띄울 필요 없음네트워크 지연으로 개발 속도가 느려질 수 있음

5. 세 가지 접근법 비교 ​

기준전체 실행개별 실행하이브리드
리소스 사용높음낮음낮음
시작 시간느림빠름중간
통합 테스트완벽불가높음
DX(개발 경험)나쁨우수좋음
설정 복잡도낮음중간높음
인프라 비용없음없음개발 서버 필요
보안 위험없음없음로컬 노출 위험
적합한 상황최종 검증일상 개발통합 확인 필요 시

6. 실무 권장 조합 ​

현실적으로 가장 효과적인 접근은 세 가지를 상황에 따라 조합하는 것이다.

일상 개발 (90% 시간)
└── 접근법 2: 개별 실행 (독립 실행 모드)
    - 내 마이크로 앱만 단독 실행
    - Shell 기능은 모킹
    - 빠른 HMR로 높은 생산성

통합 확인 (8% 시간)
└── 접근법 3: 하이브리드
    - 스테이징 서버에 내 앱만 로컬 연결
    - 다른 앱과의 통합 동작 확인

배포 전 최종 검증 (2% 시간)
└── 접근법 1: 전체 실행
    - 모든 앱을 로컬에서 동시 실행
    - 전체 동작 최종 점검

독립 실행 환경 구축이 필수적인 이유 ​

개별 실행(독립 실행)이 가능하려면, Shell의 핵심 기능을 마이크로 앱 개발 환경에 내장하는 작업이 필요하다. 이 초기 투자가 없으면 개발자는 매번 전체 앱을 띄워야 하고, 마이크로 앱 수가 늘어날수록 개발 경험이 악화된다.

특히 프래그먼트는 반드시 독립 실행 환경이 있어야 한다. 프래그먼트는 단독으로 화면을 구성하지 못하므로, 호스트 역할을 하는 데모 환경을 마련해야 개발이 가능하다.

핵심 정리 ​

  • 마이크로 프론트엔드 로컬 개발의 핵심 과제는 "내 앱을 개발하기 위해 몇 개의 서비스를 띄워야 하는가"이다.
  • 전체 실행은 리소스가 과다하게 소모되므로 최종 검증 용도로만 사용한다.
  • 개별 실행이 일상 개발에 가장 적합하며, Shell 기능 모킹에 대한 초기 투자가 필요하다.
  • 하이브리드는 통합 확인이 필요할 때 사용하되, 보안과 인프라 비용을 고려한다.
  • 프래그먼트 개발에는 독립 실행 환경(데모 호스트)이 필수적이다.

다음 단계 ​

로컬 개발 환경이 구축되었다면, 이제 프로덕션에서 장애가 발생했을 때 그 영향 범위를 최소화하는 전략이 필요하다. 다음 장에서는 에러 바운더리, 폴백 UI, 그레이스풀 디그레이데이션, 모니터링과 알림에 대해 알아본다.

다음 문서: 05-장애-범위-축소.md