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

핵심 요약

미리디는 모노레포 기반 프론트엔드 아키텍처를 CI/CD에서 lint, type-check, test의 독립 파이프라인으로 구현하고, Run-time 모듈 통합과 manifest 기반 로딩으로 Fragment의 독립 배포를 가능하게 했습니다.

구현 방법

• CI 파이프라인을 lint(biome, eslint), type-check(tsc emitDeclarationOnly), test(vitest)로 구성하고 세 파이프라인을 독립적으로 병렬 실행하도록 설계
• 타입 체크는 .d.ts 선언만 필요하도록 설정하고 실행 JS는 필요 없도록 분리
• 테스트 파이프라인은 번들된 하위 패키지의 JS가 필요하므로 선행 번들링이 필요
• Run-time 모듈 통합은 Webpack 5 Module Federation으로 구현, manifest.json 기반의 동적 로딩으로 Fragment 버전 업데이트 시 Host 재배포를 필요 없게 설계
• 공유 스코프를 싱글톤으로 관리하고 React 버전 충돌 위험을 줄임
• turbo.json의 inputs를 정밀 관리해 캐시 무효화를 최소화하고, pnpm 워크스페이스 및 manifest 기반 런타임 로딩 체계를 운영

주요 결과

• PR 하나로 3개 파이프라인의 피드백을 동시에 확인 가능
• 파이프라인 간 독립성으로 빌드 재배포 영향 최소화 및 병목 방지
• Run-time Federation으로 Fragment의 독립 배포 실현 가능성 확인
• manifest 기반 URL 관리로 버전 업데이트가 Host 재배포 없이 적용되는 구조 확보