.NET 8.0 Blazor Server에서 Blazor WebAssembly 프로젝트에 HttpClient를 AddScoped로 등록 및 사용하기

• 5/13/2024
• 3 minutes to read

Blazor Server와 Blazor WebAssembly는 .NET 생태계에서 웹 애플리케이션을 구축하는 두 가지 주요 방법입니다. 이 가이드에서는 .NET 8.0 Blazor Server 프로젝트 내에서 Blazor WebAssembly 프로젝트를 포함하고, HttpClient를 AddScoped로 등록하여 사용하는 방법을 단계별로 설명합니다.

1단계: 새로운 Blazor Server 프로젝트 만들기

1. Visual Studio에서 새로운 Blazor Server 프로젝트를 생성합니다.
2. 프로젝트 이름은 HawasoBlazor로 설정하고, 프로젝트 유형을 Blazor Server App으로 선택하세요.

2단계: Blazor WebAssembly 프로젝트 추가

1. 솔루션에 새로운 Blazor WebAssembly 프로젝트를 추가합니다.
2. 프로젝트 이름은 HawasoBlazorWasm으로 설정합니다.

3단계: Blazor Server 프로젝트와 WebAssembly 프로젝트 연결

Blazor Server 프로젝트의 _Imports.razor 파일에 WebAssembly 프로젝트를 사용하기 위한 네임스페이스를 추가합니다.

@using HawasoBlazorWasm

4단계: HttpClient를 AddScoped로 등록하기

4.1. Blazor WebAssembly 프로젝트의 Program.cs 파일 수정

HawasoBlazorWasm 프로젝트의 Program.cs 파일에서 HttpClient를 AddScoped로 등록합니다.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using HawasoBlazorWasm;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

4.2. Blazor Server 프로젝트의 Program.cs 파일 수정

HawasoBlazor 프로젝트의 Program.cs 파일에서 HttpClient를 AddScoped로 등록합니다.

using HawasoBlazorWasm;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
                .AddScoped<HttpClient>(sp =>
                {
                    var navigationManager = sp.GetRequiredService<NavigationManager>();
                    return new HttpClient { BaseAddress = new Uri(navigationManager.BaseUri) };
                });

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapRazorComponents<App>();

app.Run();

5단계: HttpClient를 사용하여 데이터 가져오기

5.1. Blazor WebAssembly 프로젝트의 컴포넌트 생성

Pages 폴더에 FetchData.razor 파일을 추가하고, HttpClient를 사용하여 데이터를 가져오는 코드를 작성합니다.

@page "/fetchdata"
@inject HttpClient Http

<h3>Fetch Data</h3>

@if (forecasts == null)
{
    <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 forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

5.2. 데이터 모델 생성

Data 폴더에 WeatherForecast.cs 파일을 추가하고 데이터 모델을 정의합니다.

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string Summary { get; set; }
}

6단계: Blazor Server 프로젝트에서 Blazor WebAssembly 컴포넌트 사용

6.1. Blazor Server 프로젝트에 WebAssembly 컴포넌트 등록

Pages 폴더에 FetchDataPage.razor 파일을 추가하고, Blazor WebAssembly의 FetchData 컴포넌트를 사용합니다.

@page "/fetchdata-page"
@using HawasoBlazorWasm.Pages

<FetchData />

마무리

이 가이드를 통해 Blazor Server 프로젝트와 Blazor WebAssembly 프로젝트를 연결하고, HttpClient를 AddScoped로 등록하여 사용하는 방법을 익혔습니다. 이러한 구조를 통해 서버 및 클라이언트 간의 데이터 상호작용을 효과적으로 관리할 수 있습니다.