Angular Academy · 강의

원격 모듈 로드하기

원격 마이크로 프런트엔드를 동적으로 로드합니다.

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

런타임에 원격 앱 불러오기

원격 앱이 모듈을 노출하고 호스트가 해당 URL을 알고 있으면 호스트는 loadRemoteModule을 사용해 필요할 때 이를 불러옵니다. 이는 HTTP를 통한 동적 가져오기이므로 원격 앱에 관한 어떤 내용도 호스트 빌드에 번들로 포함되지 않습니다.

loadRemoteModule API

loadRemoteModule은 매니페스트의 원격 앱 이름과 원격 앱의 exposes에 지정된 노출 키를 받습니다. 해당 모듈을 나타내는 프라미스를 반환합니다.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

원격 라우트 지연 로딩

가장 깔끔한 패턴은 각 원격 앱에서 라우트 파일을 노출하고 호스트 라우터에서 loadChildren으로 지연 로딩하는 것입니다. 그러면 해당 라우트를 방문할 때만 원격 앱이 로드됩니다.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

단일 구성 요소 불러오기

개별 독립 실행형 구성 요소를 노출하고 불러올 수도 있습니다. 전체 라우트 영역 대신 위젯을 삽입할 때 유용합니다.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

원격 앱 측에서 노출하기

호스트가 불러올 수 있도록 원격 앱은 exposes 맵에 내보낼 항목을 나열해야 합니다. 이 키를 호스트가 loadRemoteModule에 전달합니다.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

동적 매니페스트 확인

호스트는 시작할 때 매니페스트를 읽으므로, 호스트를 다시 빌드하지 않고도 환경(개발, 스테이징, 운영)별로 원격 URL을 교체할 수 있습니다. 다른 매니페스트 파일을 배포하기만 하면 됩니다.

로드 실패 처리

원격 앱은 네트워크를 통해 로드되므로 오프라인이나 배포 진행 중인 상황에서 실패할 수 있습니다. 하나의 원격 앱이 고장 나도 전체 셸이 중단되지 않도록 로드를 오류 처리로 감싸십시오.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

경계를 넘어 데이터 전달하기

호스트와 원격 앱 간 통신에는 직접 가져오기가 아니라 공유 싱글턴 서비스나 라우터를 사용합니다. 공유 인증 서비스(싱글턴)를 사용하면 원격 앱이 호스트에서 설정한 현재 사용자를 읽을 수 있습니다.

버전 관리와 계약

노출 키(예: ./Routes)와 그 형태가 계약을 구성합니다. 내보내는 형태를 변경하면 이를 불러오는 호스트가 손상될 수 있으므로, 노출된 모듈을 공개 API처럼 취급하고 신중하게 버전을 관리하십시오.

사전 로딩 전략

앱이 유휴 상태가 된 후 원격 앱을 미리 불러오면 초기 로드 속도는 가볍게 유지하면서 이후 탐색을 즉시 수행할 수 있습니다. 이렇게 하면 시작 속도와 사용자가 체감하는 탐색 속도의 균형을 맞출 수 있습니다.

엔드 투 엔드 흐름

실행 경로를 정리하면 다음과 같습니다. 호스트가 매니페스트를 읽고, 사용자가 연합 라우트로 이동하면 loadRemoteModule이 원격의 remoteEntry.json을 가져옵니다. 공유 싱글턴은 재사용되며, 원격의 라우트와 구성 요소가 호스트 셸 내부에서 렌더링됩니다.

빠른 확인

호스트는 원격 기능을 어떻게 지연 로드하나요?

요약

호스트는 런타임에 loadRemoteModule(name, key)을 사용해 원격을 로드하며, 일반적으로 지연 라우트를 위한 loadChildren/loadComponent 내부에서 사용합니다. 원격은 해당 키를 expose해야 하며, 매니페스트는 환경별 URL을 확인합니다. 로드 실패는 우아하게 처리하고, 공유 싱글턴을 통해 통신하며, 노출된 모듈을 버전이 지정된 계약으로 다루어야 합니다.

자주 묻는 질문

“원격 모듈 로드하기” 강의는 무료인가요?

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

“원격 모듈 로드하기”에서 뭘 배우나요?

원격 마이크로 프런트엔드를 동적으로 로드합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“원격 모듈 로드하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기