에서 마이크로 프런트엔드 이해 및 구현 AWS - AWS 권장 가이드
개요

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

에서 마이크로 프런트엔드 이해 및 구현 AWS

Amazon Web Services(기여자)

2024년 7월(문서 기록)

조직이 민첩성과 확장성을 위해 노력함에 따라 기존의 모놀리식 아키텍처는 종종 병목 현상이 발생하여 빠른 개발 및 배포를 방해합니다. 마이크로 프론트엔드는 복잡한 사용자 인터페이스를 자율적으로 개발, 테스트 및 배포할 수 있는 더 작고 독립적인 구성 요소로 분류하여 이를 완화합니다. 이 접근 방식은 개발 팀의 효율성을 높이고 백엔드와 프런트엔드 간의 협업을 촉진하여 분산 시스템의 end-to-end 조정을 촉진합니다.

이 규범적 지침은 다양한 전문 도메인의 IT 리더, 제품 소유자 및 아키텍트가 마이크로 프론트엔드 아키텍처를 이해하고 Amazon Web Services()에서 마이크로 프론트엔드 애플리케이션을 구축할 수 있도록 조정되었습니다AWS.

개요

마이크로 프런트엔드는 애플리케이션 프런트엔드를 독립적으로 개발 및 배포된 아티팩트로 분해하기 위해 구축된 아키텍처입니다. 대규모 프런트엔드를 자율 소프트웨어 아티팩트로 분할하면 비즈니스 로직을 캡슐화하고 종속성을 줄일 수 있습니다. 이를 통해 제품 증분을 더 빠르고 자주 제공할 수 있습니다.

마이크로 프론트엔드는 마이크로서비스와 유사합니다. 실제로 마이크로 프론트엔드라는 용어는 마이크로서비스라는 용어에서 파생되며 마이크로서비스의 개념을 프런트엔드로 전달하는 것을 목표로 합니다. 마이크로서비스 아키텍처는 일반적으로 백엔드의 분산 시스템을 모놀리식 프런트엔드와 결합하지만 마이크로 프런트엔드는 독립형 분산 프런트엔드 서비스입니다. 이러한 서비스는 두 가지 방법으로 설정할 수 있습니다.

  • 프런트엔드 전용, 마이크로서비스 아키텍처를 실행하는 공유 API 계층과 통합

  • 풀 스택. 즉, 각 마이크로 프론트엔드에는 자체 백엔드 구현이 있습니다.

다음 다이어그램은 API 게이트웨이를 사용하여 백엔드 마이크로서비스에 연결하는 프런트엔드 모놀리스가 있는 기존 마이크로서비스 아키텍처를 보여줍니다.

서버 측 마이크로서비스에 연결하는 클라이언트 측 프런트엔드 모놀리스입니다.

다음 다이어그램은 마이크로서비스의 다양한 구현을 갖춘 마이크로 프론트엔드 아키텍처를 보여줍니다.

클라이언트 측 통합 계층 프런트 엔드 모듈 및 서버 측 마이크로서비스.

이전 다이어그램과 같이 클라이언트 측 렌더링 또는 서버 측 렌더링 아키텍처와 함께 마이크로 프런트엔드를 사용할 수 있습니다.

  • 클라이언트 측 렌더링된 마이크로 프런트엔드는 중앙 집중식 APIs 노출되는 API를 직접 사용할 수 있습니다.

  • 팀은 경계 컨텍스트 내에 backend-for-frontend(BFF)를 생성하여 API에 대한 프런트엔드의 진동을 줄일 수 APIs.

  • 서버 측에서 마이크로 프런트엔드는 수화라는 기술을 사용하여 클라이언트 측에서 보강된 서버 측 접근 방식으로 표현할 수 있습니다. 브라우저에서 페이지를 렌더링하면 버튼 클릭과 같은 UI 요소와의 상호 작용을 허용하도록 연결된 JavaScript가 수화됩니다.

  • 마이크로 프론트엔드는 백엔드에서 렌더링하고 하이퍼링크를 사용하여 웹 사이트의 새 부분으로 라우팅할 수 있습니다.

마이크로 프론트엔드는 다음을 수행하려는 조직에 적합합니다.

  • 동일한 프로젝트에서 작업하는 여러 팀으로 확장합니다.

  • 의사 결정의 분산을 수용하여 개발자가 식별된 시스템 경계 내에서 혁신할 수 있도록 지원합니다.

이 접근 방식은 팀의 인지 부하를 크게 줄입니다. 팀의 인지 부하가 시스템의 특정 부분을 담당하게 되기 때문입니다. 나머지를 중단하지 않고 시스템의 한 부분을 수정할 수 있으므로 비즈니스 민첩성이 향상됩니다.

마이크로 프론트엔드는 고유한 아키텍처 접근 방식입니다. 마이크로 프런트엔드를 구축하는 방법에는 여러 가지가 있지만 모두 공통적인 특성이 있습니다.

  • 마이크로 프론트엔드 아키텍처는 여러 독립 요소로 구성됩니다. 구조는 백엔드의 마이크로서비스에서 발생하는 모듈화와 유사합니다.

  • 마이크로 프런트엔드는 다음으로 구성된 경계 컨텍스트 내에서 프런트엔드 구현을 전적으로 담당합니다.

    • 사용자 인터페이스

    • 데이터

    • 상태 또는 세션

    • 비즈니스 로직

    • 플로우

경계가 지정된 컨텍스트는 내부적으로 일관된 시스템으로, 경계를 신중하게 설계하여 출입할 수 있는 항목을 중재합니다. 마이크로 프론트엔드는 가능한 한 적은 비즈니스 로직 및 데이터를 다른 마이크로 프론트엔드와 공유해야 합니다. 공유가 필요한 모든 곳에서 사용자 지정 이벤트 또는 사후 대응 스트림과 같이 명확하게 정의된 인터페이스를 통해 이루어집니다. 그러나 설계 시스템 또는 로깅 라이브러리와 같은 몇 가지 교차 커팅 문제에 대해서는 의도적인 공유를 환영합니다.

권장되는 패턴은 부서 간 팀을 사용하여 마이크로 프런트엔드를 구축하는 것입니다. 즉, 각 마이크로 프런트엔드는 백엔드에서 프런트엔드로 작업하는 동일한 팀이 개발합니다. 코딩부터 프로덕션 환경의 시스템 운영에 이르기까지 팀 소유권은 매우 중요합니다.

이 지침은 하나의 특정 접근 방식을 권장하지 않습니다. 대신 다양한 패턴, 모범 사례, 장단점, 아키텍처 및 조직 고려 사항에 대해 설명합니다.