

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

# 마이크로 프런트엔드 간 라우팅 및 통신
<a name="routing-communication"></a>

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

## 라우팅
<a name="routing"></a>

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

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

## 마이크로 프런트엔드 간 통신
<a name="communication"></a>

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

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

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

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