Blazor

4분

웹앱을 빌드하는 방법에는 여러 가지가 있습니다. 대화형이고 빠른 웹앱을 빌드하려면 일반적으로 많은 JavaScript를 사용합니다.

또 다른 방법은 C# 및 .NET을 사용하여 모든 웹 개발 문제를 처리할 수 있는 Microsoft의 Blazor 프레임워크를 사용하는 것입니다.

Blazor란?

Blazor는 HTML, CSS 및 C#을 사용하여 웹 페이지를 빌드하기 위한 프레임워크입니다. 표준 HTML 및 CSS를 사용하여 웹 사이트의 레이아웃과 디자인을 정의할 수 있습니다. 웹 페이지의 대화형 구성 요소는 WebAssembly라는 웹 표준 기술을 사용하여 서버 또는 브라우저에서 실행되는 C# 코드로 관리할 수 있습니다. Blazor를 사용하면 HTML과 C#의 편리한 혼합물인 Razor 구문을 사용하여 웹 페이지 및 구성 요소를 정의할 수 있습니다. 다른 페이지 및 구성 요소 내에서 Blazor 구성 요소를 쉽게 다시 사용할 수 있습니다. 이 기능은 앱의 일부를 쉽게 빌드하고 재사용할 수 있습니다.

WebAssembly란?

WebAssembly는 모든 최신 브라우저에서 사용할 수 있는 표준 기술로, 브라우저에서 JavaScript와 유사한 코드를 실행할 수 있습니다. 도구를 사용하여 브라우저에서 WebAssembly 앱으로 사용할 C# 코드를 준비할 수 있으며 이러한 도구는 .NET SDK에 포함됩니다.

핫 다시 로드 사용하여 즉시 앱 업데이트

앱을 개발할 때 변경 내용이 앱에 미치는 영향을 확인할 수 있도록 개발자 흐름이 빠른지 확인하려고 합니다. 변경하고, 저장하고, 모든 리소스를 다시 빌드하고, 브라우저에서 앱을 다시 배포하는 데 시간이 오래 걸릴 수 있습니다.

핫 다시 로드 사용하여 이 워크플로를 개선할 수 있습니다. 핫 다시 로드 다시 시작하지 않고도 실행 중인 앱에 변경 사항을 적용할 수 있습니다.

Blazor 구성 요소

Blazor를 사용하여 앱을 만들 때 앱은 각각 고유한 책임 영역을 가진 여러 구성 요소로 구성됩니다. 구성 요소를 만들려면 .razor 확장이 있는 Razor 파일을 사용합니다. 그렇다면 Razor란?

Razor는 HTML 구문을 C# 코드와 혼합하는 프로그래밍 구문입니다. 예를 들면 다음과 같습니다.

<div>@product.Name</div>

@code {
  Product product = new Product{ Name = "Blazor" }
}

이 예제 @product.Name 에서는 "Blazor" 문자열로 확인되고 태그 내부에 div 렌더링됩니다. 렌더링된 출력은 다음과 같습니다.

<div>Blazor</div>

Razor 예제의 맨 위 부분은 실행 시 구성 요소가 렌더링할 HTML 태그로 구성됩니다. 문자를 사용하여 C# 식의 값을 렌더링할 @ 수 있습니다. Razor는 태그를 식별한 다음 @ HTML 렌더링을 다시 시작할 때까지 C# 코드를 계속 해석합니다. C# 식이 파렌을 사용하여 시작되고 끝나는 시기에 대해 명시적일 수 있습니다. @(...)

내 @code {} 의 모든 항목에는 생성된 구성 요소 클래스의 멤버를 정의하기 위한 C# 코드가 포함되어 있습니다. Razor 파일을 HTML 렌더링 논리를 정의하는 C# 클래스를 정의하는 편리한 방법으로 생각할 수 있습니다. 블록을 사용하여 @code 필드, 속성 및 메서드와 같은 구성 요소 형식에 대한 C# 멤버를 정의합니다.

Blazor 구성 요소 스타일 지정

Blazor 구성 요소는 HTML을 렌더링하므로 일반 CSS 스타일시트를 사용하여 Blazor 구성 요소의 스타일을 지정할 수 있습니다. 또는 Blazor 구성 요소에는 해당 구성 요소의 내용에만 적용되는 스타일 규칙을 만들 수 있는 CSS 격리라는 기능이 있습니다. 구성 요소와 이름이 같은 파일을 만들고 .css 파일 이름 확장명을 추가하면 Blazor는 이 이름을 해당 구성 요소의 HTML 콘텐츠에만 적용해야 하는 스타일로 인식합니다.

Blazor 구성 요소는 특수 HeadContent 태그를 사용하여 페이지의 HTML 헤드에 추가할 콘텐츠를 정의할 수도 있습니다.

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

이 style 태그 및 콘텐츠는 페이지의 태그 내에 head 렌더링됩니다.

라우팅 가능한 구성 요소

Home.razor 파일은 웹 브라우저에서 탐색할 수 있는 구성 요소입니다. HTML, C# 및 다른 Blazor 구성 요소에 대한 참조를 포함합니다. 첫 번째 줄에 @page "/" 지시문이 있으므로 이 파일을 페이지로 식별할 수 있습니다. 이 지시문은 구성 요소에 "/" 경로를 할당하고 "/" 주소의 기본 페이지가 요청되면 Blazor가 이 파일의 내용으로 응답하도록 지시합니다.

계속