의존성 공유
원격 모듈 간에 Angular와 라이브러리를 공유합니다.
의존성 공유은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
종속성을 공유하는 이유
호스트와 원격 앱 세 개가 각각 Angular 사본을 번들에 포함하면 브라우저는 Angular를 네 번 다운로드합니다. 더 심각한 문제는 여러 Angular 인스턴스가 생겨 의존성 주입이 손상된다는 것입니다. 공유를 사용하면 사본 하나만 한 번 불러와 모두가 재사용합니다.
shared 섹션
federation.config.js의 shared 객체는 호스트와 원격 앱 간에 공유할 종속성을 선언합니다. Native Federation은 런타임에 이러한 종속성의 중복을 제거합니다.
module.exports = withNativeFederation({
shared: {
...shareAll({ singleton: true, strictVersion: true }),
},
});shareAll 도우미
shareAll()은 하나의 구성으로 package.json의 모든 종속성을 공유하며, 일반적으로 여기서 시작합니다. 그런 다음 특정 패키지를 재정의할 수 있습니다.
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}singleton: Angular에서 중요한 이유
singleton: true는 전체 앱에서 패키지 인스턴스를 정확히 하나만 사용하도록 강제합니다. Angular 핵심 패키지, RxJS, 라우터는 MUST 싱글턴이어야 합니다. @angular/core 사본이 두 개면 인젝터 트리도 두 개가 되어 런타임 오류가 발생합니다.
버전 협상
원격 앱이 서로 다른 버전을 요청하면 federation은 호환되는 버전을 선택합니다. strictVersion: true로 설정하면 호환되지 않을 때 불일치 버전을 조용히 불러오는 대신 오류를 발생시켜 문제를 일찍 드러냅니다.
shared: {
'@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}자체 라이브러리 공유하기
공유하는 디자인 시스템이나 인증 라이브러리도 싱글턴이어야 상태(예: 현재 사용자)가 일관되게 유지됩니다. 이름을 지정하여 명시적으로 공유하십시오.
shared: {
'@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
'@myorg/auth': { singleton: true },
}requiredVersion: auto
requiredVersion: 'auto'는 package.json에서 버전을 읽으므로 버전을 직접 지정할 필요가 없습니다. 종속성을 업그레이드할 때도 구성이 동기화된 상태로 유지됩니다.
런타임에 일어나는 일
각 빌드는 공유 패키지에 관한 메타데이터를 생성합니다. 로드할 때 federation은 호스트와 원격 앱의 버전을 비교하고 import map을 통해 공유 모듈 하나를 제공합니다. 따라서 브라우저는 이를 한 번만 가져옵니다.
공유하지 않을 때의 비용
Angular를 공유하지 않는 것은 가장 흔한 실수입니다. 앱이 작동하는 것처럼 보이다가, Angular 사본이 두 개 존재하기 때문에 "NG0203: inject() must be called from an injection context"와 같은 이해하기 어려운 오류가 발생합니다. 싱글턴으로 공유하면 이를 방지할 수 있습니다.
버전 정렬 유지하기
독립적으로 배포하면 버전이 서로 달라질 수 있습니다. 호스트가 Angular 18을 사용하면서 Angular 17을 필요로 하는 원격 앱과 안전하게 공유할 수는 없으므로, 팀들은 프레임워크 패키지에 사용할 공유 버위 범위에 합의하고 함께 업그레이드해야 합니다.
공유 패키지 건너뛰기
때로는 원격 앱에 작은 유틸리티의 격리된 사본이 필요할 수 있습니다. 공유 대상에서 제외하여 자체적으로 번들에 포함할 수 있으며, 독립성을 얻는 대신 중복으로 인한 크기 증가를 감수해야 합니다.
shared: {
...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it빠른 확인
어떤 패키지를 싱글턴으로 만들어야 하나요?
복습
shared 종속성을 선언(대개 shareAll 사용)하여 호스트와 원격 앱이 하나의 사본을 불러오도록 하십시오. 프레임워크와 상태를 보유하는 라이브러리(@angular/core, 라우터, RxJS, 인증 라이브러리)는 singleton: true로 설정하고, strictVersion과 requiredVersion: 'auto'를 사용하여 버전 불일치를 감지하십시오. Angular를 공유하지 않으면 DI 오류가 발생합니다.
자주 묻는 질문
“의존성 공유” 강의는 무료인가요?
네 — “의존성 공유” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“의존성 공유”에서 뭘 배우나요?
원격 모듈 간에 Angular와 라이브러리를 공유합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“의존성 공유” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.