Webpack을 사용한 마이크로 프론트엔드 개발
마이크로 프론트엔드 개발은 웹 애플리케이션 아키텍처에서 성장하는 트렌드입니다. 이를 통해 서로 다른 팀이 독립적인 컴포넌트를 개발하고 배포할 수 있으며 하나의 싱글 페이지 앱처럼 함께 작동합니다. 이 블로그 포스트에서는 Webpack을 사용하여 마이크로 프론트엔드 생태계를 구축하는 방법을 알아보겠습니다.
마이크로 프론트엔드 생태계 이해하기
마이크로 프론트엔드 생태계에서 각 컴포넌트는 독립적으로 빌드되고 배포됩니다. 이러한 컴포넌트는 하나의 HTML 페이지에서 참조되며 실행 시점에 해결됩니다. 예를 들어, 프로덕션 설정을 살펴보겠습니다:
<script src="http://deploy-server/external/vendor1.js"></script>
<script src="http://deploy-server/external/vendor2.js"></script>
<script src="http://deploy-server/external/vendor3.js"></script>
<script src="http://deploy-server/internal/comp1.js"></script>
<script src="http://deploy-server/internal/comp2.js"></script>
<script src="http://deploy-server/internal/comp3.js"></script>위의 예에서는 외부 공급 업체 파일(vendor1.js, vendor2.js, vendor3.js)과 내부 컴포넌트 파일(comp1.js, comp2.js, comp3.js)이 있습니다. 컴포넌트는 기능을 위해 공급 업체 파일을 사용하거나 의존할 수 있습니다.
외부 공급 업체와 내부 라이브러리 번들링하기
외부 공급 업체 파일과 내부 라이브러리를 따로 번들링하기 위해 Webpack을 사용할 수 있습니다. 아이디어는 공통 번들을 생성하여 컴포넌트 번들에서 참조하는 것입니다. 예시 Webpack 구성을 살펴보겠습니다:
entry: {
home: {
import: './src/app1-index.js',
dependOn: 'shared',
filename: 'js/app1.js',
},
shared: ['react', 'react-dom', 'react-router']
},
output: {
publicPath: '/',
path: path.join(__dirname, '/build/'),
filename: `js/[name].js`,
}위의 구성에서 shared 항목은 모든 내부 컴포넌트 스크립트에서 사용되는 공급 업체(React, ReactDOM, React Router)를 나타냅니다. home 항목은 앱별 컴포넌트를 나타냅니다.
이 구성을 사용하면 Webpack은 js/app1.js와 js/shared.js 두 개의 파일을 생성합니다. shared.js 파일에는 공급 업체가 번들링됩니다.
다른 팀에서 공유된 공급 업체 사용하기
이제 vendor.js에 공급 업체를 번들링했으므로, 이를 다른 팀에 개발용으로 배포할 수 있습니다. 각 팀은 공유된 공급 업체를 HTML 페이지에 포함할 수 있습니다:
<script src="/build/js/vendor.js"></script>
<script src="/build/js/app1.js"></script>팀은 그들의 컴포넌트를 개발하고 코드 내에서 공유된 공급 업체를 참조할 수 있습니다. 예를 들어, app2.js가 vendor.js에 의존하는 경우 다음 HTML을 사용할 수 있습니다:
<script src="/build/js/vendor.js"></script>
<script src="/build/js/app2.js"></script>단, Webpack을 올바르게 구성해야 합니다. app2 구성에서는 공유된 공급 업체를 번들링하지 않도록 externals 속성을 사용하세요:
entry: './src/app2-index.js',
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter'
},
output: {
publicPath: '/',
path: path.join(__dirname, '/build/'),
filename: `js/app2.js`,
}이 구성을 사용하면 공유된 공급 업체가 실행 시점에 해결되며, 각 팀은 자신들의 컴포넌트 번들에 대해 종속성이 사용 가능하다고 가정할 수 있습니다.
결론
Webpack을 사용하면 서로 다른 팀이 공유된 공급 업체를 활용하면서 컴포넌트를 개발하고 공유할 수 있는 마이크로 프론트엔드 생태계를 구축할 수 있습니다. 공급 업체를 별도로 번들링함으로써 각 팀은 독립적으로 컴포넌트를 개발하고 실행 시점에 종속성을 해결할 수 있습니다. 이 접근 방식은 모듈성을 향상시키고 마이크로 프론트엔드 아키텍처에서 팀 간 협업을 촉진합니다.
이 블로그 포스트가 Webpack을 사용한 마이크로 프론트엔드 개발에 대해 포괄적인 개요를 제공했기를 바랍니다. 지금 마이크로 프론트엔드 생태계를 구축하고 확장 가능하고 모듈화된 웹 애플리케이션 아키텍처의 이점을 누리세요.
참고 자료 :
https://stackoverflow.com/questions/61588962/micro-frontend-developement-using-webpack
같은 카테고리의 다른 글 보기 :
