[Blazor] ASP.NET Core Blazor 소개

Blazor는 .NET을 사용하여 Client-side 웹 UI를 개발할 수 있는 프레임워크로 다음과 같은 특징을 가집니다.

• Javascript 대신 C#을 사용하여 동적인 UI를 개발할 수 있음
• Client-side와 Server-side 로직을 .NET으로 공유할 수 있음
• 모바일을 포함한 다양한 브라우저를 지원하기 위해 HTML과 CSS를 통해 화면을 렌더링

Client-Side 웹 개발을 JavaScript가 아니라 .NET으로 개발하는 것은 다음의 이점을 제공합니다.

• JavaScript가 아닌 생산성 높은 C#으로 개발할 수 있음
• .NET 라이브러리를 사용할 수 있음
• 서버와 클라이언트의 로직을 공유할 수 있음
• .NET의 수준높은 보안, 안정성, 성능을 제공
• Windows, Linux, macOS에서 VisualStudio를 사용하여 개발 가능

Components

Blazor는 Component 단위로 개발합니다. Blazor의 Component는 페이지, 다일로그, 데이터폼과 같은 UI를 구성하는 요소가 됩니다. Component는 .NET Class로 작성되며 .NET 어셈블리로 빌드됩니다. Blazor에서 Component는 다음과 같은 역할을 합니다.

• 유연한 UI 렌더링 로직 정의
• 사용자 이벤트 처리
• 다른 Component에 포함될 수 있으며 재사용될 수 있음
• Razor Class Library 혹은 NuGet Package를 통해 공유나 배포가능

Blazor의 Component Class는 .razor 파일 확장자를 가진 Razor 마크업 페이지에서 작성됩니다. Razor란 개발 생산성을 향상시키기 위해 HTML 마크업과 C#코드를 하나의 파일에 혼합하여 개발할 수 있는 기술로서 VisualStudio 상에서 Intellisense 지원을 제공합니다. ASP.NET Core RazorPage와 ASP.NET MVC 역시 Razor 기술을 사용합니다. 하지만 Request/Response 모델만을 위해 Razor를 사용하는 ASP.NET Core RazorPage, ASP.NET MVC와 다르게 Blazor Component는 Client-Side의 UI로직을 구성하기 위해 Razor를 사용합니다.

아래 Razor 코드는 Blazor Component 코드 예시(Dialog.razor)이며, 다른 Component에 포함될 수 있습니다.

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

위 코드의 본문에 위치한 ChildContent와 Title은 Component에 의해 제공되는 Property 입니다. OnYes는 C#메서드로서 <button>의 onClick 이벤트에 의해 호출됩니다.

Blazor는 UI를 구성할 때 순수 HTML 태그를 사용합니다. 따라서 HTML 태그 형태로 Component를 호출하며, Component를 호출하는 HTML 태그에 작성된 Attribute 값은 Component의 Property에 전달됩니다. 예를들어 아래 예제는 위에서 작성한 Dialog 컴포넌트를 사용하는 Index 컴포넌트 코드입니다. <Dialog /> 태그를 사용하여 Dialog Component를 호출하고 있으며 Title과 ChildContent의 값을 정의하고 있습니다.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

브라우저에서 Index.razor 페이지를 로드하면 Dialog Component가 아래와 같이 출력됩니다.

Component를 앱에서 사용 할 때 VisualStudio와 VisualStudio Code의 Intellisense가 코드 자동완성을 지원할 것입니다.

Component는 브라우저에서 Render Tree 형태로 생성됩니다. Render Tree는 메모리에 생성된 Document Object Model(DOM)이며, 브라우저에 출력되는 UI를 효율적이고 유연하게 업데이트 하는데 사용됩니다.

Blazor WebAssembly

중요 : Blazor WebAssembly는 현재 Preview 단계입니다.
Blazor Server는 ASP.NET Core 3.0에서 지원되고 있습니다. Blazor WebAssembly는 ASP.NET Core 3.1에서 Preview 단계로 제공되고 있습니다.

Blazor WebAssembly는 Single-Page 앱 프레임워크로서, .NET으로 Client-Side 웹 앱을 개발할 수 있도록 지원합니다. Blazor WebAssembly는 모바일을 포함한 모든 최신 브라우저를 지원하며 JavaScript로의 코드변환이나 ActiveX 등의 플러그인 없이 실행됩니다.

Blazor는 브라우저에서 .NET 코드를 실행하기 위해 WebAssembly(WASM) 기술을 사용합니다. WebAssembly는 브라우저에서 빠른 속도로 실행되는 바이트코드 포멧입니다. WebAssembly는 웹 표준으로 브라우저에서 플러그인 없이 실행됩니다.

WebAssembly 코드는 JavaScript를 통해 브라우저의 모든 기능에 접근할 수 있습니다. 이를 JavaScript Interoperability(또는 JavaScript interop)라고 부릅니다. WebAssembly에 의해 실행되는 .NET 코드는 브라우저의 JavaScript 샌드박스 안에서 실행되며 Client에서 악의적인 코드가 실행되는 것을 막아줍니다.

Blazor WebAssembly 앱은 아래와 같은 순서로 컴파일 되고 실행됩니다.

1. C#코드 파일과 Razor파일은 .NET 어셈블리로 컴파일 됩니다.
2. .NET 런타임과 컴파일된 어셈블리가 브라우저에 다운로드 됩니다.
3. WebAssembly는 .NET 런타임을 시동하고 앱을 로드하기 위한 환경을 구성합니다. WebAssembly 런타임은 JavaScript interop를 사용하여 DOM을 조작하고 브라우저 API를 호출합니다.

앱의 크기(Payload size)는 사용자 경험에 큰 영향을 미칩니다. 커다란 앱은 브라우저에 다운로드 되는데 오랜 시간이 걸리므로 사용자 경험을 감소시킵니다. Blazor는 다운로드 시간을 줄이기 위해 다음과 같은 Payload Size 최적화 기술을 사용합니다.

• 사용되지 않은 코드는 Intermediate Language(IL) Linker에 의해 제거됩니다.
• HTTP 압축을 사용합니다.
• .NET 런타임과 어셈블리들은 브라우저에 캐시됩니다.

Blazor Server

Blazor는 Component와 UI를 생성하는 렌더링 로직을 분리하였습니다. Blazor Server는 ASP.NET Core 앱 서버에서 Razor Component가 호스팅 될 수 있도록 지원합니다. UI 업데이트는 SignalR 연결을 통해 제어됩니다.

Blazor 런타임은 브라우저에서 서버로 UI 이벤트를 보내고, 서버에서 응답한 UI를 브라우저에 반영합니다.

Blazor Server가 브라우저와 통신하기 위해 사용하는 SignalR 연결은 JavaScript Interop 호출을 처리하는데도 사용됩니다.

JavaScript Interop

JavaScript 라이브러리를 사용하거나 브라우저 API에 접근해야 하는 Blazor 앱을 지원하기 위해 Component는 JavaScript와 상호작용할 수 있습니다. Component는 어떠한 종류의 JavaScript 코드나 API도 지원할 수 있습니다. C#코드가 JavaScript를 실행할 수 있으며, JavaScript가 C# 메서드를 호출할 수 있습니다. 자세한 정보는 아래 링크를 참조해주세요.

• .NET 메서드에서 JavaScript 호출
• JavaScript에서 .NET 메서드 호출

.NET Standard와 코드 공유

Blazor는 .NET Standard 2.0을 준수합니다. .NET Standard는 .NET API의 구현 스펙으로서 .NET 구현체들이 준수해야하는 표준입니다. .NET Standard 클래스 라이브러리는 Blazor, .NET Framework, .NET Core. Xamarin, Mono, Unity 등의 다른 .NET 플렛폼 간에 공유될 수 있습니다.

웹브라우저 내에서 사용할 수 없는 API(예를들어 파일접근, 소켓열기, 쓰레드)를 호출하면 PlatformNotSupportedException이 발생합니다.

추가 참고자료

• Blazor 소개 영어원문
• WebAssembly
• ASP.NET Core Blazor 호스팅 모듈
• ASP.NET Core SignalR을 Blazor WebAssembly와 함께 사용하기
• C# 가이드
• ASP.NET Core Razor 구문
• HTML
• Awesome Blazor 커뮤니티