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

대규모 서비스의 코드베이스가 확장됨에 따라, 모듈 간 의존성을 관리하고 독립적인 개발 및 배포를 가능하게 하는 마이크로프론트엔드(MFE) 아키텍처의 중요성이 커지고 있습니다.

올리브영은 효율적인 MFE 구축을 위해 모노레포 도구인 Nx를 검토했습니다. Nx는 Computation Caching, 변경된 모듈만 빌드하는 Affected 기능, 의존성 시각화를 돕는 Graph 기능을 통해 대규모 프로젝트 관리에 최적화된 환경을 제공합니다.

본 글에서는 Nx를 사용하여 두 가지 방식의 MFE 구현 과정을 소개합니다.

• 빌드타임 통합 방식: 여러 모듈을 하나의 메인 앱에 포함시켜 최종적으로 하나의 번들로 함께 빌드하고 배포하는 방식
• 런타임 통합 방식: Module Federation 기술을 활용하여 서로 다른 앱을 런타임에 하나로 통합하는 방식

Nx는 Turborepo와 비교했을 때 의존성 시각화와 풍부한 플러그인 생태계를 갖추고 있어, 복잡한 아키텍처를 점진적으로 도입하고 확장하는 데 유리합니다.