마이크로 프론트엔드의 개념은 마이크로서비스를 프론트엔드 개발에 적용합니다.
아이디어는 애플리케이션이나 웹사이트를 하나의 응집력 있는 단일체로 만드는 것이 아니라 런타임 중에 연결되는 더 작고 독립적으로 개발된 조각으로 나누는 것입니다.
이 방법을 사용하면 다른 기술과 독립 팀을 사용하여 응용 프로그램의 다른 구성 요소를 만들 수 있습니다.
이러한 방식으로 개발을 세분화하여 일반적인 모노리스와 관련된 유지 관리 비용을 줄이는 것이 아이디어입니다.
일관된 팀으로서 애플리케이션의 특정 영역에 집중할 수 있도록 함으로써 백엔드와 프론트엔드 개발자 간의 새로운 형태의 협력도 가능하게 합니다.
예를 들어, 검색 기능이나 비즈니스에 중요한 주요 제품의 다른 측면을 전적으로 책임지는 팀이 있을 수 있습니다.
모듈 연합 덕분에 사용자는 작업 흐름을 처리하기에 충분한 기능을 갖게 됩니다. 마이크로 프론트엔드 접근 권한.
이 게시물에서는 모듈 연합의 아키텍처와 주요 기능 및 애플리케이션 패턴에 대해 자세히 살펴볼 것입니다.
그래서, 무엇입니까 모듈 연합?
Javascript의 모듈 연합 설계는 많은 응용 프로그램에서 재사용된 부분을 사용합니다.
아주 기본적인 전문용어지만, 저는 그냥 그렇게 가볍게 보이도록 만들었습니다.
React 애플리케이션 내에서 구성 요소를 공유하는 데 모두 익숙하므로 Module Federation은 다른 애플리케이션에서 사용할 애플리케이션 모듈을 동적으로 노출한다는 점을 제외하고 실제로 동일한 목표를 효과적으로 달성합니다.
모듈 연합은 이러한 핵심 공유 요소를 매크로 또는 마이크로 원하는 대로 전달하여 분산 시스템에서 모듈 공유 문제를 극복하고자 합니다.
이는 앱 및 빌드 워크플로에서 제거하여 수행됩니다.
왜 모듈 연합인가?
모듈 연합이 쉽게 처리할 수 있는 몇 가지 요소는 다음과 같습니다.
- 외부 및 DLL(Dynamic Link Libraries)은 때때로 앱 간에 기능을 공유하기 위한 전부였습니다. 이 모든 것이 확장 코드 공유를 극도로 어렵게 만들었습니다.
- NPM은 느리다.
- 두 개의 개별 프로그램이 중요한 코드를 공유하는 경우 동적이고 유연해야 합니다.
독립 실행형 앱이 완전히 자체 저장소에 있고 별도로 배포되고 자체 독립 SPA로 작동하기 위해 Module Federation이 생성되었습니다.
모듈 연합 핵심 구성 요소
더 깊이 들어가기 전에 모듈 연합이 가져오는 몇 가지 새로운 개념에 대해 간략하게 논의하는 것이 중요합니다.
- 호스트: 페이지가 로드될 때 초기에 초기화된 빌드 또는 모듈을 호스트라고 합니다. 공급자는 호스트로 생각할 수 있습니다.
- 원격: 원격은 호스트의 일부를 사용하는 다른 구성입니다. 고객이라고도 합니다.
- 양방향 호스트: 다른 호스트가 사용하는 원격지와 원격지를 사용하는 호스트 모두의 기능을 하는 Webpack 빌드입니다.
- 공급업체 연합: 로드된 위치에 관계없이 호스트 또는 원격에 대한 npm 모듈 종속성의 선언적으로 공유된 런타임 공유를 활성화합니다. 마이크로 프론트엔드의 주요 성능 문제 중 하나는 이러한 방식으로 해결됩니다.
연합 애플리케이션의 패턴
에버그린 디자인 시스템
연합 응용 프로그램의 가장 기본적인 형태 중 하나는 모든 사용자를 위해 독립적으로 배포 및 업데이트되는 "디자인 시스템" 또는 "구성 요소 라이브러리"와 같은 공유 원격인 "에버그린 원격"입니다.
각 앱 팀이 수정에 시간을 할애할 필요 없이 모든 온라인 사이트가 가장 최근의 기업 ID를 준수하도록 하는 데 도움이 될 수 있습니다.
안전하고 지속적인 업데이트를 보장하는 데 필요한 제한과 절차를 설계하고 적용하기 위해 이것은 기업이 연합 응용 프로그램 아키텍처를 고려할 때 시작하는 데 유용한 장소가 될 수 있습니다.
다음은 독립적으로 배포된 공유 리모컨이 적합할 수 있는 몇 가지 사용 사례입니다.
- 디자인 시스템
- 애플리케이션 쉘
- 구성 요소 라이브러리
- 소비자
- 공유 툴킷
- 내부 또는 외부에서 사용하는 위젯의 대체 배포 모델
다중 SPA 모듈 공유
다른 독립 실행형 단일 페이지 앱에서 구성 요소와 같이 이미 내보낸 기능을 재사용합니다. 혜택은 다음과 같습니다.
- 소비자는 자동화된 업데이트를 받습니다.
- 도메인 전문성은 그것을 담당하는 팀에 남아 있습니다.
- 별도의 모듈 릴리스가 필요하지 않으므로 배포 절차를 간소화합니다.
셸 기반 연합
셸 기반 페더레이션에는 다음이 포함됩니다.
- 새 제품 버전을 만들 때 제품 팀은 Checkout 팀이 작업을 완료할 때까지 기다리지 않습니다.
- 리모컨을 전환할 때 페이지 새로고침이 없습니다.
- 필요한 경우 Shell은 느린 원격 로딩 및 (최상위) 라우팅을 제공합니다.
- 자주 사용하는 npm 패키지를 재사용할 수 있는 벤더 페더레이션을 통해 원격 라우팅이 가능합니다.
- Shell은 지연 로드된 원격 장치에서 재사용되는 프레임워크 및 기타 공통 종속성을 제공합니다.
다중 셸 페더레이션
위에서 설명한 셸 기반 연합과 유사하지만 다른 셸을 사용했습니다.
그것은 다음을 포함합니다 :
- 다수의 껍데기
- 화이트 라벨링
- 모든 리모컨이 Shell B에 필요하거나 독립적으로 구현되는 것은 아닙니다.
모듈 연합 핵심 기능
뛰어난 웹 성능
일반적인 NPM 모듈 구성의 문제는 종속 항목의 수가 증가함에 따라 일반적으로 응용 프로그램의 크기가 증가한다는 것입니다.
애플리케이션이 로드될 때 번들을 로드하지 않고 필요할 때만 로드하기 위해 Module Federation은 번들을 지연 로드하는 기능을 제공합니다.
이렇게 하면 실제로 필요하기 전에 모듈을 다운로드할 필요가 없어 사이트 속도가 향상됩니다.
효과적인 개발
Module Federation은 애플리케이션을 개별 프로젝트로 구성하여 개별적으로(따라서 병렬로) 구축 및 배포할 수 있도록 권장하기 때문에 각 프로젝트는 개별적으로 생성 및 제공될 수 있으며 다양한 팀에서 수행할 수 있습니다.
자가 치유 및 중복 기능
공유 종속성을 사용하면 모듈 연합이 프로그램의 모든 종속성을 한 곳에서 추적할 수 있습니다.
이렇게 하면 응용 프로그램이 종속성을 선언하지 않거나 네트워크 문제가 있는 경우에도 여전히 필요한 것을 알고 필요에 따라 다운로드를 처리할 수 있습니다.
공통 종속성의 효과적인 처리
또한 모듈 연합은 우수한 종속성 관리를 제공하여 공급업체 및 타사 요구 사항을 효과적으로 해결하여 애플리케이션이 라이브러리 버전을 두 개 이상 로드하지 않도록 합니다.
소비자를 다시 배포하는 대신 독립 코드를 배포합니다.
개발자는 에버그린 기능을 갖는 데 매우 관심이 있습니다. 노출된 종속 기능이 변경되면 더 이상 소비자를 다시 설치할 필요가 없습니다.
이것은 그 자체로 매우 강력한 기능이며 예기치 않은 결과를 방지하기 위해 주의 깊은 검사가 필요한 기능이라는 것을 인정해야 합니다.
실행할 때 다른 빌드에서 코드를 가져옵니다.
NPM 패키지 모델을 도입할 때 코드를 공유하고 "라이브러리"를 생각하기 보다는 API와 유사한 Module Federation을 사용하는 앱을 고려할 수 있습니다.
다른 앱에서도 기능을 받을 수 있는 것과 같은 방식으로 웹 응용 프로그램은 이제 다른 응용 프로그램에 기능을 제공할 수 있습니다.
클라이언트 경험을 유지하면서 향상된 개발자 경험
모든 품종 자바 스크립트 개발자 Webpack 버전 5부터 액세스할 수 있는 Webpack 플러그인이기 때문에 Module Federation에 매우 익숙할 것입니다.
이것은 실제로 생각해보면 상당히 강력하고 흥미롭습니다.
타사 Webpack 로더를 활용하여 다음과 같은 모든 구성 요소를 고려하십시오. 웹팩 스크립트, 자산, 스타일, 사진, 마크다운 등을 포함한 번들.
모듈 연합을 사용하면 이 모든 것을 공유하고 연합할 수 있습니다.
마이크로 프론트엔드는 모놀리식 방식으로 작동합니다.
애플리케이션에 공유 기능을 추가하는 것은 매우 쉽습니다. 번들을 정상적으로 가져오거나 동기 로딩을 사용하십시오.
또는 지연 로딩을 활용하여 필요한 경우에만 종속성을 로드하는 데 비동기 로딩을 사용할 수 있습니다.
결론
이 게시물에서 우리는 마이크로 프론트엔드 애플리케이션 개발을 위한 환상적인 선택으로 모듈 연합에 대해 논의했습니다.
앱이 런타임에 기능을 교환하고 사용하도록 하면 다양한 팀이 독립적인 애플리케이션에서 작업할 수 있으므로 확장성이 향상됩니다.
공통 기능이 변경되면 에버그린 기능을 지원하므로 소비자를 설계하고 배포할 필요가 없습니다.
귀하의 프로그램은 설정이 완료되면 모놀리스처럼 작동할 것입니다. 이는 환상적입니다.
공유 가능한 종속성은 앱의 크기를 줄이는 데 사용됩니다. 많은 개발자들이 이미 Webpack 환경에 익숙하기 때문에 개발자 경험이 탁월합니다.
댓글을 남겨주세요.