핵심 요약
올리브영의 프론트엔드 팀은 Nx를 활용해 모노레포에서 마이크로프런트엔드를 빌드타임과 런타임으로 통합하는 구현 방법과 이점을 제시했습니다.
구현 방법
- 빌드타임 통합: Nx 워크스페이스 생성 및 main-app(Next.js)와 libs/sub-app 구성, 단일 번들 배포.
- 런타임 통합: host/remote 앱 생성, module-federation.config.ts로 연결, remotes.d.ts/tsconfig 조정.
- 실행 및 확인: nx serve remoteApp으로 병렬 실행, host/remote 각각의 주소에서 동적 로딩 확인.
주요 결과
- 빌드타임 통합으로 서브 모듈이 하나의 번들에 포함되어 배포가 간소화됩니다.
- 런타임 통합으로 각 앱의 독립 개발/배포 및 런타임에서의 코드 공유가 가능해집니다.
- Nx의 Computation Caching, Affected, 의존성 그래프 시각화 등 도구 기능이 협업과 유지보수에 기여합니다.
