마이크로 프론트엔드 경계 파악

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

앞서 설명한 DDD 방법론에 따라 팀은 애플리케이션 도메인을 비즈니스 하위 도메인과 제한된 컨텍스트로 나눌 수 있습니다. 그러면 자율적인 팀이 제한된 컨텍스트의 기능을 소유하고 이러한 컨텍스트를 마이크로 프론트엔드로 제공할 수 있습니다. 관심사 분리에 대한 자세한 내용은 서버리스 랜드 다이어그램을 참조하십시오.

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

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

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

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

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

일부 애플리케이션의 경우 세로 분할만으로는 충분하지 않을 수 있습니다. 예를 들어 여러 뷰에서 일부 기능을 제공해야 할 수 있습니다. 이러한 애플리케이션의 경우 혼합 분할을 적용할 수 있습니다. 다음 다이어그램은 스테이션 파인더와 루트 탐색기의 마이크로 프론트엔드가 모두 지도 보기 기능을 사용하는 혼합 분할 솔루션을 보여줍니다.

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

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

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

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

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