최근 수정 시각 : 2024-09-29 16:40:29

Blazor


웹 프레임워크 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드<colbgcolor=#fcfcfd,#272935> CSS BootstrapTailwind CSSBulmaFoundationSkeletonPico
JSX ReactSolidJSAstroPreactGatsbyRemixInfernoQwik
JS AngularSvelteBackbone.jsjQueryAstrohtmxEmber.jsLit11tyMarkoVanJSAlpine.js
Vue Vue.jsVuePressGridsomeQuasarAstro
Python Reflex
백엔드 Java SpringStrutsGWTGrailsJoobyPlay! FrameworkScala
Kotlin Ktor
JS ExpressNestJSkoaHonofastify
.NET ASP.NET$
PHP LaravelCodeigniterReasonablephalconSymfonyzendCakePHPFuelPHPYiiSlimPHPixe
Python DjangoFlaskFastAPI
Ruby Ruby on RailsSinatra
Go GinechoFiber
풀스택 JSX Next.jsAstroSolidStartRemixQwik City
JS SvelteKitFreshAstroMarko
Vue Nuxt.jsAstro
Java Vaadin$
Python StreamlitReflex
Rust RocketActixLeptosAxum
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||


파일:Microsoft 로고.svg파일:Microsoft 로고 화이트.svg
{{{#!wiki style="margin:0 -10px -5px; min-height:calc(1.5em + 5px); word-break:keep-all"
{{{#!folding [ 펼치기 · 접기 ]
{{{#!wiki style="margin:-6px -1px -11px"
<colbgcolor=#393939,#737373><colcolor=#fff>제품군
하드​웨어Surface · Xbox · HoloLens · PixelSense · Zune · Pluton · IVAS
소프트​웨어Windows · Office · Edge · Media Player · Hyper-V · Defender · Visual Studio Code · Visual Studio · Windows Terminal · Microsoft Store · Xbox App · PowerToys · Internet Explorer · MS-DOS · Windows Movie Maker · Autoruns · Clipchamp
서비스Microsoft Azure · OneDrive · Microsoft Copilot · Bing · LinkedIn · Microsoft Docs · Skype · MSN · 정품인증 · Xbox Game Pass · Xbox Cloud Gaming · Xbox network
관련 기술ASF · ASP · Blazor · COM · DCOM · DirectX · 파일 시스템(FAT · NTFS · ReFS) · MFC · .NET(.NET Core · .NET Standard · C# · F# · Visual Basic .NET · Windows Forms · WPF · UWP · .NET MAUI · ASP.NET · ML.NET) · OLE · Q# · Silverlight · Visual Basic · VBA · WASAPI · Windows 커널 · Windows 디자인 · Windows API · Windows Runtime(UWP · WinUI 3) · WMA · WMV · Xamarin · XNA · 하복 엔진 · SAMI · PowerShell · Windows Modern Standby
산하 계열사 및 사업부GitHub · .NET Foundation · Microsoft Gaming · LinkedIn
관련 인물빌 게이츠(은퇴) · 폴 앨런(은퇴) · 스티브 발머(퇴사) · 게이브 뉴웰(퇴사) · 마이크 이바라(퇴사)
사티아 나델라 · 필 스펜서 · 브래드 스미스
기타제니맥스 미디어 인수 · 액티비전 블리자드 인수 · 시작 메뉴 · 빌 게이츠의 굴욕
관련 틀365 제품군 · 하드웨어 제품군 · Surface 제품군 · Windows 제품군}}}}}}}}}
Microsoft .NET
파일:BrandBlazor_nohalo_1000x.png
<colbgcolor=#fff,#1f2023><colcolor=#5D2D92> 개발 언어 C#
최초 릴리즈 2018년
종류 프레임워크
라이선스 아파치 라이선스 2.0
개발 Microsoft, .NET Foundation
소스 코드 주소
파일:홈페이지 아이콘.svg
1. 개요2. 예시3. 에디션
3.1. Blazor Server3.2. Blazor WebAssembly3.3. Blazor PWA3.4. Blazor Hybrid
4. 지원하는 플랫폼

[clearfix]

1. 개요

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

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

2. 예시

#!syntax csharp
// 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("최대 클릭횟수에 도달하였습니다!");
        }
    }
}

#!syntax csharp
// 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. 지원하는 플랫폼


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