교차 문제에 대한 종속성 관리

마이크로 프론트엔드와 같은 분산 아키텍처의 성공을 위해서는 의식적인 종속성 관리가 매우 중요합니다. 종속성 관리는 마이크로 프론트엔드 개발에서 가장 어려운 부분 중 하나입니다.

마이크로 프론트엔드 아키텍처에서 종속성 관리의 두 가지 중요한 측면은 대용량 코드 아티팩트를 클라이언트로 전송할 때 발생하는 성능 저하와 컴퓨팅 리소스의 오버헤드입니다. 이상적으로는 조직에서 분산 프런트엔드 아키텍처의 종속성 유지 관리 방법을 의무화해야 합니다.

종속성 유지 관리를 의무화하는 세 가지 실행 가능한 전략은 임포트 맵, 모듈 페더레이션 등의 웹 표준을 사용하여 아무것도 공유하지 않는 것입니다. 다른 접근 방식은 분산 아키텍처의 기본 원칙을 위반하기 때문에 안티패턴입니다.

가능하면 아무 것도 공유하지 마세요.

Share-nothing 접근 방식은 독립 소프트웨어 아티팩트 간의 종속성을 전혀 공유하지 않거나 최소한 통합 또는 런타임 시에는 공유하지 않아야 한다고 가정합니다. 즉, 두 개의 마이크로 프론트엔드가 동일한 라이브러리를 사용하는 경우 각각 빌드 시 라이브러리에서 베이크하여 별도로 출시해야 합니다. 또한 각 마이크로 프론트엔드는 라이브러리가 글로벌 네임스페이스와 공유 리소스를 오염시키지 않는지 검증해야 합니다.

이로 인해 중복이 발생하지만 민첩성을 극대화하려면 의식적으로 절충해야 합니다. 런타임 종속성을 공유하지 않기 때문에 팀은 솔루션 범위 내에서 사용하고 인터페이스 계약을 위반하지 않는 한 유용하다고 생각되는 방식으로 소프트웨어를 발전시킬 수 있는 최대한의 유연성을 발휘할 수 있습니다.

마이크로 프론트엔드가 무공유 원칙을 따르는 플랫폼에서는 마이크로 프론트엔드를 최대한 가볍게 유지하는 것이 중요합니다. 이를 위해서는 성능을 위해 마이크로 프론트엔드를 최적화하는 데 숙련되고 부지런하며 개발자 경험을 위해 사용자 경험을 희생하지 않는 개발자가 필요합니다.

코드를 공유할 때

일부 코드를 공유하기로 결정하면 라이브러리 또는 런타임 모듈로 공유할 수 있습니다. 예를 들어 프론트엔드 코어 팀은 CDN을 통해 마이크로 프런트엔드에서 사용할 수 있는 라이브러리를 제공합니다. 비즈니스 가치 팀은 런타임에 라이브러리를 로드하거나 패키지 리포지토리를 사용하여 라이브러리를 게시할 수 있습니다. 마이크로 프론트엔드 팀은 하이브리드 프레임워크를 사용하는 모바일 애플리케이션과 마찬가지로 빌드 시 패키지 라이브러리의 특정 버전을 기반으로 개발할 수 있습니다.

세 번째 옵션은 프라이빗 패키지 레지스트리를 사용하여 공용 라이브러리의 빌드 타임 통합을 지원하는 것입니다. 이렇게 하면 라이브러리 계약의 주요 변경으로 인해 런타임에 오류가 발생할 위험이 줄어듭니다. 하지만 이렇게 보수적인 접근 방식을 취하려면 모든 마이크로 프론트엔드를 최신 라이브러리 버전과 동기화할 수 있는 더 많은 거버넌스가 필요합니다.

페이지 로드 시간을 개선하기 위해 마이크로 프론트엔드는 Amazon과 같은 CDN의 캐시된 청크에서 로드할 라이브러리 종속성을 외부화할 수 있습니다. CloudFront

런타임 종속성을 관리하기 위해 마이크로 프론트엔드는 임포트 맵 (또는 다음과 같은 라이브러리System.js) 을 사용하여 런타임에 각 모듈이 로드되는 위치를 지정할 수 있습니다. webpack Module Federation은 원격 모듈의 호스팅된 버전을 가리키고 독립적인 마이크로 프론트엔드에서 공통 종속성을 해결하는 또 다른 접근 방식입니다.

또 다른 접근 방식은 검색 엔드포인트에 대한 초기 요청으로 임포트 맵을 동적으로 로드할 수 있도록 하는 것입니다.

공유 상태

마이크로 프론트엔드의 결합을 줄이려면 모놀리식 아키텍처와 마찬가지로 모든 마이크로 프론트엔드에서 동일한 뷰로 액세스할 수 있는 글로벌 상태 관리를 피하는 것이 중요합니다. 예를 들어 모든 마이크로 프론트엔드에서 글로벌 Redux 스토어에 액세스할 수 있게 하면 결합이 증가합니다.

공유 상태를 없애는 패턴은 앞서 설명한 것처럼 이를 마이크로 프론트엔드에 캡슐화하고 비동기 메시지로 통신하는 것입니다.

꼭 필요한 경우 글로벌 상태에 맞게 잘 정의된 인터페이스를 도입하고 읽기 전용 공유를 선택하여 예기치 않은 동작을 방지하세요.

• 수직 분할이 있는 경우 URL 구성 요소와 브라우저 저장소를 사용하여 호스트 환경의 정보에 액세스할 수 있습니다.

• 혼합 분할을 사용하는 경우 이벤트 이미터 또는 양방향 스트림과 같은 DOM 표준 사용자 지정 이벤트 또는 JavaScript 라이브러리를 사용하여 마이크로 프론트엔드에 정보를 전달할 수도 있습니다.

마이크로 프론트엔드에서 여러 정보를 공유해야 하는 경우 마이크로 프론트엔드의 경계를 다시 살펴보는 것이 좋습니다. 공유의 필요성은 비즈니스 발전 또는 형편없는 초기 설계로 인해 발생할 수 있습니다.

각 마이크로 프론트엔드가 세션 식별자를 사용하여 필요한 데이터를 가져오는 서버측 세션을 사용할 수도 있습니다. 커플링을 줄이려면 공유 상태를 제거하고 마이크로 프론트엔드별 세션 데이터를 별도로 유지하는 것이 중요합니다.