Blazor Server vs. Blazor WebAssembly: Just the Facts

여기에 문제가 있습니다 : 서버에 연결하지 않고 애드온이나 플러그인없이 JavaScript와 다른 것을 사용하여 브라우저에서 .NET을 실행하는 방법은 무엇입니까?

솔루션: Blazor WebAssembly

또 다른 문제가 있습니다 : Google에서 좋은 순위를 차지하는 클라이언트 대면 앱을 구축하는 방법은 무엇입니까?

The solution: Blazor Server

Blazor Server와 Blazor WebAssembly가 어떻게 작동하는지, 어떻게 다른지, 언제 사용되는지, 그리고 가장 흥미롭고 비교적 새로운 프레임워크 중 하나인 Blazor 정확히 어떻게 형성하는지에 대한 모든 것을 이해하기 위해 이 기사에 다음 섹션을 정리했습니다.

Try Ignite UI for Blazor

Blazor WebAssembly란 무엇인가요?

WASM이라고도 하는 Blazor WebAssembly는 웹 브라우저에서 실행되는 소프트웨어를 만들기 위해 W3C (World Wide Web Consortium)에서 개발한 표준입니다. JavaScript와 달리 Blazor WebAssembly는 CPU에서 거의 기본 속도로 실행되는 컴파일된 소프트웨어입니다.

Blazor WebAssembly 프로그램은 C와 같은 다른 언어로 작성된 다음 WebAssembly 바이트 코드로 컴파일 할 수 있습니다. WebAssembly는 JavaScript를 대체하기 위한 것이 아니라 가능한 한 빨리 실행해야 하는 프로그램(또는 프로그램의 일부)에 대해 JavaScript와 함께 실행하기 위한 것입니다.

Microsoft에서 지원하는 Blazor는 JavaScript 대신 .NET 및 C#을 사용하여 단일 페이지 앱을 빌드하기 위한 오픈 소스 및 플랫폼 간 웹 UI 프레임워크입니다. Blazor는 웹 애플리케이션을 호스팅하는 두 가지 지원되는 방법인 Blazor Server와 Blazor WebAssembly를 제공합니다.

Blazor Blazor Server vs Blazor WebAssembly

앞서 언급했듯이 Blazor WebAssembly를 사용하여 브라우저에서 직접 클라이언트 측 C# 코드를 실행할 수 있습니다. WebAssembly에서 실행되는 실제 .NET이기 때문에 애플리케이션의 서버 측 부분에서 코드와 라이브러리를 재사용 할 수 있습니다.

또는 서버에서 클라이언트 로직을 실행할 Blazor 있습니다. 클라이언트 UI 이벤트는 실시간 메시징 프레임워크인 SignalR을 사용하여 서버로 다시 전송됩니다. 실행이 완료되면 필요한 UI 변경 사항이 클라이언트로 전송되어 DOM에 병합됩니다.

Blazor 서버

Blazor Server는 표준 ASP.NET Core 응용 프로그램을 사용합니다. 해당 응용 프로그램 내에서 Entity Framework(원래 .NET Framework의 필수 부분으로 제공된 오픈 소스 개체 관계형 매핑 프레임워크)를 통해 SQL Server 데이터베이스를 통합하는 것과 같은 서버 쪽 기능을 통합할 수 있습니다.

Blazor Server 애플리케이션은 SignalR을 사용하여 지속적인 연결을 통해 브라우저와 통신합니다. Razor 구성 요소 또는 Razor 페이지를 사용하여 클라이언트측 페이지를 만들 수 있습니다.

Blazor Server 앱은 빠르게 로드되고 구현이 간단합니다. Blazor Server에 대한 지원은 .NET Core 3.1 LTS에서 사용할 수 있습니다.

Blazor 웹어셈블리

Blazor WebAssembly를 사용하면 브라우저가 Blazor 애플리케이션을 다운로드할 수 있습니다.

이는 Blazor 응용 프로그램이 웹 브라우저에서 실행됨을 의미합니다. 응용 프로그램이 작동하기 위해 서버와의 지속적인 연결이 필요하지 않습니다.

그러나 전적으로 클라이언트 쪽 응용 프로그램이기 때문에 서버 쪽 기능을 Blazor 응용 프로그램에 직접 통합할 수 없습니다.

이렇게 하려면 ASP.NET Core Web API와 같은 서버 쪽 응용 프로그램에 연결해야 합니다.

Blazor Server와 마찬가지로 Razor 구성 요소 또는 Razor 페이지를 사용하여 클라이언트 측 페이지를 만들 수 있습니다.

자바스크립트와 마찬가지로 Blazor WebAssembly 앱은 브라우저의 보안 샌드박스 내에서 사용자 기기의 안전하게 실행됩니다. 이러한 앱은 .NET 서버 구성 요소가 전혀 없는 완전히 독립적인 정적 사이트로 배포하거나 ASP.NET Core와 연결하여 .NET을 사용한 전체 스택 웹 개발을 가능하게 하여 코드를 클라이언트 및 서버와 쉽게 공유할 수 있습니다.

Blazor 기능의 전체 라인

• Blazor WebAssembly에는 다음 웹 앱 프로젝트에서 생산성을 유지할 수 있는 기능이 포함되어 있습니다.
• C#의 생산성과 강력한 런타임 타이핑 활용
• 안정적이고 성숙한 .NET 에코시스템 기반 구축
• 클라이언트 및 서버에서 코드 및 기존 .NET 표준 라이브러리를 쉽게 재사용
• ​Razor 구성 요소 파일에 구현된 Blazor Server 앱과의 공유 구성 요소 모델
• 앱을 독립형 정적 사이트로 배포하거나 ASP.NET Core 사용하여 호스트합니다.
• 오프라인 기능 및 기본 OS 통합으로 PWA(Progressive Web Apps) 구축​
• ​인증에 대한 기본 제공 지원
• 통합 글로벌라이제이션 및 현지화 지원
• Environment-based configuration
• IL trimming and build-time precompression
• Full stack debugging
• Visual Studio, Mac용 Visual Studio 및 Visual Studio Code를 사용한 유용한 도구

SignalR이란 무엇입니까?

SignalR은 ASP.NET 개발자가 애플리케이션에 실시간 웹 기능을 추가하는 프로세스를 간소화할 수 있는 라이브러리입니다. 실시간 웹 기능은 클라이언트가 새 데이터를 요청할 때까지 서버가 기다리지 않고 사용 가능한 즉시 서버 코드가 연결된 클라이언트로 콘텐츠를 푸시하도록 하는 기능입니다. 채팅 애플리케이션은 종종 SignalR 예제로 사용됩니다.

Blazor Server vs Blazor WebAssembly – When to Use?

사용해야 하는 호스팅 모델은 응용 프로그램에서 제공하려는 목표와 기능에 따라 달라집니다. 인터넷 연결이 약한 곳에서 응용 프로그램을 사용할 계획이라면 서버 연결 없이도 잘 작동하는 Blazor WebAssembly를 선택할 수 있습니다. 오프라인 작업을 선호하는 경우에도 더 나은 선택입니다.

반면에 Google에서 높은 순위를 차지하는 클라이언트 대면 애플리케이션을 구축하려는 경우 Blazor Server가 더 나은 선택입니다.

Blazor WebAssembly vs Angular

AngularJS의 후속 제품인 Angular는 프론트엔드 개발자가 프론트엔드와 백엔드와 동시에 상호 작용할 수 있도록 Google에서 만들었습니다. Angular는 JavaScript 기반이기 때문에 작업할 리소스가 많습니다.

Angular Blazor와 달리 오랫동안 사용되어 왔습니다. MVC/MVVM 애플리케이션을 완벽하게 지원하는 프로덕션 준비 프레임워크이며 많은 대기업에서 사용하고 있습니다. 반면에 Blazor는 지속적으로 변화하고 있으며 매우 유망함에도 불구하고 아직 Angular 경쟁할 만큼 충분히 성숙하지 못했습니다. Angular 도구는 VS Code와 같은 IDE에서 전체 디버깅 지원을 통해 더욱 완성도가 높습니다.

비교에 대한 자세한 내용은 2022년 Blazor과 Angular 비교 블로그를 확인하세요.

WebAssembly에 내장된 미국 대통령 선거 대시보드 Blazor

Blazor 애플리케이션에서 지원할 수 있는 시각화 및 분석의 종류를 설명하기 위해 Infragistics 팀은 현재 데이터와 과거 데이터를 비교하고 데이터 추세를 식별하는 샘플 애플리케이션인 미국 대통령 선거 대시보드를 만들었습니다.

이 대시보드는 2020년 선거까지의 선거 데이터에 대한 대화형 시각화를 제공합니다. Ignite UI for Blazor를 사용하는 내장 Blazor (WASM) 이 샘플 애플리케이션에는 Blazor 데이터 그리드, Blazor 트리 맵, Blazor 맵 및 Blazor 데이터 차트 구성 요소가 포함되어 있습니다.

Blazor WebAssembly Components

Infragistics의 Ignite UI for Blazor 에는 Blazor Server, Blazor WebAssembly 및 .NET 6에 대한 전체 지원을 포함하여 전문적으로 설계된 Blazor 구성 요소가 포함되어 있습니다. C# 기술을 사용하여 풍부한 웹 애플리케이션을 만들고 복잡하고 배우기 어려운 JavaScript를 제거할 수 있습니다. Ignite UI for Blazor 컨트롤에는 가장 빠른 데이터 그리드, 60+ 고성능 차트 (주식 차트, 금융 차트, 지리 공간 지도, 다중 열 콤보 상자 등)가 포함됩니다.

모든 기능을 갖춘 경량 Blazor Data Grid 및 Blazor Table을 구축하여 대량의 데이터를 표시하는 문제를 해결하는 동시에 고객이 기대하는 모든 대화형 기능을 제공합니다. Data Grid 및 모든 Ignite UI Blazor 구성 요소는 Blazor WebAssembly에 대한 전체 지원을 포함하여 최신 C# Blazor 앱용으로 설계되었으므로 최상의 사용자 환경을 위해 모든 최신 브라우저에 배포할 수 있습니다.

그리고 Blazor 개발자를 위한 또 다른 흥미로운 것이 있습니다. Blazor 위해 App Builder 출시했습니다! 이것이 앱 개발 프로세스에 의미하는 바는 무엇입니까?

• App Builder는 클라우드 기반 IDE를 통해 UI 디자인의 복잡성을 제거하는 완전한 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구로, 앱과 테마를 만들고 데이터 바인딩을 순식간에 추가할 수 있습니다!
• Blazor 앱을 10배 더 빠르게 만들 수 있습니다!
• App Builder 로우코드 개발 도구 역할을 하므로 디자인하는 모든 것이 Blazor 위한 프로덕션 준비 코드가 됩니다.
• 코드 미리보기를 사용하면 앱을 빌드하는 동안 깨끗하고 테스트 가능한 소스 코드가 실시간으로 생성되는 것을 볼 수 있습니다!

여기에서 매우 빠른 Blazor Data Grid에 대해 자세히 알아보고 Blazor Grid 예제를 확인하십시오.

If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com!

궁금하다면 Blazor 대 Angular 및 Blazor 대 React에 대한 비교 기사를 읽을 수 있습니다.

Happy Coding!