MSJO.krBlazor는 닷넷(.NET)을 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크이다. 내부적으로 WebAssembly(wasm), SignalR 기술을 사용한다. 웹어셈블리(WebAssembly, 간단히 Wasm)는 실행 프로그램 및 그와 일치하는 텍스트 어셈블리어, 그리고 이러한 프로그램과 호스트 환경 간 통신을 용이케 하는 인터페이스를 위한 이식 가능한 이진 코드 포맷을 정의하는 개방형 표준이다. 웹어셈블리의 주목적은 웹 페이지에서 고성능의 애플리케이션을 가능케 하는 것이지만 포맷은 다른 환경에서도 실행 및 연동되도록 설계되어 있다(wiki).
Blazor는 JavaScript 대신 C#으로 코드를 작성하고 Blazor WebAssembly, Blazor Server의 2가지 형태의 템플릿을 제공하는 데 첫 번째는 웹브라우저 안에 WebAssembly를 포함하고 두 번째 템플릿은 서버에서 WebAssembly를 렌더링하고 SignalR 연결(JavaScript interop)을 통해 웹브라우저(DOM)와 통신한다. 최신 웹브라우저가 아닌 경우는 두 번째 템플릿으로 개발하는 게 호환성이 좋다.
Blazor 프로젝트 구조 - 1
Blazor 프로젝트 구조 - 2
- Program.cs : 설정된 앱의 진입점
- Startup.cs : 앱의 시작 논리 포함
- wwwroot/index.html : html 페이지로 구현된 앱 루트
- App.razor : 클라이언트 라우팅 설정
- Pages 폴더 : 앱을 구성하는 라우팅 구성요소 : _Host.cshtml(Razor페이지로 구현된 루트 페이지), Index.razor(구현)
- Shared 폴더 : UI 구성 요소 : MainLayout.razor(레이아웃), NavMenu.razor(사이드바)
- _import.razor : @using지시문, razor지시문 집합
- Data 폴더 : 모델 클래스 및 해당 구현
- wwwroot 폴더 : 정적 파일(자원)
- appsettings.json : 구성설정
동영상 강좌 소개
- Blazor (ASP.NET Core) Tutorials, Thumb IKR
- Blazor tutorial for beginners, kudvenkat
- Blazor Tutorial, AshProgHelp
- Blazor Server Components, IAmTimCorey
- Intro to Blazor Server Side - Database, IAmTimCorey
- 컴포넌트의 구조 설명 및 코드 비하인드 파일 생성, VisualAcademy
- Blazor, gavilanch3
참고 자원
- Awesome Blazor : A collection of awesome Blazor resources.
- Blazorise : frontend components library : Roadmap - Completely remove JavaScript
- Blazorise-github : 데모 및 소스