마이크로 프런트엔드 구현을 위한 Module Federation API 활용

Module Federation API를 활용해 모듈 관리

현대 웹 애플리케이션 개발에서 모듈화는 필수적인 개념입니다. 특히 대규모 프로젝트에서는 각 팀이 독립적으로 모듈을 개발하고, 이를 통합하는 방식이 일반적입니다. Webpack 5에서 도입된 Module Federation API는 이러한 통합 과정을 획기적으로 단순화하고, 마이크로 프런트엔드(Micro Frontends) 패턴을 구현하는 강력한 도구를 제공합니다.

이 글에서는 Module Federation API의 개념, 주요 기능, 그리고 실제 구현 방법에 대해 살펴봅니다.

---

1. Module Federation API란?

Module Federation API는 Webpack 5에서 새롭게 도입된 기능으로, 서로 다른 애플리케이션 간에 모듈을 동적으로 공유하고 로드할 수 있게 해줍니다. 이를 통해 독립적으로 배포 가능한 마이크로 프런트엔드 구현이 가능하며, 기존의 번들링 방식을 혁신적으로 개선할 수 있습니다.

주요 특징

• 런타임 모듈 로딩: 빌드 타임이 아닌 런타임에 모듈을 로드합니다.
• 모듈 공유: 여러 애플리케이션이 동일한 모듈을 공유하여 중복 다운로드를 방지합니다.
• 독립적 배포: 각 모듈이 독립적으로 배포 및 업데이트될 수 있습니다.
• 버전 관리: 특정 버전의 모듈을 요구하거나, 호환 가능한 버전을 자동으로 선택할 수 있습니다.

---

2. Module Federation API의 작동 방식

Module Federation은 Webpack의 새로운 플러그인을 통해 설정됩니다. 이를 활용하려면 ModuleFederationPlugin을 설정 파일에 추가해야 합니다.

기본 설정 예제

아래는 두 개의 애플리케이션(App1, App2) 간에 모듈을 공유하는 기본 설정입니다.

App1: 모듈 제공자 설정

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

App2: 모듈 소비자 설정

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    publicPath: 'http://localhost:3002/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

작동 원리

1. App1은 ./Button 컴포넌트를 remoteEntry.js 파일을 통해 외부에 노출합니다.
2. App2는 remoteEntry.js를 참조하여 app1의 ./Button 모듈을 로드합니다.
3. 두 애플리케이션은 react와 react-dom 모듈을 공유하여 중복 다운로드를 방지합니다.

---

3. Module Federation API의 실제 활용 사례

1) 마이크로 프런트엔드 구현

• 여러 팀이 독립적으로 개발한 UI 모듈을 런타임에 동적으로 통합.
• 독립적으로 배포 가능한 단위로 기능을 분리하여 개발 속도 향상.

2) 라이브러리 공유

• 여러 프로젝트가 공통 라이브러리(예: React, Lodash 등)를 공유하여 네트워크 및 번들 크기 최적화.

3) 점진적 코드 분리

• 기존의 모놀리식 코드베이스를 점진적으로 분리하여 모듈화.

---

4. Module Federation API 설정 시 주의사항

1. 버전 호환성 관리:

   • shared 옵션에서 버전 충돌을 방지하려면 singleton: true 및 requiredVersion 옵션을 설정하세요.

     shared: {
     react: { singleton: true, requiredVersion: '17.0.2' },
     },

2. CORS 문제 해결:

   • 서로 다른 도메인에서 모듈을 로드하려면 서버에서 CORS를 올바르게 설정해야 합니다.

3. 개발 및 배포 환경 구분:

   • publicPath를 환경별로 동적으로 설정하여 개발 및 배포 환경에서 문제가 발생하지 않도록 해야 합니다.

4. 로드 타이밍 관리:

   • 런타임 로딩이므로 네트워크 상태에 따라 초기 로딩 속도가 영향을 받을 수 있습니다. 필요한 경우 적절한 로딩 UI를 제공하세요.

---

5. 결론

Module Federation API는 대규모 프로젝트에서 모듈 관리 및 통합의 복잡성을 크게 줄여주는 혁신적인 도구입니다. 이를 활용하면 독립적 배포, 리소스 공유, 코드 분리 등의 이점을 통해 개발 효율성을 극대화할 수 있습니다.

실제 프로젝트에 Module Federation API를 도입해, 더욱 유연하고 확장 가능한 애플리케이션을 구축해 보세요!