Angular 마이크로 프론트엔드
Module federation, 마이크로 프론트엔드 아키텍처, 공유 의존성, 배포 전략, 통신 패턴
1Angular 컨텍스트에서 마이크로 프론트엔드 아키텍처란 무엇입니까?
Angular 컨텍스트에서 마이크로 프론트엔드 아키텍처란 무엇입니까?
답변
마이크로 프론트엔드 아키텍처는 모놀리식 Angular 애플리케이션을 더 작고 독립적인 애플리케이션으로 분리하여 각각 별도로 개발 및 배포합니다. 각 마이크로 프론트엔드는 자체 repository, CI/CD 파이프라인 및 전담 팀을 가질 수 있습니다. Webpack 5의 Module Federation은 Angular에서 이 아키텍처를 구현하기 위한 권장 기술이며, 다른 애플리케이션의 코드를 runtime에 동적으로 로드할 수 있게 합니다.
2Angular 마이크로 프론트엔드 아키텍처에서 Module Federation의 역할은 무엇입니까?
Angular 마이크로 프론트엔드 아키텍처에서 Module Federation의 역할은 무엇입니까?
답변
Module Federation은 rebuild 없이 runtime에 Angular 애플리케이션 간에 코드를 공유할 수 있게 합니다. 각 마이크로 프론트엔드는 다른 애플리케이션(host)에서 사용할 수 있는 모듈(remote)을 노출합니다. 이는 코드 중복을 방지하고 bundle 크기를 줄이며 독립적인 배포를 가능하게 합니다. Module Federation은 비동기 로드, 의존성 해결, Angular core와 같은 공통 라이브러리 공유를 자동으로 처리합니다.
3Module Federation에서 host 애플리케이션과 remote 애플리케이션의 차이점은 무엇입니까?
Module Federation에서 host 애플리케이션과 remote 애플리케이션의 차이점은 무엇입니까?
답변
host 애플리케이션은 remote가 노출한 모듈을 소비합니다. webpack.config에서 remote를 구성하고 해당 모듈을 동적으로 로드합니다. remote 애플리케이션은 다른 애플리케이션에서 소비할 모듈(component, service)을 노출합니다. 동일한 애플리케이션이 host이면서 동시에 remote가 될 수 있습니다. host는 애플리케이션 shell(header, navigation, layout)을 제어하고 remote는 비즈니스 기능을 제공합니다.
@angular-architects/module-federation을 사용하여 Angular 프로젝트에서 Module Federation을 구성하는 방법은?
Module Federation에서 shared scope를 구성하는 것이 왜 중요합니까?
+17 면접 질문