모듈 연합: 동적 런타임 가져오기

여러 팀으로 구성된 프런트엔드 조직에서는 독립적으로 배포되는 여러 애플리케이션이 UI 컴포넌트와 유틸리티를 공유해야 하는 경우가 많습니다. npm에 게시하려면 버전을 올리고 새 릴리스를 만든 다음, 이를 사용하는 모든 애플리케이션을 전체 재배포해야 하므로 팀 간 결합이 강해지고 반복 주기가 느려집니다.

기존 방식인 공유 코드를 npm 패키지로 게시하는 방식에서는 공유 버튼 컴포넌트를 업데이트할 때 npm 패키지를 업데이트하고, 새 버전을 게시하고, 이를 사용하는 모든 앱의 package.json을 업데이트하고, 모든 앱을 다시 빌드하고 재배포해야 합니다. Module Federation은 이 모든 단계를 없앱니다.

Module Federation을 사용하면 한 애플리케이션인 "원격"이 JavaScript 모듈을 노출하고, 다른 애플리케이션인 "호스트"가 이를 빌드나 재배포 없이 런타임에 로드하여 실행할 수 있습니다. 사용자가 호스트 앱을 로드하면 필요한 시점에 원격의 모듈을 동적으로 가져옵니다.

웹팩 5는 ModuleFederationPlugin을 통해 Module Federation을 핵심 내장 기능으로 도입했습니다. 웹팩 5 이전에는 비슷한 패턴을 구현하려면 복잡한 수동 구성이나 서드파티 플러그인이 필요했습니다. 이 플러그인은 모든 동적 로딩과 공유 범위 관리를 자동으로 처리합니다.

원격 애플리케이션은 독립적으로 배포되며, 다른 애플리케이션이 사용할 수 있도록 하나 이상의 모듈을 노출합니다. 여기에는 리액트 컴포넌트, 유틸리티 또는 전체 기능 페이지가 포함될 수 있습니다. 원격 애플리케이션은 무엇을 노출하고 어떻게 로드할지 설명하는 remoteEntry.js 매니페스트를 빌드합니다.

호스트는 하나 이상의 원격 애플리케이션에서 모듈을 사용하는 애플리케이션입니다. 호스트는 웹팩 구성에서 이름과 주소를 사용하여 원격 애플리케이션을 참조합니다. 호스트 코드가 원격 모듈을 가져오면 Module Federation 런타임이 원격 주소에서 해당 모듈을 동적으로 가져와 실행합니다.

공유 모듈은 호스트와 원격 애플리케이션 양쪽에 포함되어 있더라도 한 번만 로드해야 하는 라이브러리입니다. 예를 들어 리액트와 리액트 DOM이 있습니다. 리액트를 공유 싱글턴으로 지정하면 Module Federation이 리액트의 한 버전만 실행하도록 보장합니다. 여러 리액트 인스턴스가 있으면 리액트의 훅이 작동하지 않으므로 이는 매우 중요합니다.

원격 애플리케이션을 빌드하면 웹팩은 구성된 파일 이름으로 remoteEntry.js 파일을 생성합니다. 이 파일은 가벼운 매니페스트이자 초기화 스크립트로, 원격 애플리케이션이 노출하는 모듈과 해당 모듈을 로드할 청크 주소를 선언하고 공유 범위를 초기화합니다. 호스트는 원격 애플리케이션이 제공하는 항목을 확인하기 위해 이 파일을 먼저 다운로드합니다.

호스트가 원격 모듈에서 가져오기를 만나면 원격 코드가 이미 로드되었는지 확인합니다. 로드되지 않았다면 원격 주소에서 remoteEntry.js를 가져오고, 공유 범위를 초기화하여 공유 라이브러리 버전을 조정한 다음, 요청된 모듈이 포함된 특정 청크를 다운로드하여 실행합니다.

한 팀이 호스트 애플리케이션을 건드리지 않고 새 버전의 원격 애플리케이션(업데이트된 Button 컴포넌트)을 배포합니다. 호스트는 항상 최신 remoteEntry.js 주소에서 가져오므로, 다음에 호스트를 로드하는 사용자는 자동으로 새 Button을 받습니다. 호스트를 다시 빌드하거나 재배포할 필요가 없고, 조정도 필요하지 않습니다.

기존 마이크로 프런트엔드 패턴 중 하나는 팀이 소유한 섹션을 격리하기 위해 아이프레임을 사용하는 방식입니다. 아이프레임은 강력한 격리를 제공하지만 공유 상태, 주소 라우팅, 스타일 지정이 매우 어려워집니다. Module Federation은 모든 것을 동일한 JavaScript 컨텍스트에 유지하므로 공유 라우팅, 공유 인증 상태, 일관된 스타일을 사용할 수 있습니다.

Module Federation에서 remoteEntry.js의 역할은 무엇입니까?

Module Federation은 런타임 모듈 로딩을 지원하여 공유 프런트엔드 코드의 독립 배포 문제를 해결합니다. 원격 애플리케이션은 remoteEntry.js를 통해 모듈을 노출하고, 호스트는 다시 빌드하지 않고 이를 동적으로 사용합니다. 공유 싱글턴인 리액트와 리액트 DOM은 라이브러리가 중복으로 로드되는 것을 방지합니다. 이 아키텍처를 사용하면 진정한 독립 배포가 가능하므로, 원격 애플리케이션을 업데이트하면 모든 호스트 애플리케이션에 변경 사항이 즉시 반영됩니다.