마이크로 프론트엔드의 이해 및 구현 AWS - AWS 규범적 지침
개요

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

마이크로 프론트엔드의 이해 및 구현 AWS

Amazon Web Services (기고자)

2024년 7월 (문서 기록)

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

이 규범적 지침은 다양한 전문 분야의 IT 리더, 제품 소유자 및 설계자가 Amazon Web Services () 에서 마이크로 프론트엔드 아키텍처를 이해하고 마이크로 프론트엔드 애플리케이션을 구축하는 데 도움이 되도록 맞춤화되었습니다.AWS

개요

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

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

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

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

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

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

다음 다이어그램은 다양한 마이크로서비스 구현이 적용된 마이크로 프런트엔드 아키텍처를 보여줍니다.

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

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

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

  • 팀은 제한된 컨텍스트 내에 BFF backend-for-frontend (BFF) 를 생성하여 API를 향한 프론트엔드의 잡담을 줄일 수 있습니다.

  • 서버 측에서는 하이드레이션이라는 기법을 사용하여 클라이언트 측에서 보강된 서버 측 접근 방식을 통해 마이크로 프론트엔드를 표현할 수 있습니다. 브라우저에서 페이지를 렌더링하면 관련 페이지에 JavaScript 하이드레이션이 적용되어 UI 요소와의 상호 작용 (예: 버튼 클릭) 이 가능합니다.

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

마이크로 프론트엔드는 다음과 같은 작업을 수행하려는 조직에 매우 적합합니다.

  • 여러 팀이 같은 프로젝트를 진행하면서 규모를 확장하세요.

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

이 접근 방식은 팀이 시스템의 특정 부분을 담당하게 되므로 팀의 인지 부하를 크게 줄여줍니다. 나머지 부분은 그대로 유지하면서 시스템의 한 부분을 수정할 수 있기 때문에 비즈니스 민첩성이 향상됩니다.

마이크로 프론트엔드는 독특한 아키텍처 접근 방식입니다. 마이크로 프론트엔드를 구축하는 방법은 다양하지만 모두 다음과 같은 공통된 특징을 가지고 있습니다.

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

  • 마이크로 프론트엔드는 제한된 컨텍스트 내에서 프론트엔드 구현을 전적으로 담당하며, 이는 다음과 같이 구성됩니다.

    • 사용자 인터페이스

    • 데이터

    • 상태 또는 세션

    • 비즈니스 로직

    • 플로우

경계 컨텍스트란 들어오고 나가는 대상을 중재하는 신중하게 설계된 경계를 갖춘 내부적으로 일관된 시스템을 말합니다. 마이크로 프론트엔드는 다른 마이크로 프론트엔드와 비즈니스 로직 및 데이터를 최대한 적게 공유해야 합니다. 공유가 필요한 경우 사용자 지정 이벤트 또는 반응형 스트림과 같이 명확하게 정의된 인터페이스를 통해 공유가 이루어집니다. 하지만 디자인 시스템이나 로깅 라이브러리와 같은 일부 교차 문제의 경우 의도적인 공유는 환영합니다.

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

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