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(단일 페이지 애플리케이션) 패턴과 일치하는 Blazor 3.2 및 Blazor WebAssembly를 출시했을 때 크게 촉발되었습니다. C#으로 작성된 클라이언트 및 서버 코드를 사용하면 사용자는 Blazor 코드와 .NET 라이브러리를 쉽게 공유할 수 있습니다. 또한, Blazor 코드는 더 적은 상용구에 최적화되어 있으며 시작하기가 매우 쉽습니다.

우리 블로그에는 Blazor와 Angular, Blazor와 React, Blazor Server와 Web Assembly의 차이점을 탐구하는 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 디자인 도구에서 디자인을 가져올 수 있는 기능도 있습니다.
• 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 및 Blazor 용 Ignite UI 또는 기타 주요 프레임워크의 최신 릴리스 및 업그레이드에 대한 최신 정보를 얻으려면 블로그 게시물을 주시하고 태그별로 기사를 필터링하세요.