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

마이크로 프런트엔드 간 라우팅 및 통신

라우팅 옵션은 구성 접근 방식에 따라 달라집니다. 프런트엔드 구성 요소 간의 결합을 줄여 통신을 최적화할 수 있습니다.

라우팅

수직 분할과 함께 클라이언트 측 구성을 사용하는 애플리케이션은 서버 측 라우팅(다중 페이지 애플리케이션) 또는 클라이언트 측 라우팅(단일 페이지 애플리케이션)을 사용할 수 있습니다. UI 구성에 혼합 분할을 사용하는 경우 페이지에서 마이크로 프론트엔드의 심층 라우팅 계층 구조를 지원하려면 클라이언트 측 라우팅이 필요합니다.

엣지 측 구성 및 서버 측 구성을 사용하는 애플리케이션은 서버 측 라우팅 또는 Amazon CloudFront를 사용하는 Lambda@Edge와 같은 엣지 컴퓨팅을 사용한 라우팅에 더 적합합니다.

마이크로 프런트엔드 간 통신

마이크로 프런트엔드 아키텍처의 경우 프런트엔드 구성 요소 간의 결합을 줄이는 것이 좋습니다. 결합을 줄이는 한 가지 방법은 동기식 함수 호출에서 비동기식 메시징으로 이동하는 것입니다.

브라우저 런타임 및 사용자 상호 작용은 비동기식입니다. 이벤트를 메시지를 통해 생산자와 소비자 간에 교환할 수 있습니다. 이벤트는 마이크로 프런트엔드 간 통신을 위한 잘 정의된 인터페이스를 제공합니다.

DDD 관행에 따라 마이크로 프론트엔드의 제한된 컨텍스트를 식별하는 경우 다음 단계는 경계를 넘어 통신해야 하는 이벤트를 식별하는 것입니다.

이벤트에 대한 메시징 메커니즘은 네이티브 DOM 이벤트(CustomEvents), JavaScript 이벤트 이미터 또는 플랫폼 팀이 제공하는 사후 대응 스트림 라이브러리일 수 있습니다. 마이크로 프론트엔드는 이벤트를 게시하고 제한된 컨텍스트와 관련된 이벤트를 구독합니다. 이 방법을 사용하면 게시자와 구독자가 서로를 인식할 필요가 없습니다. 계약은 이벤트 정의입니다. 이에 대한 시각적 표현은 이벤트 아키텍처를 사용한 경계 컨텍스트 다이어그램의 이벤트와 통신 섹션을 참조하세요.