Angular Academy · 강의

Angular용 네이티브 페더레이션

Angular에서 모듈 페더레이션을 구성합니다.

Angular용 네이티브 페더레이션은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Native Federation을 사용하는 이유

기존 Module Federation은 webpack에 종속되어 있었습니다. Angular의 빌드 시스템이 esbuild로 이동하면서 커뮤니티는 같은 개념을 구현하되 웹 표준(import map과 ES 모듈)을 기반으로 하는 빌드 도구 독립적인 방식인 Native Federation을 만들었습니다.

패키지

Angular용 Native Federation은 @angular-architects/native-federation에 포함되어 있습니다. Angular CLI 스캐매틱으로 추가하면 구성과 빌드 과정이 연결됩니다.

ng add @angular-architects/native-federation

호스트 초기화

셸 앱에서 스캐매틱을 실행하고 dynamic-host를 선택합니다. 그러면 federation.config.js가 생성되고, Angular가 시작되기 전에 federation을 초기화하도록 부트스트랩 과정이 업데이트됩니다.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

원격 앱 초기화

기능 앱에서는 동일한 초기화 명령을 remote와 함께 실행합니다. 그러면 원격 앱의 일부를 호스트에 노출하는 구성이 생성됩니다.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

federation.config.js

이 구성은 federation의 핵심입니다. 원격 앱의 이름을 지정하고, 어떤 항목을 exposes할지 나열하며, shared 종속성을 선언합니다.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

부트스트랩 변경 사항

Native Federation에서는 import map이 준비되도록 부트스트랩 전에 초기화해야 합니다. 스캐매틱은 main.ts를 초기화 단계로 분리하고, 여기서 bootstrap.ts를 불러오도록 합니다.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

호스트에서 원격 앱 나열하기

호스트는 원격 앱 이름을 해당 remoteEntry.json URL에 매핑하는 매니페스트를 유지합니다. 따라서 런타임에 각 원격 앱을 어디에서 가져와야 하는지 알 수 있습니다.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

매니페스트 불러오기

매니페스트 경로를 initFederation에 전달합니다. 호스트는 시작할 때 이를 한 번 읽은 뒤, 나열된 원격 앱을 필요할 때 불러올 수 있습니다.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

표준 기반, webpack에 종속되지 않음

Native Federation은 네이티브 ES 모듈과 import map을 사용하므로 esbuild, Vite 또는 다른 번들러와 함께 작동합니다. 이러한 분리 덕분에 최신 Angular에서 권장되는 방식이 되었습니다.

원격 앱별 개발 서버

개발 중에는 각 원격 앱이 자체 포트(ng serve --port 4201)에서 실행됩니다. 호스트는 매니페스트를 통해 해당 URL을 가리키므로 전체 구성을 로컬에서 실행할 수 있습니다.

Native Federation이 제공하는 것

간단히 말하면 독립적인 빌드, 공유 싱글턴(Angular 인스턴스 하나), 원격 앱의 동적 로딩, 특정 번들러에 대한 비종속성을 제공합니다. 다음 단원에서는 종속성 공유와 원격 모듈 로딩을 자세히 다룹니다.

빠른 확인

Angular에서 기존 Module Federation보다 Native Federation을 사용하는 이유는 무엇인가요?

복습

Native Federation(@angular-architects/native-federation)은 import map을 사용하여 esbuild 기반 Angular에 모듈 federation을 제공합니다. 스캐매틱으로 호스트와 원격 앱을 초기화하고, federation.config.js에서 exposes와 shared를 구성하며, 부트스트랩 전에 initFederation을 호출하고, 매니페스트에 원격 앱을 나열하십시오.

자주 묻는 질문

“Angular용 네이티브 페더레이션” 강의는 무료인가요?

네 — “Angular용 네이티브 페더레이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Angular용 네이티브 페더레이션”에서 뭘 배우나요?

Angular에서 모듈 페더레이션을 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Angular용 네이티브 페더레이션” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기