Nx로 MFE 구축! 올리브영 프론트엔드 개발 경험 공유

Nx를 활용하여 마이크로프론트엔드(MFE) 아키텍처를 구축하는 방법을 소개함

빌드타임 및 런타임 통합 방식을 실제 코드 예시와 함께 설명함

모듈 페더레이션을 통해 각 앱의 독립적인 개발 및 배포를 지원하며, 개발 생산성 향상을 기대함

Nx: 모노레포 환경에서의 MFE 구축

Nx는 모노레포 환경에서 MFE를 구축하기 위한 강력한 도구이다. 구체적으로 빌드 캐싱, Affected 기능을 통해 빌드 속도를 개선한다. 따라서 의존성 시각화 기능을 활용하여 코드베이스의 복잡성을 관리하고, 개발 생산성을 높일 수 있다.

빌드타임 vs 런타임 통합 방식 비교

빌드타임 통합은 모든 모듈을 하나의 번들로 묶어 배포하는 방식이다. 반면, 런타임 통합(모듈 페더레이션)은 각 앱을 독립적으로 배포한다. 따라서 독립적인 배포 주기 관리가 가능하며, 유연한 개발 환경을 구축할 수 있다. 하지만 모듈 페더레이션 설정의 복잡성을 고려해야 한다.

Nx를 활용한 MFE 구현 전략

Nx를 사용하여 MFE를 구현할 때, CLI를 통해 워크스페이스를 생성한다. 구체적으로 모듈 페더레이션 설정을 통해 host와 remote 앱을 연결한다. 따라서 타입 에러 방지를 위해 타입 선언을 추가하고, tsconfig 설정을 수정해야 한다. 결과적으로 MFE 아키텍처를 효과적으로 구축할 수 있다.