New Blazor Hybrid + .NET MAUI Templates are Incredible! Mobile, Desktop, Web all together!

간략한 요약

이 비디오에서는 .NET 9 Preview 5에 새로 추가된 Blazor 하이브리드 템플릿을 소개합니다. 이 템플릿은 웹, 모바일, 데스크톱 앱 개발 시 코드 공유를 극대화할 수 있도록 설계되었습니다. 주요 내용은 다음과 같습니다.

새로운 Maui Blazor 웹 템플릿을 사용하여 웹 앱과 Maui Blazor 하이브리드 앱을 동시에 구성하고 개발하는 방법
Razor 클래스 라이브러리를 사용하여 코드 공유를 극대화하는 방법
폼 팩터(Form Factor) 서비스를 통해 앱이 실행되는 플랫폼에 따라 다른 동작을 구현하는 방법

.NET 9 Preview 5의 새로운 Blazor 하이브리드 템플릿 소개

.NET 9 Preview 5 릴리스 노트에서 업데이트된 Blazor 하이브리드 템플릿을 확인하고, 더 많은 코드 공유를 위한 Blazor 웹 앱과 Razor 클래스 라이브러리 프로젝트가 포함된 새로운 프로젝트 템플릿과 Maui Blazor 웹이라는 새로운 식별자를 소개합니다.

개발 환경 설정

.NET 9 Preview 5 이상을 설치하고 터미널에서 net workload list 명령어를 통해 설치된 워크로드를 확인합니다. Maui 워크로드가 없다면 net workload install Maui 명령어를 실행하여 필요한 모든 항목을 설치합니다. net new list 명령어를 통해 사용 가능한 템플릿 목록을 확인하고, Donet Maui Blazer 하이브리드 모바일 앱과 새로운 Maui Blazer 웹 템플릿을 확인합니다.

새 프로젝트 생성 및 구성

Visual Studio에서 새 프로젝트를 생성할 때 Maui Blazer 하이브리드 및 웹 앱 템플릿을 선택합니다. 웹 애플리케이션을 D Maui Blazer 하이브리드 앱과 함께 구성하고, HTTPS 사용 여부, 샘플 페이지 포함 여부, 웹 앱 실행에 사용할 렌더링 모드를 결정합니다.

프로젝트 구조 살펴보기

새로 생성된 프로젝트는 Maui 앱, 공유된 Razor 클래스 라이브러리 프로젝트, Blazer 애플리케이션으로 구성됩니다. 모든 페이지와 레이아웃 파일은 Razor 클래스 라이브러리 안에 위치하여 코드 공유를 극대화합니다. 기본 레이아웃, 카운터, 경로 등이 공유 프로젝트 안에 포함됩니다.

폼 팩터(Form Factor) 서비스

앱이 특정 폼 팩터와 플랫폼에서 실행 중임을 알려주는 폼 팩터 서비스를 사용합니다. IFormFactor 인터페이스를 통해 폼 팩터와 플랫폼 정보를 얻을 수 있습니다. Blazer 애플리케이션에서는 이 서비스에 대한 싱글톤을 등록하고, Maui 앱에서는 Maui 장치 정보를 사용하여 플랫폼 및 버전 정보를 가져옵니다.

웹 앱 실행 및 확인

웹 앱 프로젝트를 시작 프로젝트로 설정하고 브라우저에서 실행하여 표준 Blazer 애플리케이션이 정상적으로 작동하는지 확인합니다. 폼 팩터 서비스를 통해 얻은 플랫폼 정보가 화면에 표시되는 것을 확인할 수 있습니다.

Maui 앱 실행 및 확인

Maui 앱 프로젝트를 시작 프로젝트로 설정하고 Windows에서 실행하여 Blazer 하이브리드 앱 내부에서 동일한 Blazer 애플리케이션이 실행되는 것을 확인합니다. 폼 팩터 서비스에 따라 데스크톱 환경에 맞는 UI가 표시되는 것을 확인할 수 있습니다. Android 또는 iOS에서 실행하면 해당 모바일 환경에 맞는 UI가 표시됩니다.