Angular 및 Native Federation을 사용한 마이크로 프론트엔드
엔터프라이즈급 소프트웨어 시스템은 여러 교차 기능 팀에 의해 구현되는 경우가 많으며, 이러한 팀이 새로운 기능을 효율적으로 제공할 수 있도록 하려면 팀 간의 조정 필요성을 최소화하는 것이 바람직합니다. 이를 위해서는 개별 팀이 처리할 수 있는 저결합 영역으로 시스템을 수직화하는 모듈화가 필요합니다. Micro Frontends는 높은 수준의 팀 자율성과 같은 여러 이점을 약속하는 아키텍처 스타일이지만 수많은 도전 과제도 있습니다. Micro Frontends는 별도의 빌드 프로세스를 생성하며, 이를 증분 빌드와 결합하여 빌드 시간을 개선할 수 있습니다. 이 기능은 팀을 개별 응용 프로그램 또는 별도의 배포에 맞추는 것과 같은 다른 측면을 적용하지 않고도 사용할 수 있습니다. 그러나 개별적으로 개발된 마이크로 프론트엔드는 UI/UX에서 분기되어 일관되지 않은 모양으로 이어질 수 있으며, 여러 애플리케이션을 로드하면 다운로드해야 하는 번들 수가 증가하여 로딩 시간에 부정적인 영향을 미치고 메모리 압력이 증가합니다.응용 프로그램을 저결합 부분으로 분할하는 것이 일반적으로 가장 좋은 방법일 수 있지만, 개별 응용 프로그램으로 구현할 수 있을 만큼 수직 간의 경계를 명확하게 정의하기 어려운 경우가 많습니다. 이를 중요한 솔루션에 통합하면 복잡성이 추가되고 컴파일 시간 통합에서 런타임 통합으로 전환하면 심각한 결과가 발생합니다.Angular 팀은 Monorepos에서 개별 수직을 구현하는 것과 같은 대안이 적합한지 확인할 것을 권장합니다. 그러나 일관된 UI/UX를 지원하는 디자인 시스템을 구축하거나 개별 시스템 파트를 지연 로드하는 것과 같이 Micro Frontends의 단점을 보완하는 방법도 있습니다.Native Federation은 Angular CLI와 긴밀하게 통합되고 Angular로 Micro Frontends를 구현할 수 있는 커뮤니티 프로젝트입니다. 이를 통해 애플리케이션은 별도로 구축 및 배포된 다른 애플리케이션의 일부를 느리게 로드할 수 있으며 호스트와 원격 간에 Angular 또는 RxJS와 같은 종속성을 공유할 수 있습니다.네이티브 페더레이션을 설정하기 위해 ApplicationBuilder에 대한 네이티브 페더레이션 빌더 위임을 구성하고 구성 파일 federation.config.js 생성하는 회로도가 제공됩니다. 구성은 원격 또는 호스트에 고유한 이름을 할당하고 공유할 종속성을 정의합니다. 또한 원격은 셸에 로드할 수 있는 노출된 EcmaScript 모듈을 정의합니다.회로도는 또한 Native Federation을 main.ts에 초기화하는 코드를 추가하고, 기존의 원격 지연 로딩에 의해 노출되는 구성 요소 또는 라우팅 구성을 로드하기 위해 Native Federation의 loadRemoteModule 함수와 결합됩니다.