대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드

Context

올리브영의 프론트엔드 코드베이스가 지속적으로 확장되면서 여러 도메인과 기능이 복잡하게 얽혔다. 각 모듈 간의 의존성을 명확히 파악·관리하고, 새로운 기능을 빠르게 출시하면서도 각 팀이 독립적으로 개발·배포할 수 있는 유연성이 필요해졌다.

Technical Solution

• Nx 워크스페이스 생성: CLI 명령어(npx create-nx-workspace@latest)로 모노레포 환경 구축 및 초기 앱(Next.js 기반 main-app) 자동 생성
• 빌드타임 통합 구현: libs 디렉토리에 sub-app(React 기반 라이브러리) 생성 후 main-app에서 @nx-example/sub-app 경로로 import하여 빌드 시점에 하나의 번들로 통합
• 런타임 통합 구현: 모듈 페더레이션을 활용해 host 앱과 remote 앱을 독립적으로 빌드·배포한 후 런타임에 동적으로 로드하여 통합
• 의존성 관리 자동화: Nx의 Affected 기능으로 변경된 모듈에만 선택적 빌드/테스트 실행, tsconfig.base.json의 path 매핑으로 절대 경로 임포트 지원
• 빌드 최적화: Computation Caching으로 이전 빌드/테스트 결과 재사용, 변경되지 않은 모듈은 캐시에서 빠르게 불러오기

Key Takeaway

Nx는 단순 모노레포 관리를 넘어 의존성 시각화(Graph), CLI 기반 스캐폴딩, 모듈화된 플러그인 생태계를 통해 MFE와 같은 복잡한 아키텍처에서 빌드타임·런타임 방식을 모두 지원하며, 팀 규모와 프로젝트 단계에 따라 기능을 점진적으로 도입할 수 있다.