간략한 요약
이 비디오에서는 하이브리드 앱 구축에 대해 설명하고, .NET MAUI Blazor 앱을 사용하여 플랫폼 간 코드 공유를 구현하는 방법을 보여줍니다. 주요 내용은 다음과 같습니다.
- .NET MAUI Blazor 앱 프로젝트 생성 및 구조 이해
- Blazor 웹 프로젝트와 Razor 클래스 라이브러리를 활용한 코드 공유 방법
- 플랫폼별 기능(예: 알림 표시, 인터넷 연결 확인) 구현
소개
하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 결합한 것으로, 이 비디오에서는 .NET MAUI Blazor 앱을 통해 이를 구현하는 방법을 소개합니다.
.NET MAUI Blazor 앱 프로젝트 생성 및 구조
Visual Studio에서 .NET MAUI Blazor 앱 프로젝트를 생성하는 방법을 설명합니다. 프로젝트 구조는 Android, iOS, Mac Catalyst, Tizen, Windows 등 다양한 플랫폼 폴더와 Blazor 프로젝트와 유사한 페이지 및 공유 폴더를 포함합니다. MauiProgram.cs에서는 MauiWebView 서비스가 종속성 서비스에 통합되고, 디버깅 시 Blazor WebView 개발자 도구가 활성화됩니다. MainPage.xaml 파일에서 Blazor WebView 요소가 wwwroot/index.html을 호스트 페이지로 로드하여 두 컨트롤 간의 연결을 설정합니다.
Blazor 웹 프로젝트를 사용한 코드 공유
Blazor 서버 앱 프로젝트를 생성하고, Razor 클래스 라이브러리를 추가하여 두 프로젝트 간에 Razor 구성 요소를 공유하는 방법을 설명합니다. CustomerComponent라는 새로운 Razor 구성 요소를 만들어 고객 데이터를 테이블에 추가하는 기능을 구현합니다. 이 구성 요소는 고객 이름과 이메일을 입력받고, "AddCustomer" 메서드를 통해 고객 목록에 추가합니다.
Razor 구성 요소 통합 및 기능 확인
Razor 클래스 라이브러리에서 만든 CustomerComponent를 Blazor 서버 앱과 .NET MAUI Blazor 앱에 통합하는 방법을 보여줍니다. 먼저 프로젝트 참조를 추가한 후, 각 프로젝트의 인덱스 페이지에 구성 요소를 배치합니다. Blazor 서버 앱에서는 웹 페이지에 고객 데이터 입력 및 테이블 표시 기능이 정상적으로 작동하는 것을 확인하고, .NET MAUI Blazor 앱에서는 Android 에뮬레이터에서 동일한 디자인과 기능을 확인합니다.
플랫폼별 기능 구현
Maui 프레임워크 내에서 플랫폼별 메서드를 통합하는 방법을 설명합니다. Maui 플랫폼에서 사용할 수 있는 DisplayAlert 메서드를 사용하여 경고 메시지를 표시하는 예시를 보여줍니다. Blazor 서버 앱에서는 JavaScript 알림을 활용하여 동일한 기능을 구현합니다. 또한, .NET MAUI Blazor 앱에서 인터넷 연결을 확인하는 기능을 추가하여 연결 상태에 따라 다른 알림을 표시합니다.
결론
이 튜토리얼을 통해 다용도 앱을 구축하는 기술에 대한 귀중한 통찰력을 얻었기를 바라며, 즐거운 코딩을 기원합니다.
