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

간단 소개

올리브영의 대규모 프론트엔드 아키텍처에서 Nx를 활용한 마이크로프론트엔드 구축 방법과 그 장점을 소개합니다.

AI Summary

마이크로프론트엔드(MFE)와 Nx 도입 배경
- MFE는 대규모 애플리케이션을 작고 독립적인 모듈로 분리하여 개발 속도와 유지보수성을 높이는 아키텍처 패턴.
- 올리브영은 코드베이스 확장 및 독립적 개발/배포 필요성으로 모노레포 환경에서 MFE 구축 도구 검토.
- Nx는 모노레포 관리 도구를 넘어 MFE 운영에 필요한 기능을 통합 제공하여 선택.
Nx의 특징 및 장점
- Nx는 대규모 프로젝트에서 여러 앱과 라이브러리를 하나의 저장소에서 체계적으로 관리하는 모노레포 도구.
- 주요 기능: Computation Caching, Affected (변경 감지), Graph (의존성 시각화), CLI (개발 환경 구성 지원).
- Turborepo 대비 의존성 시각화 및 풍부한 플러그인 생태계가 강점이며, MFE 아키텍처 구성에 최적화.
Nx를 활용한 MFE 구현 방식
- 빌드타임 통합: 여러 모듈을 하나의 메인 앱에 포함시켜 단일 번들로 빌드/배포. Nx의 Affected 및 캐싱으로 효율적 빌드 가능.
- 런타임 통합 (모듈 페더레이션): 각 앱을 독립적으로 개발/배포 후 런타임에 동적으로 통합. Webpack 모듈 페더레이션 설정을 Nx가 추상화하여 간편하게 구현.
- Nx CLI를 통해 워크스페이스, host/remote 앱 생성 및 모듈 페더레이션 설정 간소화.