기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
이벤트를 사용한 교차 상호 작용
일부 시나리오에서는 상태 변경 또는 사용자 작업에 대응하기 위해 여러 마이크로 프런트엔드가 서로 상호 작용해야 할 수 있습니다. 예를 들어 페이지의 여러 마이크로 프런트엔드에는 축소 가능한 메뉴가 포함될 수 있습니다. 사용자가 버튼을 선택하면 메뉴가 나타납니다. 사용자가 다른 마이크로 프런트엔드 내에서 렌더링되는 다른 메뉴를 포함하여 다른 곳을 클릭하면 메뉴가 숨겨집니다.
기술적으로 Redux와 같은 공유 상태 라이브러리는 여러 마이크로 프런트엔드에서 사용하고 쉘에서 조정할 수 있습니다. 그러나이 경우 애플리케이션 간에 상당한 결합이 생성되어 테스트하기 어려운 코드가 생성되고 렌더링 중에 성능이 느려질 수 있습니다.
한 가지 일반적인 효과적인 접근 방식은 라이브러리로 배포되고, 애플리케이션 쉘에서 오케스트레이션되며, 여러 마이크로 프런트엔드에서 사용하는 이벤트 버스를 개발하는 것입니다. 이렇게 하면 각 마이크로 프론트엔드는 특정 이벤트를 비동기적으로 게시하고 수신하여 자체 내부 상태만을 기반으로 동작을 수행합니다. 그런 다음 여러 팀이 이벤트를 설명하고 사용자 경험 디자이너가 동의한 동작을 문서화하는 공유 Wiki 페이지를 유지할 수 있습니다.
이벤트 버스 예제의 구현에서 드롭다운 구성 요소는 공유 버스를 사용하여 페이로드drop-down-open-menu가 인 라는 이벤트를 게시합니다{"id": "homepage-aboutus-button"}. 구성 요소는 drop-down-open-menu 이벤트에 리스너를 추가하여 새 ID에 대해 이벤트가 실행되는 경우 드롭다운 구성 요소가 렌더링되어 접을 수 있는 섹션을 숨깁니다. 이러한 방식으로 마이크로 프런트엔드는 성능 향상과 캡슐화 개선으로 변화에 비동기적으로 대응할 수 있으므로 여러 팀이 동작을 더 쉽게 설계하고 테스트할 수 있습니다.
단순성과 유지 관리를 개선하려면 최신 브라우저에서 기본적으로 구현한 표준 APIs를 사용하는 것이 좋습니다. MDN 이벤트 참조
