마이크로 프론트엔드란
date
Oct 9, 2022
slug
micro-frontend
status
Published
tags
Vite
Micro Frontend
Webpack
summary
type
Post
코드 블록이 보이지 않는 경우, 페이지를 새로고침해주세요.
마이크로 프론트엔드
마이크로 프론트엔드는 마이크로서비스 아키텍처에서 영감을 받은 프론트엔드 개발 방법입니다. 이 방법을 통해 대규모 웹 애플리케이션을 더 작고 독립적인 부분으로 나누어, 각 팀이 하나의 기능이나 페이지를 독립적으로 개발하고 배포할 수 있게 합니다.
- 독립 아티팩트
다른 서비스에 대한 영향을 최소화하면서 프론트엔드 애플리케이션을 독립적으로 배포할 수 있습니다.
- 유연한 기술선택
자율성을 통해 각 팀은 다른 팀과 독립적으로 기술(React, Vue, Angular)를 선택할 수 있습니다.
- 확장 가능한 개발
새로운 팀을 구성하여 하위 애플리케이션을 통해 추가 프론트엔드 기능을 제공함으로써 개발을 빠르게 확장할 수 있습니다.
Wepack
브라우저에서 ES Module을 지원하기 전까지 JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 따라서 개발자는 소스 모듈을 브라우저에서 실행할 수 있는 파일로 처리하기 위해 번들링이라는 우회적인 방법을 사용해야 했습니다.
Webpack, Rollup 같은 도구는 이런 번들링 작업을 진행해줌으로써 프론트엔드 개발자의 생산성을 크게 향상시켰습니다.
Webpack은 자바스크립트 모듈의 의존관계를 파악하고 실행할 때 필요한 모듈을 로딩해주는 역할을 합니다. 그러나 단일 Webpack 빌드에 포함되었던 모듈만 처리하므로 다른 Webpack 빌드에 포함된 모듈, 여러 서버에 배포되어 있는 원격 모듈을 하나의 애플리케이션에서 로딩할 수 없었습니다.
Wepack 5 release (2020. 10. 10)
Webpack 5에는 Module Federation이라는 새로운 기능이 추가되어 webpack 빌드가 함께 작동할 수 있습니다. Module Federation은 단일 Webpack 빌드에 포함된 모듈 뿐만 아니라 여러 서버에 배포되어 있는 원격 모듈을 하나의 애플리케이션으로 로딩할 수 있습니다.
Module Federation
Host모듈을 사용하는 주체
Remote사용되는 모듈을 제공하는 주체
Federation모듈을 사용하고 사용되는 모듈을 제공하는 행위
name해당앱의 유일한 이름으로 중복된 이름이 있으면 안됩니다.
filename해당 앱을 다른 앱에서 사용하기 위한 정보가 담긴 Manifest 파일의 이름을 지정합니다. (기본값: remoteEntry.js)
remotes해당 앱이 사용할 리모트 앱들을 정의하는 곳입니다.
exposes외부에서 사용하기 위해 제공할 모듈들을 정의합니다.
shared런타임에 Federated된 앱 간에 공유하거나 공유받을 의존성 패키지를 정의합니다.
Vite
사내에서 빌드도구로 Vite를 사용하고 있습니다. 그렇다면 Vite로 Module Federation 처럼 런타임 통합으로 마이크로 프론트엔드를 구현할 수 있을까?
Vite와 Vue의 메인테이너인 Evan You는 이것은 Rollup 수준에서 해결해야하는 것이며 논의할 가치가 있지만 Vite의 범위를 벗어난다고 했습니다.
vite-plugin-federation
Vite/Rollup에서 Module Federation의 기능을 제공하는 라이브러리입니다. (실제로 Webpack과 같이 많은 개발자들이 사용하며 검증되지 않아서 사용하기는 힘들다고 생각합니다.)
federation
federation 에서는 module federation과 동일한 구성을 가지고 있습니다.
name해당앱의 유일한 이름으로 중복된 이름이 있으면 안됩니다.
filename해당 앱을 다른 앱에서 사용하기 위한 정보가 담긴 Manifest 파일의 이름을 지정합니다.
remotes해당 앱이 사용할 리모트 앱들을 정의하는 곳입니다.
exposes외부에서 사용하기 위해 제공할 모듈들을 정의합니다.
shared런타임에 Federated된 앱 간에 공유하거나 공유받을 의존성 패키지를 정의합니다.
build
Evan You의 말처럼 rollup 단계에서 번들링시 사용하기 위한 옵션을 설정하는 부분입니다.
target브라우저 호완성을 위해 버전을 정의합니다.
- rollupOptions
format생성된 번들파일의 형식을 정의합니다.entryFileNames진입점이 될 파일 위치를 정의합니다.
마치며
Wepack 환경에서 마이크로 프론트엔드 구축방법과 더 나아가 Vite 환경에서 마이크로 프론트엔드를 구축하는 방법을 알아보았습니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
![[A4] Webpack 5 Module Federation으로 Micro-Frontends 운영하기](https://www.notion.so/image/https%3A%2F%2Fwww.youtube.com%2Fs%2Fdesktop%2F0b03494e%2Fimg%2Ffavicon_144x144.png?table=block&id=50612b45-adb9-4e39-a241-578e05164c5c&cache=v2)
![[A4] Webpack 5 Module Federation으로 Micro-Frontends 운영하기](https://www.notion.so/image/https%3A%2F%2Fi.ytimg.com%2Fvi%2F0Eq6evGKJ68%2Fmaxresdefault.jpg?table=block&id=50612b45-adb9-4e39-a241-578e05164c5c&cache=v2)
