기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

마이크로 프런트엔드 경계 식별

팀 자율성을 개선하기 위해 애플리케이션에서 제공하는 비즈니스 기능을 서로에 대한 종속성을 최소화하면서 여러 마이크로 프런트엔드로 분해할 수 있습니다.

앞서 설명한 DDD 방법론에 따라 팀은 애플리케이션 도메인을 비즈니스 하위 도메인과 제한된 컨텍스트로 나눌 수 있습니다. 그런 다음 자율 팀은 제한된 컨텍스트의 기능을 소유하고 이러한 컨텍스트를 마이크로 프런트엔드로 제공할 수 있습니다.

경계가 잘 정의된 컨텍스트는 기능적 중복과 컨텍스트 간 런타임 통신의 필요성을 최소화해야 합니다. 필요한 통신은 이벤트 기반 방법으로 구현할 수 있습니다. 이는 마이크로서비스 개발을 위한 이벤트 기반 아키텍처와 다르지 않습니다.

또한 잘 설계된 애플리케이션은 고객에게 일관된 경험을 제공하기 위해 새 팀의 향후 확장 제공을 지원해야 합니다.

모놀리식 애플리케이션을 마이크로 프런트엔드로 분할하는 방법

개요 섹션에는 웹 페이지에서 독립적인 기능 컨텍스트를 식별하는 예제가 포함되어 있습니다. 사용자 인터페이스에서 기능을 분할하기 위한 몇 가지 패턴이 나타납니다.

예를 들어 비즈니스 도메인이 사용자 여정의 단계를 구성하는 경우 프런트엔드에 수직 분할을 적용할 수 있습니다. 여기서 사용자 여정의 뷰 모음은 마이크로 프런트엔드로 전달됩니다. 다음 다이어그램은 카탈로그, 체크아웃 및 인보이스 단계가 별도의 팀에서 별도의 마이크로 프런트엔드로 제공되는 세로 분할을 보여줍니다.

일부 애플리케이션의 경우 수직 분할만으로는 충분하지 않을 수 있습니다. 예를 들어 일부 기능은 여러 뷰에서 제공해야 할 수 있습니다. 이러한 애플리케이션의 경우 혼합 분할을 적용할 수 있습니다. 다음 다이어그램은 Station Finder 및 Route Explorer의 마이크로 프런트엔드가 모두 맵 보기 기능을 사용하는 혼합 분할 솔루션을 보여줍니다.

포털 유형 또는 대시보드 유형 애플리케이션은 일반적으로 프런트엔드 기능을 단일 보기로 통합합니다. 이러한 유형의 애플리케이션에서는 각 위젯을 마이크로 프론트엔드로 제공할 수 있으며, 호스팅 애플리케이션은 마이크로 프론트엔드가 구현해야 하는 제약 조건과 인터페이스를 정의합니다.

이 접근 방식은 마이크로 프런트엔드가 뷰포트 크기 조정, 인증 공급자, 구성 설정 및 메타데이터와 같은 문제를 처리할 수 있는 메커니즘을 제공합니다. 이러한 유형의 애플리케이션은 확장성을 최적화합니다. 새 팀은 대시보드 기능을 확장하기 위해 새로운 기능을 개발할 수 있습니다.

다음 다이어그램은 팀 대시보드의 일부인 세 개의 개별 팀에서 개발한 대시보드 애플리케이션을 보여줍니다.

다이어그램에서 미래 보기는 팀 대시보드와 대시보드 기능을 확장하기 위해 새 팀이 개발한 새로운 기능을 나타냅니다.

포털 및 대시보드 애플리케이션은 일반적으로 UI에서 혼합 분할을 사용하여 기능을 구성합니다. 마이크로 프런트엔드는 위치 및 크기 제약 조건을 포함하여 잘 정의된 설정으로 구성할 수 있습니다.