문서:Blazor

역사 raw
대문 랜덤 문서 최근 토론


블레이저
Blazor
개발 언어
최초 릴리즈
2018년
종류
라이선스
개발
소스 코드
1. 개요2. 예시3. 에디션
3.1. Blazor Server3.2. Blazor WebAssembly3.3. Blazor PWA3.4. Blazor Hybrid
4. 지원하는 플랫폼


1. 개요

마이크로소프트에서 개발한 오픈소스 웹 개발 프레임워크. 유사한 다른 웹 개발 프레임워크 (React, Angular, Vue 등)와의 차이점 중 제일 큰 부분은 자바스크립트가 아닌 .NET Core 기반의 C#으로 작성할 수 있다는 것이다.(단점으로는 XAML를 사용하지 않고 HTML과 CSS가 따로 필요하다는 점이다.)이를 위해 최신 웹 표준 중 하나인 WebAssembly를 채택했으며, 따라서 C#으로 작성된 클라이언트 쪽의 로직 코드들은 전부 .NET Standard Assembly 파일로 컴파일된 후 WebAssembly 런타임 위에서 실행된다.[1]

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

3.3. Blazor PWA

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

3.4. Blazor Hybrid

Blazor PWA 에디션과 마찬가지로 현재 기획단계에 있는 에디션. 플랫폼에 종속적이지만 기존 웹 기술[5]을 이용해 렌더링을 한다.

4. 지원하는 플랫폼

[1] 이는 Blazor WebAssembly 에디션만 해당된다.[2] Single-Page Application 의 약자로, 웹서버에서 모든 HTML 페이지를 생성하는 전통적인 방식이 아니라 클라이언트 쪽에서 JavaScript나 WebAssembly를 통해 HTML페이지를 생성하며 서버쪽에서는 최소한의 리소스만 반환하는 형태의 웹어플리케이션을 말한다. 이 개념을 채택한 프레임워크로는 대표적으로 React, Angular, Vue 등이 있다. [3] 보통 수메가에서 수십메가에 달하는 파일을 내려받게 되지만, 처음 한번만 받으면 된다. 이는 과거 플래시나 실버라이트 등의 RIA로 제작된 어플리케이션의 특징과 동일하다.[4] Progressive Web Application 의 약자로, 표준 웹 환경에서 동작하지만 다른 네이티브 앱(데스크탑 앱, 모바일 앱 등)과 유사한 경험을 제공한다는 것이 특징. 따라서 따로 설치 과정이 존재하지 않으며, 처음 접속한 이후에는 오프라인 상태에서도 서비스를 이용할 수 있다.[5] HTML, CSS