웹 프레임워크 및 기술

 

Blazor

목차

1. 개요

2. 예시

3. 에디션

3.1. Blazor Server

3.2. Blazor WebAssembly

3.3. Blazor PWA

3.4. Blazor Hybrid

4. 지원하는 플랫폼

 

1. 개요[편집]

Microsoft에서 제공하는 오픈 소스 컴포넌트 기반 웹 개발 프레임워크. 현재 큰 인기를 끌고 있는 React, Angular, Vue, Flutter 등의 컴포넌트 기반 개발 방식을 마이크로소프트에서는 Blazor를 통해서 지원하고 있다.

유사한 다른 컴포넌트 기반 웹 개발 프레임워크와의 가장 큰 차이점은 자바스크립트 대신 C#을 사용한다는 것이다. 예를들어 Blazor WebAssembly 에디션의 경우 웹브라우저에서 C# 코드를 실행하기 위해 최신 웹 표준 중 하나인 WebAssembly를 채택했으며, C#으로 작성된 코드는 .NET Standard Assembly 파일로 컴파일된 후 WebAssembly 런타임 위에서 실행된다.

2. 예시[편집]

// Pages/Counter.razor

@page "/counter"

<h2>카운터 예시</h2>

<p>클릭 횟수: @count</p>
<p>최대 클릭가능 횟수: @MaxCount</p>

<button class="btn btn-primary" @onclick ="IncrementCount">클릭</button>

@code {
    private int count = 0;

    [Parameter]
    public int MaxCount { get; set; } = 10;

    private void IncrementCount()
    {
        if (count < MaxCount)
        {
            count++;
        }
        else
        {
            Console.WriteLine("최대 클릭횟수에 도달하였습니다!");
        }
    }
}

// Pages/Index.razor

@page "/"

<h1>블레이저를 이용한 웹사이트</h1>
<p>Hello, World!</p>

<Counter MaxCount="50" />

3. 에디션[편집]

3.1. Blazor Server[편집]

ASP.NET Core 서버와 Razor 엔진을 이용한 에디션으로, 서버에서 대부분의 렌더링과 프로세싱이 이루어지는 것이 특징이다. 따라서 클라이언트의 부담이 적으며, 서버 쪽에서 이루어지는 업데이트들을 클라이언트 쪽에서 SignalR 기반의 웹소켓 방식으로 수신받는다. 따라서 브라우저가 웹소켓을 지원해야 사용 가능하다.

3.2. Blazor WebAssembly[편집]

SPA를 구현하는 에디션으로, Blazor Server 에디션과 반대로 SPA 의 특징답게 클라이언트에서 대부분의 렌더링이 이루어진다. 따라서 서버의 부담은 감소하지만 클라이언트의 부담이 높아지는 동시에 클라이언트가 처음 내려받는 파일의 용량도 증가한다.[1] 하지만 서버를 거치지 않고 클라이언트에서 대부분의 로직이 실행되기 때문에 일반적인 윈도우 애플리케이션에 준하는 반응 속도와 풍부한 사용자 경험을 제공할 수 있다는 장점이 있다.

3.3. Blazor PWA[편집]

현재 기획 단계에 있으며, PWA을 지원하는 에디션.

3.4. Blazor Hybrid[편집]

모바일 앱이나 데스크톱 애플리케이션을 개발할 수 있는 에디션으로 프리뷰단계에서 지원되고 있다. 모바일 환경에서는 Xamarin(혹은 .NET MAUI) 앱 위에서 Blazor 코드가 실행되고 데스크톱 환경에서는 WPF (또는 Windows Forms) 프로그램 위에서 Blazor 코드가 실행된다. Blazor 코드가 실행되고 생성된 HTML, CSS는 웹뷰 컨트롤을 사용하여 출력하는 방식이다.

4. 지원하는 플랫폼[편집]

• Microsoft Windows
• macOS
• Linux

 

[1] 보통 수MB에서 수십MB에 달하는 파일을 내려받게 되지만 처음 한 번만 받으면 된다. 이는 과거 플래시나 실버라이트 등의 RIA로 제작된 애플리케이션의 특징과 동일하다.