디모이 블로그

C# 및 MVVM 툴킷으로 Blazor 서버 애플리케이션 만들기 | bromix

C# 및 MVVM 툴킷으로 Blazor 서버 애플리케이션 만들기 | bromix

dimohy's photo
dimohy
·

4 min read

bromix님의 Creating a Blazor Server Application with C# and MVVM Toolkit을 번역하였습니다.

Blazor는 .NET 및 C#을 사용하여 클라이언트 측 웹 애플리케이션을 구축하기 위한 최신 웹 프레임워크입니다. Blazor를 사용하면 JavaScript 대신 C#을 사용하여 풍부한 대화형 웹 UI를 작성할 수 있습니다.

이 글에서는 Blazor Server와 MVVM 툴킷을 사용하여 프런트엔드 개발에 C#을 사용하는 간단한 웹 애플리케이션을 만드는 데 중점을 두겠습니다. 먼저 .NET CLI를 사용하여 새 Blazor Server 애플리케이션을 생성한 다음 MVVM 툴킷을 사용하여 프로젝트에 ViewModel을 추가합니다. 마지막으로 뷰모델을 사용하여 로딩 상태를 표시하고 항목 목록을 렌더링하는 간단한 블레이저 페이지를 만들겠습니다.

Blazor 서버 애플리케이션 만들기

Blazor Server를 시작하기 위해 .NET CLI를 사용하여 새 Blazor Server 애플리케이션을 생성합니다. 아래 단계에 따라 새 Blazor Server 프로젝트를 생성합니다:

터미널 또는 명령 프롬프트를 열고 프로젝트를 만들려는 디렉토리로 이동합니다. 다음 명령을 실행하여 새 Blazor Server 프로젝트를 생성합니다:

dotnet new blazorserver -n ExamplesBlazorMvvmToolkit

이렇게 하면 같은 이름의 디렉터리에 "ExamplesBlazorMvvmToolkit"이라는 새 Blazor Server 프로젝트가 생성됩니다. 프로젝트 디렉토리로 이동합니다:

cd ExamplesBlazorMvvmToolkit

다음 명령을 사용하여 프로젝트를 실행합니다:

dotnet run

웹 브라우저를 열고 터미널에 표시된 주소(이 예에서는 http://localhost:5062)로로) 이동합니다:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5062
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]

이제 끝입니다! 이제 간단한 Blazor 서버 애플리케이션이 실행 중입니다.

뷰모델 만들기

BlazorApp 템플릿에서 날씨 데이터는 페이지에 삽입되는 서비스에서 제공됩니다. 뷰모델을 추가하고 WeatherForecastService를 뷰모델에 주입하면 우려 사항을 더 잘 분리하고 애플리케이션의 유지 관리성을 개선할 수 있습니다.

이 새로운 접근 방식에서는 뷰모델이 날씨 데이터를 검색하여 뷰에 노출하고, 뷰는 데이터를 렌더링하고 사용자 상호 작용을 처리하는 역할을 담당합니다. MVVM 툴킷을 사용하여 이를 달성하는 방법을 살펴보겠습니다.

MVVM 툴킷 추가

MVVM 툴킷은 .NET 및 C#을 사용하여 MVVM 기반 애플리케이션을 빌드하는 데 도움이 되는 라이브러리 세트입니다. Blazor 서버 프로젝트에 MVVM 툴킷을 추가하려면 터미널에서 다음 명령을 실행합니다:

dotnet add package CommunityToolkit.Mvvm

다음으로 뷰모델을 생성해 봅시다. BlazorApp 프로젝트의 루트 디렉터리에 "ViewModels"라는 새 폴더를 만들고 이 폴더 안에 "WeatherViewModel.cs"라는 새 클래스 파일을 생성합니다. 이 파일에 다음 코드를 추가합니다:

using CommunityToolkit.Mvvm.ComponentModel;
using ExamplesBlazorMvvmToolkit.Data;

namespace ExamplesBlazorMvvmToolkit.ViewModels;

internal sealed partial class WeatherViewModel : ObservableObject
{
    private readonly WeatherForecastService _weatherService;

    public WeatherViewModel(WeatherForecastService weatherService)
    {
        _weatherService = weatherService;
    }

    [ObservableProperty] private bool _isLoading;

    [ObservableProperty] private WeatherForecast[] _forecasts = Array.Empty<WeatherForecast>();

    public async Task LoadDataAsync()
    {
        IsLoading = true;

        try
        {
            await Task.Delay(TimeSpan.FromSeconds(2)); // simulate loading
            Forecasts = await _weatherService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        finally
        {
            IsLoading = false;
        }
    }
}

MVVM 툴킷은 소스 생성기를 사용하여 우리가 정의한 [ObservableProperty] 특성을 기반으로 뷰모델에 필요한 코드를 생성합니다. 소스 생성기는 뷰모델을 분석하여 대문자 이름을 가진 해당 공용 프로퍼티와 변경 알림에 필요한 코드를 생성합니다. 이를 통해 ViewModel에 대한 간단하고 간결한 코드를 작성하는 동시에 완전히 구현된 ViewModel의 이점을 누릴 수 있습니다.

Microsoft의 MVVM 툴킷에 대해 자세히 알아보려면 설명서 페이지(https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/)를를) 방문하세요. 패키지를 다운로드하려면 https://www.nuget.org/packages/CommunityToolkit.Mvvm 으로 이동하세요.

뷰모델 데이터를 표시하도록 블레이저 페이지 업데이트하기

이제 ViewModel이 준비되었으므로 Pages 폴더 아래에 있는 Blazor 페이지 "FetchData.razor"를 업데이트해 보겠습니다. 아래는 업데이트된 버전입니다:

@page "/fetchdata"
@using ExamplesBlazorMvvmToolkit.ViewModels
@inject WeatherViewModel ViewModel

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (ViewModel.IsLoading)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <table class="table">
        <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var forecast in ViewModel.Forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

@code {

    protected override async Task OnInitializedAsync()
    {
        await ViewModel.LoadDataAsync();
    }

}

결국 5줄의 코드만 변경했습니다.

  1. WeatherForecastService 대신 WeatherViewModel을 FetchData 페이지에 삽입합니다.

  2. 널 예보 배열을 확인하는 대신 ViewModel의 IsLoading 속성을 사용합니다.

  3. 사용하지 않는 로컬 예보 멤버를 제거하고 대신 ViewModel의 Forcasts 배열을 반복합니다.

  4. 이전에 예상 데이터를 저장하는 데 사용되었던 코드가 제거되었습니다.

  5. 예측 데이터를 로드하기 위해 뷰모델에서 Load 함수가 호출됩니다.

의존성 주입에 대한 뷰모델 등록

뷰모델을 종속성 주입 컨테이너에 등록하려면 Program.cs 파일을 열어야 합니다. builder.Services.AddScoped메소드를 사용하여 뷰모델을 등록할 수 있습니다.

using ExamplesBlazorMvvmToolkit.Data;
using ExamplesBlazorMvvmToolkit.ViewModels;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddScoped<WeatherViewModel>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

이제 서버를 다시 실행하고 일기 예보로 이동하면 이전과 동일하게 작동하지만 뷰모델을 통해 작동합니다. 모든 책임이 뷰모델로 이동되며, 심지어 IsLoading 상태도 마찬가지입니다.

결론

결론적으로 MVVM 툴킷을 사용하여 Blazor 애플리케이션에서 MVVM 패턴을 구현하는 방법을 살펴봤습니다. 뷰와 뷰모델을 분리함으로써 더 깔끔하고 유지 관리가 쉬운 코드베이스를 만들 수 있었습니다. MVVM 툴킷의 커뮤니티 툴킷을 사용하면 쉽게 작업할 수 있으며, 소스 생성기가 반복적인 작업 대부분을 처리합니다. 이 구현을 사용하면 뷰의 콘텐츠를 렌더링하는 데 집중할 수 있으며, 무거운 작업은 뷰모델이 처리합니다. 전반적으로 MVVM 툴킷과 함께 MVVM 패턴을 사용하면 블레이저 애플리케이션의 개발 환경을 크게 개선할 수 있습니다.

이 글이 Blazor에서 MVVM 툴킷을 사용하는 방법을 설명하는 데 도움이 되었기를 바랍니다. 궁금한 점이나 의견이 있으시면 언제든지 문의해 주세요.

2부 MVVM 툴킷과 RelayCommands를 사용하여 Blazor 서버 애플리케이션 빌드하기에서는 RelayCommands를 사용하여 예제를 개선합니다.

3부 MVVM 툴킷을 사용한 블레이저에서 쉽게 비동기 명령 취소하기에서는 릴레이 명령과 비동기 메서드에 대해 자세히 살펴봅니다.

Blazor와 함께 MVVM 툴킷을 사용하기 위한 예제 프로젝트는 GitHub 저장소(https://github.com/bromix/ExamplesBlazorMvvmToolkit)에서)에서 확인할 수 있습니다.

https://itnext.io/creating-a-blazor-server-application-with-c-and-mvvm-toolkit-4a6cc6bf767d
dotnet.NETBlazor