Blazor 코드 생성

Blazor는 Microsoft의 대규모 .NET 개발자 커뮤니티를 위해 만든 현대적인 단일 페이지 애플리케이션(SPA) 앱을 구축하는 플랫폼입니다. Angular와 React와 같은 프레임워크로 작성된 앱과 유사합니다. Blazor 이전에 Microsoft는 전 세계에서 가장 인기 있는 웹 프레임워크인 ASP.NET Web Forms를 배포했습니다. Microsoft에 의해 오래전부터 단계적으로 폐지된 이 플랫폼 대신 .NET 개발자들은 Razor Pages와 ASP.NET MVC 애플리케이션만을 사용할 수 있었습니다. 인기가 있었지만 현대적인 웹 개발자들이 단일 페이지 애플리케이션 프레임워크에서 사용하는 것과는 진정으로 경쟁하지 못했습니다. Blazor가 나타나면서 Microsoft/.NET 커뮤니티는 필요한 모든 것을 제공하는 프레임워크를 갖게 되었습니다. .NET Framework에 접근할 수 있고, C#을 사용할 수 있으며, 현대적인 웹 앱을 작성하기 위해 JavaScript를 배울 필요가 없다는 장점이 있습니다.

Blazor를 왜 사용하나요?

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

당사 블로그에는 Blazor와 Angular, Blazor와 React, Blazor Server와 WebAssembly의 차이점을 자세히 탐색하는 3개의 상세 문서가 있습니다. 궁금하신 분들은 더 많은 정보를 위해 이들을 확인해보실 수 있습니다.

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

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

주의: Blazor(및 Angular)용 당사의 WYSIWYG 저코드 앱 개발 도구에 대한 모든 정보는 아래의 App Builder 제품 개요 및 튜토리얼에서 배울 수 있습니다.

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

App Builder를 처음 접하는 분들을 위해 이는 설계에서 코드 생성까지의 모든 과정을 처리하는 포괄적인 WYSIWYG 드래그 앤 드롭 앱 제작 도구입니다. 다음은 제품에 대한 주요 특징입니다:

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

.NET 6을 사용하면 App Builder와 Blazor를 코드 생성 옵션으로 공식적으로 지원하기 시작했습니다. 즉, 간단한 드래그 앤 드롭으로 모든 Blazor UI를 만들 수 있으며 다음의 지원되는 컴포넌트에 대해 클릭 한 번으로 프로덕션 준비가 된 Razor, C# 및 CSS 코드를 모두 얻을 수 있습니다:

• 데이터 바인딩이 있는 그리드 및 트리 그리드
• 배지
• 아이콘
• 체크박스, 스위치
• 아바타
• InputGroup
• 컨테이너 – Absolute, Row, Column
• 하이퍼링크, 이미지, 텍스트 및 제목
• 목록
• 버튼, 링크 버튼
• 카드
• NavBar
• 라디오 그룹

Blazor 코드를 생성하는 5가지 단계

단계 1: App Builder 시작

이제 App Builder를 사용하여 Blazor 코드를 생성하려면 먼저 App Builder 프로필에 직접 로그인하여 당사 플랫폼을 시작해야 합니다. 두 번째 옵션을 선택하면 홈 화면으로 리디렉션되며, 여기서 앱 탭 아래의 Prototypes, Usability Tests, App Builder의 세 가지 핵심 제품에 각각 접근할 수 있습니다.

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

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

새로운 Blazor 앱을 시작하는 네 가지 방법이 있습니다:

• 기존 Sketch 또는 Figma 설계에서 생성
• 쉽게 수정할 수 있는 샘플 앱 사용
• 기본 기본 레이아웃을 사용하여 새 앱 시작
• 빈 옵션을 사용하여 처음부터 시작

App Builder에 들어가면 플랫폼을 떠나지 않고도 설계 시간에 앱 내 사이드 메뉴에서 활성 앱 간에 쉽게 전환하거나 워크스페이스로 돌아갈 수 있습니다.

단계 3: Blazor WASM 또는 Blazor Server 선택

Blazor 애플리케이션의 설계를 완성한 후 코드를 미리보기 전에 탐색 표시줄의 Publish to GitHub 및 Preview 작업 버튼 바로 옆에 있는 Platform picker 드롭다운에 주목하세요. Blazor를 위한 코드를 생성하려면 Blazor WASM 또는 Server 옵션을 선택하세요. 선택기는 선택을 기억하며 다음 번에 App Builder로 이동할 때 원하는 프레임워크가 미리 선택되어 있습니다.

단계 4: Blazor 코드 미리보기

생성될 Blazor 앱 코드를 미리보려면 어떻게 해야 합니까? 코드 뷰를 켜고 설계와 나란히 표시합니다. 읽기 전용 모드이지만 생성된 코드의 품질을 검토하는 데 도움이 됩니다. 다음으로 미리보기를 클릭하면 코드 미리보기가 표시되며, 여기서 이것이 Razor 페이지임을 알 수 있습니다. 모든 컨트롤 정의, div 및 Blazor 코드 태그, 보고 있는 특정 페이지의 레이아웃에 대한 CSS를 볼 수 있습니다.

단계 5: GitHub에 발행 또는 Zip 파일로 저장

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

코드 뷰를 통해 HTML, CSS 및 TS를 별도로 볼 수 있습니다. 이렇게 하면 마크업과 CSS를 작성하는 데 소요되는 노력을 절약할 수 있으므로 픽셀 완벽한 것을 만들 수 있습니다. 자세한 내용은 당사의 포괄적인 개발자 설명서를 확인하고 더 자세한 정보를 위해 App Builder for Blazor 지원을 참조할 수 있습니다.

App Builder는 설계 표면과 미리보기 창에 라이브로 실행되는 웹 애플리케이션을 표시합니다. 이는 설계 표면의 앱에 변경을 적용할 때 기본 Blazor 코드 및 애플리케이션 모델이 실시간으로 업데이트됨을 의미합니다. 언제든지 미리보기 창에서 생성된 Blazor 애플리케이션 코드를 볼 수 있습니다. 또한 생성된 애플리케이션을 언제든지 완전한 애플리케이션 코드 저장소로 다운로드할 수 있으며, 선택한 코드 편집기에서 열 수 있습니다. 그런 다음 App Builder를 사용하여 설계한 애플리케이션을 로컬 시스템에서 구축하고 실행할 수 있으며, 생성된 코드에 추가 수정을 할 수 있습니다. 그러나 Blazor 애플리케이션의 코드가 다운로드되면 로컬에서 만든 변경사항은 App Builder 사용자 공간에 반영되지 않는다는 점을 명심하세요.

그러나 많은 분들이 Angular를 선호한다는 것을 알고 있습니다. 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나 다른 주요 프레임워크의 최신 릴리스 및 업그레이드에 대한 최신 정보를 얻으려면 당사 블로그 포스트를 주시하고 태그별로 기사를 필터링하세요.

웹 개발 코드 생성