연습 - Blazor 하이브리드 앱 만들기 및 실행

  • 8분

먼저 첫 번째 Blazor 웹앱을 만들어 보겠습니다.

이 모듈은 로컬 개발을 위해 Visual Studio 2022를 사용 합니다. 이 모듈을 완료하면 Visual Studio Code와 같은 개발 환경을 사용하여 해당 개념을 적용할 수 있습니다.

.NET MAUI 개발에 대한 요구 사항

.NET 8을 사용하여 .NET MAUI 앱을 만들려면 다음 워크로드가 설치된 Visual Studio 버전 17.8 이상 버전을 설치해야 합니다.

  • .NET 다중 플랫폼 앱 UI 개발

또한 .NET MAUI Blazor 앱을 빌드하려면 ASP.NET 및 웹 개발 워크로드를 설치해야 합니다.

자세한 설치 방법은 설명서를 참조하세요.

Visual Studio Code를 사용한 개발

macOS 또는 Linux에서 개발하는 경우 .NET SDK 및 .NET MAUI 워크로드와 함께 Visual Studio Code 및 .NET MAUI 확장을 설치해야 합니다. 자세한 설치 방법은 설명서를 참조하세요.

새 Blazor 하이브리드 앱 만들기

Blazor 하이브리드 프로젝트가 작동하도록 설정하기 위해 Visual Studio 2022를 사용합니다.

  1. Visual Studio 2022에서 파일>새 프로젝트를 선택하거나 시작 관리자에서 새 프로젝트 만들기를 선택합니다.

  2. 새 프로젝트 만들기 대화 상자의 상단에 있는 검색 상자에서 .NET MAUI Blazor를 입력하고 .NET MAUI Blazor 앱을 선택한 다음 다음을 선택합니다.

    Screenshot of the Visual Studio 2022 Create New Project screen and the .NET MAUI Blazor App template.

  3. 후속 화면에서 프로젝트 이름을 BlazorHybridApp으로 지정하고 프로젝트를 저장할 컴퓨터의 위치를 지정합니다. 솔루션 및 프로젝트를 동일한 디렉터리에 배치 옆에 있는 확인란을 선택한 다음, 다음을 선택합니다.

    Screenshot of the Visual Studio 2022 Configure Your Project screen and recommended settings from step 3.

  4. 추가 정보 화면의 Framework 드롭다운에서 .NET 8.0(장기 지원)을 선택한 다음, 만들기를 선택합니다.

  5. 이 명령은 필요한 모든 파일 및 페이지를 사용하여 .NET MAUI에서 제공하는 기본 Blazor 하이브리드 프로젝트를 만듭니다.

    이제 해당 파일에 액세스할 수 있게 되며, Visual Studio 2022의 솔루션 탐색기는 다음 예과 같이 표시됩니다.

    Screenshot of Visual Studio 2022 Solution Explorer with a list of the files in a default .NET MAUI Blazor project.

Blazor 하이브리드 프로젝트가 작동하도록 설정하기 위해 Visual Studio Code를 사용합니다.

  1. Visual Studio Code에서 탐색기를 열고 .NET 프로젝트 만들기를 선택합니다.

  2. 드롭다운 목록에서 .NET MAUI Blazor 하이브리드 앱을 선택합니다.

    Screenshot of the Visual Studio Code Create New Project screen and the .NET MAUI Blazor App template.

  3. 팝업 이름 BlazorHybridApp에 새 폴더를 만들고 폴더 선택을 선택합니다.

  4. 프로젝트 이름을 BlazorHybridApp으로 지정하고 Enter 키를 눌러 확인합니다.

  5. 이는 필요한 모든 파일 및 페이지를 사용하여 .NET MAUI에서 제공하는 기본 Blazor 하이브리드 프로젝트를 만듭니다.

    이제 이러한 파일에 액세스할 수 있으며 Visual Studio Code의 솔루션 탐색기는 다음과 유사합니다.

    Screenshot of Visual Studio Code Solution Explorer with a list of the files in a default .NET MAUI Blazor project.

.NET MAUI 프로젝트 구조 및 시작이 포함된 Blazor 하이브리드

이 프로젝트는 Blazor 관련 콘텐츠가 더 많은 일반 .NET MAUI 프로젝트입니다.

Blazor 프로젝트 파일

  • 페이지: 이 폴더에는 Blazor 사용자 인터페이스를 구성하는 세 페이지를 정의하는 세 가지 Razor 구성요소인 Counter.razor, FetchData.razor 및 Index.razor이(가) 있습니다.

  • 공유: 이 폴더에는 기본 레이아웃 및 탐색 메뉴를 비롯한 공유 Razor 구성 요소가 포함되어 있습니다.

  • wwwroot: 이 폴더에는 HTML, CSS, JavaScript 및 이미지 파일을 포함하여 Blazor에서 사용하는 정적 웹 자산이 포함되어 있습니다.

  • Main.razor: 웹 보기 내에서 페이지 탐색을 처리하도록 Blazor 라우터를 설정하는 앱의 루트 Razor 구성 요소입니다.

  • _Imports.razor: 이 파일은 각 Razor 구성 요소로 가져오는 네임스페이스를 정의합니다.

.NET MAUI 프로젝트 파일

  • App.xaml: 이 파일은 앱이 XAML 레이아웃에서 사용하는 애플리케이션 리소스를 정의합니다. 기본 리소스는 Resources 폴더에 있으며 앱 전체 색과 .NET MAUI의 모든 기본 제공 컨트롤의 기본 스타일을 정의합니다.

  • App.xaml.cs: App.xaml 파일의 코드 숨김입니다. 이 파일은 앱 클래스를 정의합니다. 이 클래스는 런타임 시 애플리케이션을 나타냅니다. 이 클래스의 생성자는 초기 창을 만들고 MainPage 속성에 할당합니다. 이 속성은 애플리케이션이 실행될 때 표시되는 페이지를 결정합니다. 또한 이 클래스를 사용하면 일반적인 플랫폼 중립 애플리케이션 수명 주기 이벤트 처리기를 재정의할 수 있습니다. 이벤트에는 OnStart, OnResume 및 OnSleep이 포함됩니다.

  • MainPage.xaml: 이 파일에는 사용자 인터페이스 정의가 포함되어 있습니다. .NET MAUI Blazor 앱 템플릿에서 생성하는 샘플 앱은 CSS 선택기(#app)에서 지정한 위치에 지정된 호스트 HTML 페이지(wwwroot/index.html)의 Main 구성 요소를 로드하는 BlazorWebView(으)로 구성됩니다.

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:BlazorHybridApp"
    x:Class="BlazorHybridApp.MainPage"
    BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

  • MainPage.xaml.cs: 페이지의 코드 숨김입니다. 이 파일에서는 페이지 트리거에서 .NET MAUI가 제어하는 다양한 이벤트 처리기 및 기타 작업에 대한 논리를 정의합니다. 템플릿의 예제 코드에는 모든 사용자 인터페이스 및 이벤트가 Blazor 구성 요소에 있으므로 기본 생성자만 있습니다.

    namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

  • MauiProgram.cs: 네이티브 플랫폼마다 애플리케이션을 만들고 초기화하는 다른 시작점이 있습니다. 프로젝트의 Platforms 폴더에서 이 코드를 찾을 수 있습니다. 이 코드는 플랫폼별 코드이지만 결국에는 정적 MauiProgram 클래스의 CreateMauiApp 메서드를 호출합니다. CreateMauiApp 메서드를 사용하여 앱 작성기 개체를 만들어 애플리케이션을 구성합니다. 최소한 애플리케이션을 설명하는 클래스를 지정해야 합니다. 앱 작성기 개체의 UseMauiApp 제네릭 메서드를 사용하여 이 작업을 수행할 수 있으며, 형식 매개 변수는 애플리케이션 클래스를 지정합니다. 또한 앱 작성기는 글꼴 등록, 종속성 주입에 사용되는 서비스 구성, 컨트롤의 사용자 지정 처리기 등록 등과 같은 작업에 사용되는 메서드를 제공합니다. 다음 코드에서는 앱 작성기를 사용하여 글꼴을 등록하고, 날씨 서비스를 등록하고, AddMauiBlazorWebView 메서드를 사용하여 Blazor 하이브리드에 대한 지원을 추가하는 예제를 보여줍니다.

    using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

        builder.Services.AddMauiBlazorWebView();

        #if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
        #endif

        builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

앱 실행

  • Visual Studio에서 디버그>디버깅 시작을 선택합니다.
  • Visual Studio Code에서 실행>디버깅 시작을 선택합니다. 드롭다운 목록에서 .NET MAUI 디버거를 선택하여 애플리케이션을 시작합니다.
This builds and starts the app on Windows, and then rebuilds and restarts the app whenever you make code changes. The app should automatically open on Windows. You can also change the deployment target through the debug drop-down menu to deploy to Android or other platforms.

![Screenshot of the default Blazor Hybrid app running on Windows and Android.](../media/hello-blazor.png)

다음 몇 가지 연습에서는 이 Blazor 하이브리드 앱을 사용합니다.