Read Original
#Frontend

모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]

모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
01

Summary

미리캔버스는 어떻게 거대한 모노레포를 '살아있는 아키텍처'로 만들었나?

CI 병렬화부터 런타임 모듈 통합까지, 멈추지 않는 프론트엔드 플랫폼의 실전 전략

이 아티클은 미리캔버스가 수백 개의 패키지로 구성된 모노레포를 효율적으로 운영하기 위해 도입한 CI/CD 전략과 마이크로 프론트엔드 구조를 상세히 다룹니다. 빌드 타임과 런타임 통합의 장단점을 명확히 구분하고, 플랫폼 엔지니어링 관점에서 아키텍처 규칙을 자동화하는 구체적인 방법론을 제시합니다.

  • 01Lint, Type-check, Test를 아티팩트 단위로 분리하여 CI 피드백 루프 극대화
  • 02Webpack 5 Module Federation과 manifest.json을 활용한 진정한 독립 배포 달성
  • 03Shared Scope를 통한 런타임 의존성 버전 협상 및 싱글톤 관리 기법
  • 04Fan-in/Fan-out 지표를 활용한 패키지 의존성 가시화 및 영향도 추적
  • 05Inverse Conway Maneuver를 적용하여 팀의 독립성을 보장하는 아키텍처 설계

RECOMMENDATION

대규모 모노레포에서 빌드 속도 저하와 배포 병목을 겪고 있는 시니어 엔지니어들에게 추천합니다. 특히 마이크로 프론트엔드 도입을 고민 중이라면 실질적인 의존성 관리 지표와 자동화 도구 활용법을 참고하세요.

The Problem

대규모 프론트엔드 모노레포 환경에서 패키지 간 복잡한 의존성으로 인해 CI 피드백 속도가 저하되고, 특정 모듈 변경 시 전체 앱을 재배포해야 하는 독립 배포의 한계가 발생했습니다.

The Solution

CI 파이프라인을 lint, type-check, test로 분리하여 병렬화하고, Webpack 5 Module Federation과 manifest.json을 도입하여 런타임에 모듈을 동적으로 통합하는 독립 배포 체계를 구축했습니다. 또한 Fan-in/Fan-out 지표 측정 및 순환 의존성 감지 도구를 통해 아키텍처 규칙을 자동화했습니다.

The Result

각 파이프라인의 독립적 실행으로 개발자 피드백 루프가 빨라졌으며, 프래그먼트 단위의 독립 배포가 가능해져 팀 간 배포 간섭이 제거되었습니다. 정량적인 지표 관리를 통해 모노레포의 복잡도를 도구로 제어할 수 있는 기반을 마련했습니다.

Trade-off

런타임 통합 방식은 빌드 타임 통합에 비해 런타임 구성이 복잡하며, Shared Scope 관리 시 React 싱글톤 위반과 같은 잠재적인 런타임 에러 위험이 존재하므로 엄격한 버전 협상 설정이 필요합니다.

03

Key Concepts

Concept · 01

Module Federation

Webpack 5에서 도입된 기술로, 별도로 빌드된 애플리케이션들이 런타임에 서로의 코드를 동적으로 공유하고 실행할 수 있게 해주는 메커니즘입니다.

  • manifest.json을 통해 런타임에 원격 모듈의 실제 URL을 동적으로 조회
  • Host 앱의 재빌드 없이 특정 기능을 담당하는 Fragment의 독립 배포 지원
Concept · 02

Shared Scope

Module Federation 환경에서 여러 모듈이 공통으로 사용하는 의존성(React 등)의 버전을 관리하고 공유하는 런타임 영역입니다.

  • singleton 옵션을 사용하여 런타임에 단일 React 인스턴스만 유지하도록 보장
  • semver 규칙을 기반으로 각 모듈이 요구하는 최적의 의존성 버전을 런타임에 협상
Concept · 03

Platform Engineering

개발자가 아키텍처 규칙을 수동으로 신경 쓰지 않아도 도구와 시스템을 통해 자연스럽게 지켜지도록 인프라와 관측성을 제공하는 엔지니어링 영역입니다.

  • Fan-in(진입 차수) 지표를 통해 패키지 변경 시 영향도 및 재빌드 범위 파악
  • 순환 의존성 및 계층 규칙 위반을 CI 단계에서 자동 감지하여 머지 차단