Blazor Introduction

Blazor

Blazor는 Blazor을 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크이다.

 

Components 는 .NET 어셈블리에 기본 제공되는 .NET C# 클래스이며 다음을 수행한다.

• 유연한 UI 렌더링 논리를 정의
• 사용자 이벤트를 처리
• 중첩 및 재사용
• 클래스 라이브러리 또는 NuGet 패키지로 공유 및 배포

 

Components 

일반적으로 .razor 파일 확장자를 가진 Razor 태그 페이지 형식으로 작성

Blazor의 Components 는 공식적으로 Blazor, 비공식적으로 Razor라고 한다. 

Razor는 개발자 생산성을 위해 설계된 HTML 태그와 C# 코드를 결합하는 구문

**Razor Pages 및 MVC도 Razor를 사용한다.**

 

 

호스팅 모델

 

Blazor Server

서버의 ASP.NET Core 앱 내에서 앱이 실행됨

UI 업데이트, 이벤트 처리 및 JavaScript 호출은 SignalR 연결을 통해 처리

연결된 각 클라이언트와 연결된 서버의 상태를 회로(circuit)라고 한다.

회로는 연결이 끊어질 때 서버에 다시 연결하기 위해 일시적인 네트워크 중단과

클라이언트의 재연결 시도를 허용할 수 있다.

 

Blazor Server Hosting Model

 

장점

• 다운로드 크기가 Blazor WebAssembly 앱보다 작고 앱이 훨씬 빠르게 로드
• 앱은 .NET Core API 사용을 포함하여 서버 기능을 최대한 활용
• 서버의 .NET Core가 앱을 실행하는 데 사용되므로 디버깅과 같은 기존 .NET 도구가 정상적으로 작동
• 씬 클라이언트가 지원됨. 예를 들어 Blazor Server 앱은 WebAssembly를 지원하지 않는 브라우저와 리소스가 제한된 디바이스에서 작동한다.
• 앱 구성 요소 코드를 비롯한 앱의 .NET/C# 코드베이스가 클라이언트에 제공되지 않는다.

 

단점

• 일반적으로 대기 시간이 더 길다. 모든 사용자 조작에 네트워크 홉이 포함된다.
• 오프라인 지원이 없다. 클라이언트 연결에 실패하면 앱 작동이 중단된다.
• 많은 사용자가 있는 앱을 스케일링하려면 서버가 여러 클라이언트 연결 및 상태를 처리해야 한다.
• 앱을 제공하려면 ASP.NET Core 서버가 필요하다.
• CDN(Content Delivery Network)에서 앱을 제공하는 서버리스 배포 시나리오가 가능하지 않다.

 

Blazor WebAssembly (WASM)

WebAssembly 기반 .NET 런타임 브라우저에서 클라이언트 측을 실행

Blazor 앱, 해당 앱의 종속성 및 .NET 런타임이 브라우저에 다운로드됨

UI 업데이트 및 이벤트 처리는 동일한 프로세스 내에서 발생

Asset 은 클라이언트에 정적 콘텐츠를 제공할 수 있는 웹 서버 또는 서비스에 정적 파일로 배포

독립 실행형 Blazor WebAssembly 앱

WebAssembly 파일을 제공하기 위한 백엔드 ASP.NET Core 앱 없이 배포용으로 생성

 

호스팅 된 Blazor WebAssembly 앱

WebAssembly 파일을 제공하기 위해 백엔드 ASP.NET Core 앱 과 함께 배포용으로 앱을 만드는 경우

 

blazor.webassembly.js 스크립트는 프레임워크에서 제공하고 다음을 처리

• .NET 런타임, 앱 및 앱의 종속성을 다운로드
• 앱을 실행하기 위한 런타임 초기화

 

장점

• 앱이 서버에서 다운로드된 후에는 .NET 서버 쪽 종속성이 없으므로 서버가 오프라인 상태가 되어도 앱은 계속 작동합니다.
• 클라이언트 리소스와 기능이 완전히 활용됩니다.
• 작업이 서버에서 클라이언트로 오프로드됩니다.
• 앱을 호스팅하는 데 ASP.NET Core 웹 서버가 필요하지 않습니다. CDN(콘텐츠 전송 네트워크)에서 앱을 제공하는 것과 같은 서버리스 배포 시나리오가 가능합니다.

 

 

단점

• 앱은 브라우저의 기능으로 제한됩니다.
• 가능한 클라이언트 하드웨어 및 소프트웨어(예: WebAssembly 지원)가 필요합니다.
• 다운로드 크기가 더 크고 앱을 로드하는 데 시간이 더 오래 걸립니다.

 

** .NET 코드를 WebAssembly로 직접 컴파일할 수 있는 AOT(Ahead-of-Time) 컴파일을 지원 **

 

Blazor Hybrid

하이브리드 앱은 웹 기술을 활용하는 기본 앱

Blazor Hybrid 앱에서 Razor 구성 요소는 다른 .NET 코드와 함께 기본 앱(WebAssembly가 아님)에서 직접 실행되고 HTML 및 CSS를 기반으로 하는 웹 UI를 로컬 interop 채널을 통해 포함된 WebView 컨트롤에 렌더링 .NET MAUI, WPF 및 Windows Forms를 비롯한 다양한 .NET 기본 앱 프레임워크를 사용하여 빌드할 수 있다.

Blazor Hybrid Hosting Model

 

 

장점

• 모바일, 데스크톱 및 웹에서 공유할 수 있는 기존 구성 요소를 재사용
• 웹 개발 기술, 경험 및 리소스를 활용
• 앱은 디바이스의 네이티브 기능에 대한 전체 액세스 권한을 갖는다.

 

 

 

단점

• 각 대상 플랫폼에 대해 별도의 기본 클라이언트 앱을 빌드, 배포 및 유지 관리해야 한다.
• 일반적으로 네이티브 클라이언트 앱은 브라우저에서 웹앱에 액세스하는 것보다 찾기, 다운로드 및 설치가 더 오래 걸린다.

 

 

https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0

 

관련영상

https://youtu.be/TT0o-dTvdRY