다음을 통해 공유

마이크로 서비스를 기반으로 복합 UI 만들기

팁 (조언)

이 콘텐츠는 .NET Docs 또는 오프라인으로 읽을 수 있는 다운로드 가능한 무료 PDF로 제공되는 컨테이너화된 .NET 애플리케이션용 .NET 마이크로 서비스 아키텍처인 eBook에서 발췌한 내용입니다.

PDF 다운로드

컨테이너화된 .NET 애플리케이션을 위한 .NET 마이크로서비스 아키텍처 eBook의 표지 썸네일.

마이크로 서비스 아키텍처는 종종 서버 쪽에서 데이터 및 논리를 처리하는 것으로 시작하지만, 대부분의 경우 UI는 여전히 모놀리식으로 처리됩니다. 그러나 마이크로 프런트 엔드라고 하는 고급 접근 방식은 마이크로 서비스를 기반으로 애플리케이션 UI를 설계하는 것입니다. 즉, 서버에 마이크로 서비스가 있고 마이크로 서비스를 사용하는 모놀리식 클라이언트 앱만 사용하는 대신 마이크로 서비스에서 생성된 복합 UI를 갖습니다. 이 방법을 사용하면 논리 및 시각적 표현을 모두 사용하여 빌드하는 마이크로 서비스를 완료할 수 있습니다.

그림 4-20에서는 모놀리식 클라이언트 애플리케이션에서 마이크로 서비스를 사용하는 간단한 방법을 보여 줍니다. 물론 HTML과 JavaScript를 생성하는 사이에 ASP.NET MVC 서비스가 있을 수 있습니다. 이 그림은 마이크로 서비스를 사용하는 단일(모놀리식) 클라이언트 UI가 있음을 강조 표시하는 단순화로, UI 셰이프(HTML 및 JavaScript)가 아니라 논리 및 데이터에만 초점을 맞춥니다.

마이크로 서비스에 연결하는 모놀리식 UI 앱의 다이어그램

그림 4-20. 백 엔드 마이크로 서비스를 사용하는 모놀리식 UI 애플리케이션

반면, 복합 UI는 마이크로 서비스 자체에 의해 정확하게 생성되고 구성됩니다. 일부 마이크로 서비스는 UI의 특정 영역의 시각적 모양을 구동합니다. 주요 차이점은 템플릿을 기반으로 하는 클라이언트 UI 구성 요소(예: TypeScript 클래스)가 있고 해당 템플릿에 대한 데이터 셰이핑-UI ViewModel은 각 마이크로 서비스에서 가져온다는 것입니다.

클라이언트 애플리케이션 시작 시 각 클라이언트 UI 구성 요소(예: TypeScript 클래스)는 지정된 시나리오에 대해 ViewModels를 제공할 수 있는 인프라 마이크로 서비스에 등록됩니다. 마이크로 서비스가 셰이프를 변경하면 UI도 변경됩니다.

그림 4-21에서는 이 복합 UI 접근 방식의 버전을 보여 줍니다. 이 방법은 다른 기술을 기반으로 하는 세분화된 부분을 집계하는 다른 마이크로 서비스가 있을 수 있으므로 간소화됩니다. 기존 웹 방식(ASP.NET MVC) 또는 SPA(단일 페이지 애플리케이션)를 빌드하는지 여부에 따라 달라집니다.

여러 뷰 모델로 구성된 복합 UI의 다이어그램.

그림 4-21. 백 엔드 마이크로 서비스에 의해 형성된 복합 UI 애플리케이션의 예

이러한 각 UI 컴퍼지션 마이크로 서비스는 작은 API 게이트웨이와 유사합니다. 그러나 이 경우 각각은 작은 UI 영역을 담당합니다.

마이크로 서비스에 의해 구동되는 복합 UI 접근 방식은 사용 중인 UI 기술에 따라 더 어렵거나 적을 수 있습니다. 예를 들어 SPA를 빌드하거나 네이티브 모바일 앱에 사용하는 기존 웹 애플리케이션을 빌드하는 데 동일한 기술을 사용하지 않습니다(이 방법은 더 어려울 수 있습니다).

eShopOnContainers 샘플 애플리케이션은 여러 가지 이유로 모놀리식 UI 접근 방식을 사용합니다. 먼저 마이크로 서비스 및 컨테이너를 소개합니다. 복합 UI는 고급이지만 UI를 디자인하고 개발할 때 더 복잡해야 합니다. 둘째, eShopOnContainers는 Xamarin(2024년 5월 현재 지원되지 않음)을 기반으로 하는 네이티브 모바일 앱도 제공하므로 클라이언트 C# 쪽에서 더 복잡해집니다.

그러나 다음 참조를 사용하여 마이크로 서비스를 기반으로 하는 복합 UI에 대해 자세히 알아보는 것이 좋습니다.

추가 리소스

이전다음