# Angular 마이크로 프론트엔드 (Angular)

> Module federation, 마이크로 프론트엔드 아키텍처, 공유 의존성, 배포 전략, 통신 패턴

- 20 면접 질문
- Senior
- [면접 질문: Angular](https://sharpskill.dev/ko/technologies/angular/interview-questions.md)

## 1. Angular 컨텍스트에서 마이크로 프론트엔드 아키텍처란 무엇입니까?

**답변**

마이크로 프론트엔드 아키텍처는 모놀리식 Angular 애플리케이션을 더 작고 독립적인 애플리케이션으로 분리하여 각각 별도로 개발 및 배포합니다. 각 마이크로 프론트엔드는 자체 repository, CI/CD 파이프라인 및 전담 팀을 가질 수 있습니다. Webpack 5의 Module Federation은 Angular에서 이 아키텍처를 구현하기 위한 권장 기술이며, 다른 애플리케이션의 코드를 runtime에 동적으로 로드할 수 있게 합니다.

## 2. Angular 마이크로 프론트엔드 아키텍처에서 Module Federation의 역할은 무엇입니까?

**답변**

Module Federation은 rebuild 없이 runtime에 Angular 애플리케이션 간에 코드를 공유할 수 있게 합니다. 각 마이크로 프론트엔드는 다른 애플리케이션(host)에서 사용할 수 있는 모듈(remote)을 노출합니다. 이는 코드 중복을 방지하고 bundle 크기를 줄이며 독립적인 배포를 가능하게 합니다. Module Federation은 비동기 로드, 의존성 해결, Angular core와 같은 공통 라이브러리 공유를 자동으로 처리합니다.

## 3. Module Federation에서 host 애플리케이션과 remote 애플리케이션의 차이점은 무엇입니까?

**답변**

host 애플리케이션은 remote가 노출한 모듈을 소비합니다. webpack.config에서 remote를 구성하고 해당 모듈을 동적으로 로드합니다. remote 애플리케이션은 다른 애플리케이션에서 소비할 모듈(component, service)을 노출합니다. 동일한 애플리케이션이 host이면서 동시에 remote가 될 수 있습니다. host는 애플리케이션 shell(header, navigation, layout)을 제어하고 remote는 비즈니스 기능을 제공합니다.

## 17개 추가 질문 이용 가능

- @angular-architects/module-federation을 사용하여 Angular 프로젝트에서 Module Federation을 구성하는 방법은?
- Module Federation에서 shared scope를 구성하는 것이 왜 중요합니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Angular 면접 주제

- [TypeScript 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-basics.md): 25개 질문, Junior
- [TypeScript 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-advanced.md): 20개 질문, Junior
- [Angular 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-fundamentals.md): 20개 질문, Junior
- [컴포넌트와 라이프사이클](https://sharpskill.dev/ko/technologies/angular/interview-questions/components-lifecycle.md): 20개 질문, Junior
- [Services & Dependency Injection](https://sharpskill.dev/ko/technologies/angular/interview-questions/services-dependency-injection.md): 20개 질문, Junior
- [Angular 모듈 구성](https://sharpskill.dev/ko/technologies/angular/interview-questions/modules-organization.md): 22개 질문, Mid-Level
- [Angular CLI](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-cli.md): 18개 질문, Junior
- [디렉티브와 Pipe](https://sharpskill.dev/ko/technologies/angular/interview-questions/directives-pipes.md): 22개 질문, Mid-Level
- [라우팅과 내비게이션](https://sharpskill.dev/ko/technologies/angular/interview-questions/routing-navigation.md): 24개 질문, Mid-Level
- [리액티브 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-reactive.md): 26개 질문, Mid-Level
- [템플릿 기반 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-template-driven.md): 16개 질문, Mid-Level
- [RxJS 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-fundamentals.md): 22개 질문, Mid-Level
- [RxJS 연산자](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-operators.md): 24개 질문, Mid-Level
- [HttpClient 및 API 호출](https://sharpskill.dev/ko/technologies/angular/interview-questions/http-client.md): 22개 질문, Mid-Level
- [기본 상태 관리](https://sharpskill.dev/ko/technologies/angular/interview-questions/state-management-basics.md): 20개 질문, Mid-Level
- [Change Detection](https://sharpskill.dev/ko/technologies/angular/interview-questions/change-detection.md): 20개 질문, Mid-Level
- [Angular Signals](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-signals.md): 20개 질문, Mid-Level
- [Standalone Components](https://sharpskill.dev/ko/technologies/angular/interview-questions/standalone-components.md): 18개 질문, Mid-Level
- [Angular 단위 테스트](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-unit.md): 22개 질문, Mid-Level
- [엔드투엔드 테스팅](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-e2e.md): 18개 질문, Mid-Level
- [빌드 및 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/build-optimization.md): 20개 질문, Mid-Level
- [NgRx 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-fundamentals.md): 24개 질문, Senior
- [NgRx 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-advanced.md): 24개 질문, Senior
- [Angular 아키텍처](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-architecture.md): 22개 질문, Senior
- [성능 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/performance-optimization.md): 22개 질문, Senior
- [보안 및 모범 사례](https://sharpskill.dev/ko/technologies/angular/interview-questions/security-best-practices.md): 20개 질문, Senior
- [고급 RxJS 패턴](https://sharpskill.dev/ko/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22개 질문, Senior
- [Angular Universal 및 SSR](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-universal-ssr.md): 20개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/angular/interview-questions/micro-frontends-angular