간략한 요약
이 비디오에서는 .NET MAUI와 Blazor를 사용하여 iOS, Android, Mac, Windows 및 웹용 하이브리드 애플리케이션을 만드는 방법을 설명합니다. 네이티브와 웹의 장점을 결합하여 크로스 플랫폼 개발을 간소화하고 코드 재사용성을 높이는 방법을 보여줍니다.
- .NET MAUI와 Blazor를 결합하여 네이티브 및 웹 기술을 활용하는 하이브리드 앱 개발
- 단일 코드 베이스에서 iOS, Android, Mac, Windows 앱을 빌드하고 배포하는 방법
- Blazor 웹 구성 요소를 .NET MAUI 앱에 통합하여 UI를 혼합하고 일치시키는 방법
.NET MAUI & Blazor 개요
.NET MAUI는 멀티 플랫폼 앱 UI로, .NET을 사용하여 iOS, Android, Mac, Windows용 네이티브 크로스 플랫폼 애플리케이션을 만들 수 있게 합니다. .NET 내부에 iOS, Android, Mac 및 Windows용 네이티브 API에 접근할 수 있으며, 대부분의 코드는 공유 코드로 작성됩니다. UI, 리소스, 연결, 지리적 위치와 같은 크로스 플랫폼 기능에 접근하고 비즈니스 로직을 공유할 수 있습니다. .NET MAUI는 단일 코드 베이스, 단일 프로젝트를 통해 다양한 플랫폼을 타겟팅하며, 각 플랫폼에 맞는 네이티브 컨트롤을 제공합니다. Blazor는 웹 구성 요소를 빌드하고 가져와 하이브리드 애플리케이션을 빌드하는 데 완벽한 사용 사례를 제공합니다.
Skillshare 스폰서
Skillshare는 사진, 영화, 비디오 편집, 일러스트레이션 등 다양한 분야의 수업을 제공하는 온라인 학습 플랫폼입니다. 경력에 초점을 맞춘 수백 개의 수업을 제공하며, 생산성 향상, 온라인 사업 시작 등 다양한 목표를 달성하는 데 도움을 줍니다. Skillshare와 파트너십을 통해 처음 1,000명은 한 달 동안 무료로 Skillshare를 체험할 수 있습니다.
Visual Studio 2022로 Blazor Hybrid 시작하기
Blazor Hybrid를 시작하려면 Visual Studio 또는 Visual Studio for Mac을 설치하고 .NET MAUI 워크로드를 설치해야 합니다. Blazor 개발을 위해서는 ASP.NET 및 웹 개발 워크로드도 필요합니다. .NET Maui와 함께하는 Blazor 하이브리드는 .NET 6에서 지원되지만, .NET 7 또는 8에서도 사용할 수 있습니다.
첫 번째 Blazor Hybrid 프로젝트 만들기
Visual Studio에서 새 프로젝트를 선택하고 .NET MAUI Blazer 앱 템플릿을 선택하여 새 프로젝트를 만듭니다. 프로젝트 이름을 지정하고 원하는 프레임워크를 선택합니다.
Blazor Hybrid 프로젝트 탐색
Blazor Hybrid 프로젝트는 Razer 파일, 종속성, 실행 설정, wwwroot 폴더 등을 포함합니다. Razer 파일은 Blazer 애플리케이션 내에서 구성 요소와 페이지를 만드는 데 사용됩니다. index.razer, 카운터, 페치 데이터와 같은 기본 페이지가 제공됩니다. 페치 데이터 페이지는 날씨 예보 서비스를 사용하여 데이터를 가져옵니다. 플랫폼 폴더에는 Android, iOS, Mac, Windows와 같은 각 플랫폼에 대한 구체적인 내용이 포함되어 있습니다. 공유 폴더에는 Blazer 앱에 대한 공유 구성 요소가 포함되어 있습니다.
BlazorWebView를 사용한 앱 시작, 종속성 주입 및 메인 페이지
MauiProgram.cs 파일은 애플리케이션을 만들고 구성하는 방법을 정의합니다. MauiBlazorWebView를 추가하여 Blazer 웹 뷰를 추가하고 디버그 모드에서 개발자 도구를 활성화합니다. 종속성 주입 서비스를 사용하여 예측 서비스와 같은 서비스를 등록하고 주입합니다. Main.razor 파일은 메인 레이아웃을 로드하고 사이드 탐색 메뉴를 제공합니다.
Blazor Hybrid를 Windows에 배포
Visual Studio에서 Windows를 선택하고 디버그를 누르면 로컬 컴퓨터에 자동으로 배포됩니다. 컴퓨터를 개발자 모드로 전환해야 합니다. 배포된 앱은 CSS 스타일 변경에 따라 자동으로 조정되며, 핫 리로드를 사용하여 애플리케이션을 동적으로 변경할 수 있습니다.
Blazor Hybrid를 Android에 배포 (에뮬레이터 및 관리)
Android 에뮬레이터를 실행하고 Visual Studio에서 Android를 선택하고 디버그를 누르면 Android 애플리케이션에 대한 전체 네이티브 컴파일이 수행됩니다. Android 에뮬레이터에 애플리케이션이 배포되고, Blazer 웹 뷰가 포함된 네이티브 Android 앱이 실행됩니다.
Blazor Hybrid에서 네이티브 API에 접근
Blazor Hybrid 앱은 네이티브 Android 웹 컨트롤이 있는 Blazer 웹 뷰이므로 다양한 네이티브 기능에 접근할 수 있습니다. .NET MAUI는 다양한 크로스 플랫폼 API를 제공하여 네트워킹, 앱 작업, 앱 정보 등에 접근할 수 있게 합니다. 예를 들어, 연결 API를 사용하여 인터넷 연결 상태를 확인하고 네이티브 대화 상자를 표시할 수 있습니다.
iOS 및 Mac에 배포
Mac의 경우 Mac으로 가서 Windows에서 Windows와 마찬가지로 Mac에 실제로 배포해야 합니다. .NET MAUI 앱을 Mac 없이 실제 iOS 기기에 배포하는 방법에 대한 전체 비디오가 있습니다. Windows 컴퓨터에 연결하거나 원격 빌드 호스트로 Mac에 원격으로 연결하여 Windows 컴퓨터에서 iOS 시뮬레이터를 볼 수 있습니다.
Blazor 웹 앱과 하이브리드 앱 간의 코드 공유
Blazor 웹 앱과 Blazor Hybrid 앱 간에 코드를 공유하려면 Razer 클래스 라이브러리를 사용합니다. Razer 클래스 라이브러리를 만들어 다양한 구성 요소를 공유할 수 있습니다. Blazer 앱과 Blazor Maui 하이브리드 애플리케이션 간에 다양한 구성 요소를 공유할 수 있습니다.
웹 및 네이티브 UI 혼합 및 매칭
Blazor Hybrid 앱은 웹 구성 요소와 네이티브 구성 요소를 혼합하고 일치시킬 수 있습니다. 네이티브 탭을 사용하고 그 안에 다양한 페이지를 호스팅할 수 있습니다. 콘텐츠 페이지를 탭 페이지로 만들고, Blazer 웹 뷰를 네이티브 컴포넌트 페이지 안에 래핑할 수 있습니다. 네이티브 컨트롤을 사용하는 컨트롤을 추가할 수 있습니다.
플랫폼별 UI 조정
.NET MAUI는 다양한 운영 체제에 대한 다양한 조정을 제공합니다. iOS, Android, Windows의 플랫폼별 특성을 활용하여 UI를 최적화할 수 있습니다. 예를 들어, Android 탭 페이지의 도구 모음 배치를 아래쪽에 배치할 수 있습니다.
마무리 및 최종 생각
.NET MAUI와 Blazor를 함께 사용하면 iOS, Android, Mac, Windows용 네이티브 및 하이브리드 웹 애플리케이션을 구축하고, 웹 앱과 코드를 공유할 수 있습니다. Blazer 개발자로서 모바일로 진출하거나, Maui 개발자로서 웹을 애플리케이션에 약간 섞을 수 있습니다. 유연성을 가질 수 있는 능력을 통해 개발자들이 있는 곳에서 만날 수 있습니다.
