| Microsoft .NET | |
| | |
| <colbgcolor=#fff,#1f2023><colcolor=#5D2D92> 개발 언어 | C# |
| 출시 | 2019년 9월 23일 |
| 종류 | 프레임워크 |
| 라이선스 | MIT 라이선스 |
| 개발 | Microsoft, .NET Foundation |
| 소스 코드 | 주소 |
| | |
1. 개요
2019년에 출시된 Microsoft의 오픈 소스 컴포넌트 기반 웹 프레임워크.2. 상세
2017년 6월에 노르웨이의 오슬로에서 개최된 NDC 2017에서 처음 발표된 후, 2018년 3월에 버전 0.1.0이 배포되었으며, 2019년 9월에 ASP.NET Core 3.0과 함께 정식 버전이 출시되었다. 현재 큰 인기를 끌고 있는 React, Angular, Vue, Flutter 등의 컴포넌트 기반 개발 방식을 마이크로소프트에서는 Blazor를 통해서 지원하고 있다.유사한 다른 컴포넌트 기반 웹 개발 프레임워크와의 가장 큰 차이점은 인터프리터 언어인 JavaScript 대신, Flutter에 사용되는 Dart 언어처럼 컴파일 언어인 C#을 사용한다는 것이다. 예를들어 Blazor WebAssembly 에디션의 경우 웹브라우저에서 C# 코드를 실행하기 위해 최신 웹 표준 중 하나인 WebAssembly를 채택했으며, C#으로 작성된 코드는 .NET Standard Assembly 파일로 컴파일된 후 WebAssembly 런타임 위에서 실행된다.
뷰를 작성할 때는 ASP.NET Razor 페이지 문법을 사용한다. ASP.NET MVC 개발에 사용하는 Razor 페이지 문법과 호환되고, 고전적인 ASP 스타일의 문법과는 다르지만, 훨씬 직관적이고 쉽게 배워서 쓸 수 있다.
비즈니스 로직과 관련된 부분들은 대부분 Blazor 안에서 소화할 수 있지만, 필요한 경우 언제든 다른 웹 프레임워크(Vue.js, Next.js 등)와도 연계하는 것이 가능하므로, 상황에 따라 적절히 혼용해서 사용하는 것을 추천한다.
3. 예시
#!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" />
4. 에디션
4.1. Blazor Server
ASP.NET Core 서버와 Razor 엔진을 이용한 에디션으로, 서버에서 대부분의 렌더링과 프로세싱이 이루어지는 것이 특징이다. 따라서 클라이언트의 부담이 적으며, 서버 쪽에서 이루어지는 업데이트들을 클라이언트 쪽에서 SignalR 기반의 웹소켓 방식으로 수신받는다. 따라서 브라우저가 웹소켓을 지원해야 사용 가능하다.4.2. Blazor WebAssembly
SPA를 구현하는 에디션으로, Blazor Server 에디션과 반대로 SPA 의 특징답게 클라이언트에서 대부분의 렌더링이 이루어진다. 따라서 서버의 부담은 감소하지만 클라이언트의 부담이 높아지는 동시에 클라이언트가 처음 내려받는 파일의 용량도 증가한다.[1] 하지만 서버를 거치지 않고 클라이언트에서 대부분의 로직이 실행되기 때문에 일반적인 윈도우 애플리케이션에 준하는 반응 속도와 풍부한 사용자 경험을 제공할 수 있다는 장점이 있다.4.3. Blazor PWA
PWA을 지원하도록 별도 에디션으로 거론된 적이 있지만, 2025년 4월 현재 Blazor의 기술 내부에 잘 통합되어있다. 자세한 내용은 Microsoft Learn 문서에서 살펴볼 수 있다.4.4. Blazor Hybrid
모바일 앱이나 데스크톱 애플리케이션을 개발할 수 있는 에디션으로 프리뷰단계에서 지원되고 있다. 모바일 환경에서는 Xamarin(혹은 .NET MAUI) 앱 위에서 Blazor 코드가 실행되고 데스크톱 환경에서는 WPF (또는 Windows Forms) 프로그램 위에서 Blazor 코드가 실행된다. Blazor 코드가 실행되고 생성된 HTML, CSS는 웹뷰 컨트롤을 사용하여 출력하는 방식이다.5. 지원하는 플랫폼
Blazor가 만들어내는 콘텐츠는 WebAssembly로 구동되는 웹 콘텐츠이므로 최신 웹 브라우저라면 어디서나 Blazor 기반 애플리케이션을 실행할 수 있다.
Blazor Server의 경우에는 다음의 OS에서 구동이 가능하다.
[1] 보통 수MB에서 수십MB에 달하는 파일을 내려받게 되지만 처음 한 번만 받으면 된다. 이는 과거 플래시나 실버라이트 등의 RIA로 제작된 애플리케이션의 특징과 동일하다.