Blazor

Blazor

• Razor 클래스 라이브러리 또는 NuGet 패키지로 공유 및 배포될 수 있습니다.

• 클래스는 일반적으로 .razor 파일 확장자를 가진 Razor 태그 페이지 형식으로 작성

• Razor는 HTML, CSS, C# 코드를 결합한 구문

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
	private int currentCount = 0;
	private void IncrementCount()
	{
		currentCount++;
	}
}

Blazor Web Apps

• 서버에서 UI 렌더링이 빠르게 수행되므로 페이지가 빠르게 로드됨

• 브라우저와의 실시간 연결을 통해 서버에서 UI 상호 작용을 처리하는 대화형 SSR을 지원

• 대화형 SSR(Interactive SSR)을 사용하면 클라이언트 앱에서 기대하는 것처럼 풍부한 사용자 환경을 사용할 수 있지만 서버 리소스에 액세스하기 위해 API 엔드포인트를 만들 필요가 없다. 대화형 페이지의 페이지 콘텐츠는 미리 렌더링됨

Blazor Hybrid

• .NET 프로세스에서 기본적으로 실행

• 로컬 interop 채널을 사용하여 포함된 Web View 컨트롤에 웹 UI를 렌더링

• C# 및 XAML을 사용하여 네이티브 모바일 및 데스크톱 앱을 만들기 위한 플랫폼 간 프레임워크인 .NET MAUI를 사용하여 빌드됨

Blazor Project Contents

Program.cs

Components

• App.razor : 앱의 루트를 구성하는 요소

• Routes.razor : Blzor 라우터를 구성

• Pages : 디렉터리에는 앱에 대한 몇 가지 예제 웹 페이지가 포함

Properties 디렉터리 내의 launchSettings.json 파일

대화형 작업 사용

• 서버에서 정적으로 렌더링

• 지시문을 사용하여 대화형 렌더링 모드를 적용하여 구성 요소를 대화형으로 만듬 @rendermode

@rendermode InteractiveServer

<Counter @rendermode="InteractiveServer" />

1. Blazor는 앱의 구성 요소에서 처리할 수 있도록 연결을 통해 서버에 UI 이벤트를 보냄

2. Blazor는 렌더링된 업데이트를 사용하여 브라우저 DOM 업데이트를 처리

1. 렌더링 모드를 InteractiveWebAssembly사용하여 클라이언트에서 대화형으로 렌더링

2. 구성 요소 코드가 다운로드되고 WebAssembly 기반 .NET 런타임을 사용하여 클라이언트 쪽 실행

호스팅 모델

Blazor Server

1. 연결 관리를 자동으로 처리

2. 모든 연결된 클라이언트에 동시에 메시지 전송

3. 특정 클라이언트나 클라이언트 그룹으로 메시지를 전송

4. 늘어난 트래픽을 처리하도록 크기를 조정

Blazor WebAssembly

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

Blazor 프로젝트 파일

• Pages : Blazor 사용자 인터페이스를 구성하는 세 페이지를 정의

• Shared : 기본 레이아웃 및 탐색 메뉴를 비롯한 공유 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가 제어하는 다양한 이벤트 처리기 및 기타 작업에 대한 논리를 정의

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();
    }
}

HttpClient 클래스

• 앱이 REST 웹 서비스에 HTTP 요청을 보내고 HTTP 응답을 수신하는 데 사용할 수 있는 .NET 클래스

• URI 집합은 웹 서비스가 노출하는 리소스를 식별

• URI는 웹 서비스의 주소를 해당 주소에서 사용할 수 있는 리소스의 이름과 결합

using System.Net.Http;
...
var client = new HttpClient();

HttpClient로 새 리소스 만들기

HttpClient client = new HttpClient();

// 웹 서비스로 전송되는 요청을 모델링, HTTP 동사, 웹 서비스의 URL을 지정
HttpRequestMessage message = new HttpRequestMessage(HttpMethod.Post, url);
// 속성을 통해 보낼 페이로드를 채움
message.Content = JsonContent.Create<Part>(part);

HttpResponseMessage response = await client.SendAsync(message);

• 메시지를 보내는 사용하는 client라는 HttpClient의 인스턴스를 만듬

• 메시지를 모델링하는 데 사용하는 message라는 HttpRequestMessage의 인스터스를 만듭니다. message에는 HTTP 동사와 URL 이 있음

• JsonContent.Create 함수를 사용하여 HttpRequestMessage의 Content 속성을 설정, 이 함수는 part변수를 웹 서비스로 보내기에 적합한 JSON으로 자동으로 직렬화

• HttpClient 개체를 사용하여 메시지를 보냅니다. HttpResponseMessage는 상태 코드 및 웹 서비스에서 반환하는 정보와 같은 정보가 포함

HttpClient로 리소스 읽기

HttpClient client = new HttpClient();

// GetStringAsync 메서스는 리소스를 참조하는 URI를 사용하고 응답을 문자열로 반환
string text = await client.GetStringAsync("https://...");
//ㅔ더를 추가하여 데이터를 특정 형식으로 반환해야 한다고 웹 서비스에 알려줌
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

• 문자열로 반환되고 응답 메시지 본문만 포함

• 헤더, 본문 및 상태 코드를 포함한 전체 응답을 가져오려면 GetAsync 메서드를 호출

• 데이터가 HttpResponseMessage 개체로 반환됨

HttpClient로 리소스 업데이트

HttpClient client = new HttpClient();
HttpRequestMessage message = new HttpRequestMessage(HttpMethod.Put, url);

message.Content = JsonContent.Create<Part>(part);

HttpResponseMessage response = await client.SendAsync(message);

HttpClient로 리소스 삭제

HttpClient client = new HttpClient();
HttpRequestMessage message = new HttpRequestMessage(HttpMethod.Delete, url);

HttpResponseMessage response = await client.SendAsync(message);