기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
교차 커팅 문제에 대한 종속성 관리
마이크로 프런트엔드와 같은 분산 아키텍처의 성공을 위해서는 신중한 종속성 관리가 중요합니다. 종속성 관리는 마이크로 프런트엔드 개발에서 가장 어려운 부분 중 하나입니다.
마이크로 프런트엔드 아키텍처에서 종속성 관리의 두 가지 중요한 측면은 대규모 코드 아티팩트를 클라이언트로 전송할 때 발생하는 성능 저하와 컴퓨팅 리소스의 오버헤드입니다. 조직은 분산 프런트엔드 아키텍처의 종속성을 유지하는 방법을 의무화하는 것이 가장 좋습니다.
종속성 유지 관리를 의무화하기 위한 세 가지 실행 가능한 전략은 가져오기 맵 및 모듈 페더레이션과 같은 웹 표준을 사용하는 것입니다. 다른 접근 방식은 분산 아키텍처의 기본 원칙을 위반하기 때문에 안티 패턴입니다.
가능하면 아무것도 공유하지 않습니다.
공유 없음 접근 방식은 독립 소프트웨어 아티팩트 간의 종속성을 전혀 공유해서는 안 되거나 최소한 통합 또는 런타임에 공유해서는 안 된다고 가정합니다. 즉, 두 개의 마이크로 프런트엔드가 동일한 라이브러리에 의존하는 경우 각 마이크로 프런트엔드는 빌드 시 라이브러리에서 베이크하여 별도로 배송해야 합니다. 또한 각 마이크로 프론트엔드는 라이브러리가 글로벌 네임스페이스 및 공유 리소스를 폴링하지 않는지 확인해야 합니다.
이로 인해 중복이 발생하지만 민첩성이 극대화된 의식적인 절충입니다. 런타임 종속성을 공유하지 않으면 팀은 솔루션 범위에 있고 인터페이스 계약을 위반하지 않는 한 유용하다고 생각되는 방식으로 소프트웨어를 발전시킬 수 있는 유연성을 극대화할 수 있습니다.
마이크로 프론트엔드가 공유 없음 원칙을 따르는 플랫폼에서는 마이크로 프론트엔드를 최대한 가볍게 유지하는 것이 중요합니다. 이를 위해서는 성능을 위해 마이크로 프런트엔드를 최적화하는 데 능숙하고 성실하며 개발자 경험을 위해 사용자 경험을 희생하지 않는 개발자가 필요합니다.
코드를 공유하는 경우
일부 코드를 공유하기로 결정할 때 라이브러리 또는 런타임 모듈로 공유할 수 있습니다. 예를 들어 프런트엔드 코어 팀은 CDNs을 통해 마이크로 프런트엔드 소비를 위한 라이브러리를 제공합니다. 비즈니스 가치 팀은 런타임에 라이브러리를 로드하거나 패키지 리포지토리를 사용하여 라이브러리를 게시할 수 있습니다. 마이크로 프론트엔드 팀은 하이브리드 프레임워크를 사용하는 모바일 애플리케이션과 마찬가지로 빌드 시 패키지 라이브러리의 특정 버전에 대해 개발할 수 있습니다.
세 번째 옵션은 프라이빗 패키지 레지스트리를 사용하여 공통 라이브러리의 빌드 타임 통합을 지원하는 것입니다. 이렇게 하면 라이브러리 계약의 주요 변경으로 인해 런타임에 오류가 발생할 위험이 줄어듭니다. 그러나이 보다 보수적인 접근 방식을 사용하려면 모든 마이크로 프런트엔드를 최신 라이브러리 버전과 동기화하기 위해 더 많은 거버넌스가 필요합니다.
페이지 로드 시간을 개선하기 위해 마이크로 프런트엔드는 Amazon CloudFront와 같은 CDN의 캐시된 청크에서 로드할 라이브러리 종속성을 외부화할 수 있습니다.
런타임 종속성을 관리하기 위해 마이크로 프론트엔드는 가져오기 맵(또는와 같은 라이브러리System.js)을 사용하여 런타임 시 각 모듈이에서 로드되는 위치를 지정할 수 있습니다. Webpack 모듈 페더레이션은 원격 모듈의 호스팅 버전을 가리키고 독립적인 마이크로 프론트엔드 간의 일반적인 종속성을 해결하는 또 다른 접근 방식입니다.
또 다른 접근 방식은 검색 엔드포인트
공유 상태
마이크로 프론트엔드의 결합을 줄이려면 모놀리식 아키텍처와 마찬가지로 동일한 뷰의 모든 마이크로 프론트엔드에서 액세스할 수 있는 글로벌 상태 관리를 피하는 것이 중요합니다. 예를 들어 모든 마이크로 프런트엔드에서 글로벌 Redux 스토어에 액세스할 수 있으면 결합이 증가합니다.
공유 상태를 제거하는 패턴은 마이크로 프런트엔드 내에 캡슐화하고 앞에서 설명한 비동기 메시지와 통신하는 것입니다.
절대적으로 필요한 경우 전역 상태에 잘 정의된 인터페이스를 도입하고 예기치 않은 동작을 방지하기 위해 읽기 전용 공유를 옵트인합니다.
-
세로 분할이 있는 경우 URL 구성 요소와 브라우저 스토리지를 사용하여 호스트 환경의 정보에 액세스할 수 있습니다.
-
혼합 분할이 있는 경우 DOM 표준 사용자 지정 이벤트 또는 이벤트 이미터 또는 양방향 스트림과 같은 JavaScript 라이브러리를 사용하여 마이크로 프런트엔드에 정보를 전달할 수도 있습니다.
마이크로 프론트엔드 간에 몇 가지 정보를 공유해야 하는 경우 마이크로 프론트엔드 경계를 다시 살펴보는 것이 좋습니다. 공유 필요성은 비즈니스 진화 또는 초기 설계에 따라 발생할 수 있습니다.
각 마이크로 프론트엔드가 세션 식별자를 사용하여 필요한 데이터를 가져오는 서버 측 세션을 사용할 수도 있습니다. 결합을 줄이려면 공유 상태를 제거하고 마이크로 프런트엔드별 세션 데이터를 별도로 유지하는 것이 중요합니다.