Blazor 하이브리드의 개념

완료됨

웹앱을 빌드하는 회사는 일반적으로 다양한 역할을 위해 개발자를 고용합니다. 일부 개발자는 백 엔드 서버 쪽 논리를 만듭니다. 일부 개발자는 클라이언트 측 웹앱을 빌드합니다. 다른 개발자는 모바일 및 데스크톱 플랫폼용 네이티브 클라이언트 앱을 빌드합니다. 이러한 개발자는 종종 다른 개발 언어와 기술을 사용합니다.

C# 및 Microsoft .NET은 서버 측 논리를 빌드할 수 있는 인기 옵션입니다. 클라이언트 측 웹앱은 JavaScript를 사용하여 웹 UI 프레임워크를 통해 빌드되는 경우가 많습니다. 데스크톱 및 모바일용 네이티브 클라이언트 앱에는 .NET 및 C#용의 여러 옵션을 포함하여 사용할 수 있는 몇 가지 옵션이 있습니다. 여러 언어 및 도구 집합을 사용하려면 여러 기술 세트가 필요하며 종종 두 개의 별도 팀이 필요합니다. 또한 데이터를 전송하고 나타내는 코드는 두 가지 언어로 빌드되고 동기화되어야 합니다. Blazor Hybrid는 동일한 기술을 사용하여 네이티브 클라이언트 애플리케이션을 빌드하기 위해 C# 및 .NET에서 웹 애플리케이션을 빌드할 때 기존 기술과 코드를 사용할 수 있도록 하여 개발 팀의 작업, 코드 및 프로세스를 간소화할 수 있습니다.

이 단원에서는 Blazor 및 Razor 구성 요소 소개를 시작하겠습니다.

Blazor란?

Blazor 앱은 C#, HTML, CSS를 사용하여 빌드된 재사용 가능 웹 UI 구성 요소로 구성됩니다. Blazor를 통해 개발자는 C#으로 클라이언트 및 서버 코드를 빌드할 수 있습니다. 또한 프런트 엔드 클라이언트 코드와 백 엔드 논리를 사용하여 코드와 라이브러리를 공유할 수 있습니다. 모든 코드에 C#을 사용하면 프런트 엔드 및 백 엔드 간에 데이터를 간편하게 공유할 수 있으며, 코드를 다시 사용하여 개발이 가속화되고 유지 관리가 줄어듭니다.

Blazor 하이브리드의 개념

Blazor Hybrid를 사용하면 개발자는 데스크톱 및 모바일 네이티브 클라이언트 프레임워크를 .NET 및 Blazor와 혼합할 수 있습니다.

Blazor 하이브리드 앱에서 Razor 구성 요소는 디바이스에서 기본적으로 실행됩니다. 구성 요소는 로컬 interop 채널을 통해 포함된 웹 뷰 컨트롤에 렌더링됩니다. 구성 요소는 브라우저에서 실행되지 않으며 WebAssembly는 관련되지 않습니다. Razor 구성 요소는 코드를 빠르게 로드 및 실행하고, 구성 요소는 .NET 플랫폼을 통해 디바이스의 네이티브 기능에 대한 전체 액세스 권한을 갖습니다.

Diagram that shows the Blazor Hybrid architecture.

.NET MAUI의 개념

.NET MAUI(.NET 다중 플랫폼 앱 UI)는 C#과 XAML을 사용하여 네이티브 모바일 및 데스크톱 앱을 만들기 위한 플랫폼 간 프레임워크입니다. .NET MAUI를 사용하여 단일 공유 코드 베이스에서 Android, iOS, macOS 및 Windows에서 실행할 수 있는 앱을 개발할 수 있습니다. .NET MAUI의 주요 목표 중 하나는 단일 코드베이스에서 최대한 많은 앱 논리와 UI 레이아웃을 구현할 수 있도록 하는 것입니다. .NET MAUI는 Android, iOS, macOS 및 Windows API를 단일 API로 통합하여 한 번만 실행되는 개발자 환경을 허용하는 동시에 각 네이티브 플랫폼의 모든 측면에 대한 심층 액세스를 제공합니다.

Diagram that shows the .NET MAUI architecture.

.NET MAUI를 사용하는 Blazor 하이브리드 앱

Blazor 하이브리드 지원은 .NET MAUI 프레임워크에 기본 제공됩니다. .NET MAUI에는 Razor 구성 요소를 포함된 웹 뷰로 렌더링할 수 있도록 하는 BlazorWebView 컨트롤이 포함되어 있습니다. .NET MAUI 및 Blazor를 함께 사용하면 모바일, 데스크톱 및 웹에서 하나의 웹 UI 구성 요소 집합을 다시 사용할 수 있습니다.

Blazor 하이브리드 개발 요구 사항

최신 버전의 Visual Studio 2022 또는 Visual Studio Code(.NET SDK, .NET MAUI 워크로드, C# Dev Kit 확장 및 .NET MAUI 확장이 설치됨)를 사용하여 Blazor Hybrid 앱을 빌드할 수 있습니다. 이 모듈에서는 Visual Studio 2022 또는 Visual Studio Code를 사용하여 Blazor 하이브리드 애플리케이션을 빌드합니다.

개발 환경이 무엇이든 간에 Visual Studio에서 .NET 8.0 SDK 및 도구를 사용할 수 있도록 .NET MAUI 워크로드를 설치해야 합니다. 설치되면 Blazor 하이브리드 앱 빌드를 시작하는 데 필요한 모든 항목이 제공됩니다. 다음 연습에서는 첫 번째 Blazor 하이브리드 앱을 빌드합니다.