logo MSJO.kr

Blazor Application Tutorial

2020-04-19
MsJ

Blazor는 닷넷(.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 : 구성설정
동영상 강좌 소개
참고 자원
Reference

Prεv   Nεxt
Content
Search     RSS Feed     BY-NC-ND