Blazor 코드 생성 – 단계별 가이드

최종 업데이트: 2022년 11월 16일

Blazor는 Angular 및 React와 같은 프레임워크로 작성된 앱과 같은 최신 단일 페이지 애플리케이션(SPA) 앱을 구축하기 위한 대규모 .NET 개발자 커뮤니티에 대한 Microsoft의 답변입니다. Blazor 이전에 Microsoft는 세계에서 가장 인기 있는 웹 프레임워크인 ASP.NET Web Forms를 출시했습니다. Microsoft에서 오래 전에 은퇴한 .NET 개발자를 위한 유일한 옵션은 Razor Pages와 ASP.NET MVC 애플리케이션이었습니다. 인기가 있기는 했지만, 현대 웹 개발자의 '나머지'가 단일 페이지 애플리케이션 프레임워크에서 사용하는 것과 실제로 경쟁하지는 않았습니다. Blazor를 통해 Microsoft/.NET 커뮤니티는 .NET Framework에 대한 액세스, C# 사용 기능 등 필요한 모든 것을 제공하는 프레임워크를 갖게 되었으며 최신 웹 앱을 작성하기 위해 JavaScript를 배울 필요가 없었습니다.

왜 Blazor?

Blazor는 개발자가 JavaScript 대신 순수한 C# 기술, HTML 코드 및 Razor 구문을 사용하여 대화형 웹 UI를 만들 수 있도록 하는 무료 오픈 소스 웹 프레임워크입니다. 이 프레임워크에 대한 관심은 2021년 5월 Microsoft가 React 및 Angular와 같은 플랫폼을 따르기 위한 SPA(Single Page Application) 패턴과 일치하는 Blazor 3.2 및 Blazor WebAssembly를 출시했을 때 크게 촉발되었습니다. C#으로 작성된 클라이언트 및 서버 코드를 통해 사용자는 Blazor 코드와 .NET 라이브러리를 쉽게 공유할 수 있습니다. 또한 Blazor 코드는 상용구를 줄이도록 최적화되어 있으며 시작하기가 매우 쉽습니다.

이 블로그에는 Blazor와 Angular, Blazor와 React, Blazor 서버와 웹 어셈블리의 차이점을 설명하는 3개의 자세한 기사가 있습니다. 궁금한 점이 있으면 자세한 내용을 확인할 수 있습니다.

Blazor 코드 생성이란 무엇입니까?

코드 생성, 특히 Blazor 코드 생성은 컴파일러가 애플리케이션의 작업 코드를 자동으로 생성하여 수동 코딩으로 인해 발생하는 시간, 노력 및 오류를 줄이는 프로세스입니다. 이러한 컴파일러는 소스 코드를 입력으로 사용하여 기계어 코드로 변환합니다. 우리의 경우 코드 생성기는 App Builder ™ 입니다.

메모: 아래의 App Builder 제품 개요 및 튜토리얼에서 Blazor (및 Angular)용 WYSIWYG 로우 코드 앱 개발 도구에 대한 모든 것을 배울 수 있습니다.

App Builder로 Blazor 코드를 생성하는 방법은 무엇입니까?

App Builder 처음 접하는 사람들을 위한 이 앱은 디자인부터 코드 생성까지 모든 프로세스를 처리하는 포괄적인 WYSIWYG 드래그 앤 드롭 앱 메이커입니다. 제품에 대한 몇 가지 주요 특징은 다음과 같습니다.

• 제품 관리자, 디자이너, 이해관계자 및 개발자를 위한 시각적 앱 빌더이자 통합 플랫폼입니다.
• 기업이 완전한 비즈니스 앱을 80% 더 빠르게 설계하고 구축할 수 있도록 지원하는 클라우드 기반 로우 코드 앱 개발 도구입니다.
• 프로덕션용 Blazor WASM 및 Blazor 서버 코드는 물론 Angular 및 Web Components 코드를 생성합니다. 또한 Sketch 및 Figma Design Tools에서 디자인을 가져올 수 있는 기능도 있습니다.
• Windows, MacOS 및 Linux용 App Builder 데스크톱 애플리케이션입니다.
• 앱 구축 속도를 늦추는 사일로와 핸드오프를 제거합니다.
• Blazor에서 UI의 모든 측면을 직접 코딩할 필요가 없으므로 시간, 노력 및 비용이 절약됩니다.
• 보다 쉬운 프로토타이핑, 테스트 및 실행 중인 Blazor, Angular 및 Web Components 응용 프로그램의 실시간 미리보기를 보장합니다.
• 타사 서비스, 추가 데이터 소스, 추가 보안 및 규정 준수 등을 가져올 수 있습니다.
• Blazor 앱을 만드는 데 도움이 되는 훌륭한 학습 리소스를 제공합니다.

.NET 6에서는 Blazor 코드 생성 옵션으로 사용하여 App Builder 공식적으로 지원하기 시작했습니다. 즉, 이제 간단한 드래그 앤 드롭으로 Blazor UI를 생성하고 다음 지원 구성 요소에 대한 클릭 한 번으로 프로덕션에 즉시 사용 가능한 Razor, C# 및 CSS 코드를 모두 가져올 수 있습니다.

• 데이터 바인딩이 포함된 그리드 및 트리 그리드
• 배지
• 상
• 체크박스, 스위치
• 화신
• 입력 그룹
• 컨테이너 – 절대, 행, 열
• 하이퍼링크, 이미지, 텍스트 및 제목
• 목록
• 버튼, 링크 버튼
• 카드
• NavBar
• 라디오 그룹

Blazor 코드를 생성하는 5단계

1단계: App Builder 실행

계속해서 App Builder 사용하여 Blazor 코드를 생성하려면 먼저 App Builder 프로필에 직접 로그인하여 플랫폼을 시작해야 합니다. 두 번째 옵션을 선택하면 앱 탭 아래 프로토타입, 사용성 테스트, App Builder 등 세 가지 핵심 제품에 각각 액세스할 수 있는 홈 화면으로 리디렉션됩니다.

2단계: Blazor 앱 시작 – 샘플 앱, 기본 레이아웃 또는 디자인 가져오기 중에서 선택 

App Builder 홈 화면에서 새 앱을 시작하고 기존 앱을 미리 보거나 편집할 수 있습니다. 상황에 맞는 메뉴를 통해 모든 기존 앱의 이름을 바꾸거나 복제하거나 보관할 수도 있습니다.

새 Blazor 앱을 시작하는 방법에는 네 가지가 있습니다.

• 기존 Sketch 또는 Figma 디자인에서 생성
• 수정하기 쉬운 샘플 앱 사용
• 기본 기본 레이아웃을 사용하여 새 앱 시작
• 공백 옵션을 사용하여 처음부터 시작

App Builder에 들어가면 플랫폼을 떠나지 않고도 활성 앱 간에 쉽게 전환하거나 디자인 타임에 인앱 사이드 메뉴에서 작업 공간으로 돌아갈 수 있습니다.

3단계: Blazor WASM 또는 Blazor 서버 선택 

Blazor 애플리케이션 디자인을 마무리한 후 코드를 미리보기 전에 GitHub에 게시 및 미리보기 작업 버튼 바로 옆에 있는 탐색 모음에 있는 플랫폼 선택기 드롭다운에 주의하세요. Blazor WASM 또는 서버 옵션을 선택하여 Blazor 용 코드를 생성합니다. 선택기는 귀하의 선택을 기억하고 다음에 App Builder로 이동하면 원하는 프레임워크가 미리 선택되어 있습니다.

4단계: Blazor 코드 미리보기 

생성될 Blazor 앱 코드를 미리 보는 방법은 무엇입니까? 코드 보기를 ON으로 전환하고 디자인과 나란히 보기만 하면 됩니다. 읽기 전용 모드이지만 생성된 코드의 품질을 검토하는 데 도움이 됩니다. 다음으로 미리보기를 클릭하면 코드 미리보기가 표시됩니다. 여기서 Razor 페이지를 볼 수 있습니다. 모든 컨트롤 정의, div 등은 물론 Blazor 코드 태그, 보고 있는 특정 페이지의 레이아웃에 대한 CSS도 볼 수 있습니다.

5단계: GitHub에 게시 또는 Zip 파일로 저장 

"편집"으로 돌아가면 GitHub에 게시하거나 zip 파일로 다운로드하도록 선택할 수 있습니다.

코드 보기를 사용하면 HTML, CSS 및 TS를 별도로 볼 수 있습니다. 그리고 이렇게 하면 픽셀 단위까지 완벽한 무언가를 만들기 위해 마크업과 CSS를 작성하는 노력을 절약할 수 있어 시간이 절약됩니다. 자세한 내용은 포괄적인 개발자 설명서를 확인하고 Blazor 용 App Builder 지원을 참조하세요.

App Builder 디자인 화면과 미리 보기 창에 실시간 실행 웹 애플리케이션을 표시합니다. 즉, 디자인 화면에서 앱에 변경 사항을 적용하면 기본 Blazor 코드와 애플리케이션 모델이 실시간으로 업데이트됩니다. 미리 보기 창에서 원할 때마다 생성된 Blazor 애플리케이션 코드를 볼 수 있습니다. 또한 생성된 애플리케이션을 언제든지 완전한 애플리케이션 코드 저장소로 다운로드한 다음 원하는 코드 편집기에서 열 수 있습니다. 그런 다음 컴퓨터에서 로컬로 App Builder 사용하여 디자인한 애플리케이션을 빌드하고 실행할 수 있으며 생성된 코드를 추가로 수정할 수 있습니다. 그러나 Blazor 애플리케이션의 코드가 다운로드되면 로컬에서 변경한 내용은 App Builder 사용자 공간에 반영되지 않습니다.

그러나 많은 분들이 Angular 좋아한다는 것을 알고 있습니다. 이것이 프레임워크인 경우 App Builder 사용하여 Angular에서 프로덕션 준비 코드를 생성할 수도 있습니다.

Visual Studio의 App Builder에서 Blazor 앱을 사용하는 방법은 무엇입니까?

응용 프로그램을 다운로드하면 .csproj 파일을여십시오. 가장 먼저 눈에 띄는 것 중 하나는 Blazor WebAssembly/Server 앱을 생성하고 있다는 것입니다. WASM 앱은 WebAssembly 기반 .NET 런타임의 브라우저에서 직접 실행됩니다. Blazor WebAssembly 앱은 Angular 또는 React와 같은 프론트엔드 JavaScript 프레임워크와 유사한 방식으로 작동합니다.

참고: .NET 런타임은 앱 어셈블리 및 필수 종속성과 함께 앱과 함께 다운로드됩니다. 브라우저 플러그인이나 확장이 필요하지 않습니다.

이제 F5를 누르면 됩니다. 앱을 로컬에서 실행하고 있습니다. App Builder로 디자인한 것 위에 추가해 보세요.

WYSIWYG App Builder 및 Ignite UI for Blazor 또는 기타 주요 프레임워크의 최신 릴리스 및 업그레이드에 대한 최신 정보를 얻으려면 블로그 게시물을 주시하고 태그별로 기사를 필터링하십시오.