IT＆개발 정보 Blazor 작업에 유용한 Visual Studio 확장 프로그램
페이지 정보
작성자 GrapeCity
작성일 2021-08-11 14:07 조회 4,524회
댓글 0건
본문
관련링크
Blazor는 무료 오픈 소스 웹 프레임워크입니다. 2018년 Microsoft에서 출시한 이 제품은 JavaScript 대신 C# 프로그래밍 언어를 사용하여 재사용 가능한 대화형 웹 UI 개발을 가능하게 합니다.
Blazor VSCode 확장 프로그램을 사용하면 C# 프로그래밍 언어를 사용하여 처음부터 끝까지 응용 프로그램을 빌드할 수 있습니다. Blazor VSCode 확장 프로그램은 UI 컴포넌트가 C#, HTML 및 CSS만 사용하여 구현되기 때문에 코드 재사용성과 모듈성을 용이하게 합니다.
Blazor VSCode 확장 프로그램을 사용하는 클라이언트 소프트웨어는 WebAssembly를 사용하여 브라우저에서 직접 C# 코드를 실행합니다. 이것은 Blazor 자체가 WebAssembly에서 실행되는 .NET 응용 프로그램이기 때문에 가능합니다. 또한 SignalR을 사용할 때 서버에서 클라이언트 로직을 실행할 수도 있습니다. SignalR은 서버와의 효율적인 통신을 보장하는 실시간 메시징 프레임워크입니다.
Blazor의 고급 기능 중 하나는 .NET 메서드에서 JavaScript 함수를 호출하고 JavaScript 함수에서 .NET 메서드를 호출하는 기능입니다. 이 기능을 JavaScript 상호 운용성(JS interop)이라고 합니다. 클라이언트 측 UI에 존재하는 대량의 JavaScript 라이브러리를 유연하게 사용할 수 있으며 C#에 로직을 작성할 수 있습니다.
Blazor는 플러그인 또는 [코드 변환] 없이 개방형 웹 표준을 사용하여 빌드되었습니다(https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling/#:~:text=Transpiling은 소스를 가져오기 위한 특정 용어이며 본문은 컴파일러에 의해 IL로 변환됨). 보편적으로 적용 가능하며 모바일 장치를 포함한 모든 최신 웹 브라우저에서 완벽하게 작동합니다.
Blazor 커뮤니티는 2018년에 처음 출시된 이후 대규모로 성장했으며 도구도 다양해졌습니다.
이 문서에서는 Blazor의 VSCode 확장 프로그램의 몇 가지 장점을 살펴봅니다. Blazor의 VSCode 확장 프로그램은 응용 프로그램 빌드에 대한 스트레스를 낮추고 더욱 효율적으로 만들어 줍니다. 또한 응용 프로그램을 빌드하는 동안 쉽게 사용할 수 있는 몇 가지 Blazor 컴포넌트에 대해서도 알아봅니다.
Blazor Snippets
는 VS code를 사용하여 Blazor에서 응용 프로그램을 빌드하기 위한 공통 코드 조각을 제공합니다. 이 확장 프로그램을 통해 생산성이 향상되어 상용구 코드 작성 시간을 줄이고 주요 응용 프로그램 코드를 작성하는 데 더 많은 시간을 할애할 수 있습니다.
Blazor의 Snippets는 Scott Sauber에 의해 2018년 11월에 공식 출시되었습니다. 지금까지 이 확장 프로그램은 [Visual Studio Marketplace](https://marketplace.visualstudio.com/search?term=blazor&target=VSCode&category=All category&sortBy=Relevance)에서 가장 많이 다운로드된 Blazor 확장 프로그램 중 하나이며 15,000회 이상 다운로드되었습니다.
개발에 도움이 되는 방법을 포함하여 Blazor Snippet에 대한 자세한 내용은 공식 를 통해 확인하세요.
Blazory
VS Code용 확장 프로그램은 우아함과 사용 편의성으로 잘 알려져 있습니다. Bart Van Hoey가 만든 이 도구는 유용한 Blazor 코드 조각을 제공하여 Blazor 개발 프로세스의 속도를 높이도록 설계되었습니다.
2020년 7월 27일에 공식 출시된 Blazory 확장 프로그램은 안정적이며 개발도 활발히 진행 중입니다. 릴리스 주기와 이 프로젝트에 기여하는 방법에 대한 자세한 내용은 공식 를 확인하세요.
Microsoft의 VSCode Blazor 디버깅 확장 프로그램
Microsoft의 VSCode 은 VS Code에서 Blazor WebAssembly 응용 프로그램을 디버깅하기 위한 동반 확장 프로그램입니다. 이는 VS Code에서 Blazor WebAssembly를 디버깅하는 경험을 향상시킵니다. 이 확장 프로그램을 사용하려면 Visual Studio Code용 C# 확장 프로그램도 설치해야 합니다.
이 확장은 2021년 2월에 출시되었으며, 출시 이후 Visual Studio Marketplace에서 다운로드 15,000건을 돌파했습니다. 공식 에 활기찬 개발 팀이 등록되어 있습니다.
Blazor Snippet Pack
에는 놀라운 Blazor 생성 기능이 포함되어 있습니다. 사용하기 쉽고 개발자 생산성을 염두에 두고 아름답게 설계되었습니다.
Adrian Wilczyèski가 를 사용하여 2019년에 Blazor Snipet Pack을 만들었습니다. 다운로드 수가 42,000건을 넘고 활성 가 있습니다.
Razor / Blazor CSS IntelliSense
는 2021년 2월 Kevin Chatham이 개발 및 출시한 의 포크 버전입니다. 이 확장 프로그램은 HTML CSS Class Completion을 위한 드롭인 대체 기능으로, 즉시 사용할 수 있는 Razor 및 Blazor를 지원합니다.
HTML CSS Class Completion 확장 프로그램과 함께 사용할 수 없습니다. 따라서 이 확장 프로그램을 사용하기 전에 HTML CSS Class Completion 확장 프로그램을 제거해야 합니다.
Razor / Blazor CSS IntelliSense Visual Studio Code 확장 프로그램은 링크 요소를 통해 참조되는 작업 영역 또는 외부 파일에서 찾은 정의를 기반으로 HTML 클래스 특성에 대한 CSS 클래스 이름 완성 기능을 제공합니다.
이 확장 프로그램은
작업 영역에서 찾을 수 있는 CSS 클래스 정의에 대한 자동 완성 기능을 제공합니다(지원 언어 모드 섹션에 나열된 파일 형식 또는 CSS 파일에 정의됨).
HTML 파일의 링크 요소를 통해 참조되는 외부 스타일시트를 지원합니다.
자동 완성에 사용된 클래스 정의를 수동으로 다시 캐시하는 명령을 포함합니다.
사용자가 캐시 프로세스에서 고려하거나 제외할 폴더 및 파일을 재정의할 수 있습니다.
또한 매우 사용자 친화적이며 원하는 대로 사용자 정의할 수 있습니다. 를 통해 매우 활성화된 이 확장 프로그램의 추가 정보에 액세스하세요.
ASP.NET Core Switcher
를 사용하면 키 바인딩, 상황에 맞는 메뉴 또는 명령 팔레트를 사용하여 ASP.NET Core 응용 프로그램의 보기, 컨트롤러, 페이지, 페이지 모델 및 Blazor 컴포넌트를 빠르게 전환할 수 있습니다.
Adrian Wilczyèski에 의해 2019년 4월에 공식 출시되었으며 다운로드 횟수는 93,000건이 넘습니다. 이 확장 프로그램은 Blazor 프로젝트 외에도 Razor 및 MVC 프로젝트에 사용할 수 있습니다. 다음은 Blazor, Razor 및 MVC 프로젝트에서 이 확장 프로그램을 사용하여 페이지를 전환하는 몇 가지 빠른 명령입니다.
다음을 사용하여 컴포넌트(.razor)와 해당 CodeBehind(.razor.cs) 간에 전환합니다.
키 바인딩: Alt + O
편집기 컨텍스트 메뉴: 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 Component를 선택합니다. 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 CodeBehind를 선택합니다.
명령 팔레트: Ctrl+Shift+P > Component; Ctrl + Shift + P > CodeBehind
Razor 페이지
다음을 사용하여 Page와 해당 PageModel을 전환합니다.
키 바인딩: Alt + O
편집기 컨텍스트 메뉴: 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 Page를 선택합니다. 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 PageModel을 선택합니다.
명령 팔레트: Ctrl + Shift + P > Page; Ctrl + Shift + P > PageModel
MVC
다음을 사용하여 View와 Controller를 전환합니다.
키 바인딩: Alt + O(또는 이전 버전과의 호환성을 위해 Alt + I)
편집기 컨텍스트 메뉴: 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 Controller를 선택합니다. 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 View를 선택합니다.
명령 팔레트: Ctrl + Shift + P > Controller, Ctrl + Shift + P > View
다음을 사용하여 작업에 대한 보기를 만듭니다.
키 바인딩: Alt + P
편집기 컨텍스트 메뉴: 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 Add View를 선택합니다.
명령 팔레트: Ctrl + Shift + P > Add View
이는 필수 확장 프로그램입니다. 클릭 몇 번으로 한 파일에서 다른 파일로 원활하게 이동할 수 있으므로 대규모 프로젝트에서 디버깅이 훨씬 쉬워집니다.
이 확장 프로그램의 미래, 릴리스 주기 및 개발에 기여하는 방법은 공식 에서 자세히 알아볼 수 있습니다.
Blazor Addons
다운로드 수가 11,000건을 넘는 확장 프로그램은 Blazor의 워크플로우를 개선하는 데 도움이 됩니다. 2020년 5월 tHop에서 공식 출시한 이 확장 프로그램을 통해 VS code의 Blazor 프로젝트에서 컴포넌트 클래스와 부분 클래스를 빠르게 만들 수 있습니다. 공식 를 확인하십시오.
Blazor 미니멀 프로젝트 템플릿
은 Visual Studio 2017 및 2019에서 효과적으로 작동하며 클라이언트 측 Blazor(WebAssembly를 사용하여 브라우저에서 실행되는 C#, Razor, HTML 기반 웹 UI 프레임워크)를 최소로 구현하여 .Net Standard 프로젝트의 프로젝트 템플릿을 사용자에게 제공합니다. 에서 코드를 통해 액세스합니다.
Blazor CRUD 템플릿
2019년 12월 Faisal Pathan이 게시한 은 Visual Studio 2019에서 매우 효과적으로 작동합니다.
이 확장 프로그램은 Blazor, Dapper 및 Entity Framework Core 3.1을 사용하여 CRUD(Create, Read, Update, Delete) 작업 및 서버 측 페이지 매김을 포함하는 템플릿을 프로비전합니다. 에서 릴리스 세부정보와 기여할 수 있는 방법에 액세스할 수 있습니다.
Blazor 응용 프로그램 컴포넌트
Blazor 응용 프로그램은 컴포넌트를 사용하여 빌드된다는 점을 기억하는 것이 중요합니다. 컴포넌트는 페이지, 대화 상자 또는 폼처럼 자체적으로 포함된 UI(사용자 인터페이스) 덩어리로 정의할 수 있습니다. 여기에는 데이터를 주입하거나 UI 이벤트에 응답하는 데 필요한 HTML 마크업 및 처리 로직이 포함됩니다.
컴포넌트는 유연하고 가볍습니다. 중첩, 재사용 및 프로젝트 간에 공유할 수 있습니다. Blazor의 컴포넌트는 이전에 Razor 컴포넌트로 불렸습니다.
GrapeCity는 Blazor를 사용하여 빠르고 현대적인 웹 응용 프로그램을 빌드하기 위한 수많은 무료 UI 컴포넌트를 갖추고 있습니다. 이들은 C# 프로그래밍 언어를 사용하여 Blazor의 기본 UI 컨트롤을 빌드합니다.
GrapeCity UI 컴포넌트는 재사용이 가능하고 모든 플랫폼에서 작동하며 .NET 5, .NET Core 3.1 및 Blazor WebAssembly 3.2를 지원합니다. 컬렉션을 통해 작동하는 모습을 볼 수 있습니다.
Blazor 응용 프로그램을 빌드하기 위한 GrapeCity UI 컨트롤에는 다음이 포함됩니다.
FlexGrid: 표 형식 데이터 편집, 정렬, 필터링, 그룹화 등 일반적인 데이터 그리드 기능을 활성화하는 빠른 데이터 그리드
FlexChart: 막대, 면적, 선, 원형 및 산란과 같은 모든 공통 2D 차트 유형을 지원하는 차트 컴포넌트
AutoComplete: 텍스트 예측을 구현할 수 있습니다.
Calendar: 단일 달력 보기에서 인접한 여러 달을 표시할 수 있습니다.
체크박스: Blazor에 대한 클래식 체크박스 컨트롤을 활성화합니다.
ComboBox: 드롭다운 메뉴에 항목 목록을 표시할 수 있습니다.
DataPager: C1FlexGrid 및 C1ListView에 대한 페이징을 제공합니다.
날짜/시간 편집기: 날짜 및 시간 정보를 표시, 편집 및 확인할 수 있습니다.
ListView: 사용자에게 선택 항목 목록을 제공합니다.
MaskedTextBox: C1MaskedTextBox 컴포넌트를 사용하여 마스크로 사용자 입력의 유효성을 검사하고 형식을 지정할 수 있습니다.
NumericBox: Blazor 서버 및 클라이언트 응용 프로그램에서 숫자 값을 표시하고 편집할 수 있습니다.
텍스트 상자: C#에서 프로그래밍할 수 있는 표준 텍스트 상자 입력 컨트롤을 제공합니다.
Tooltip: 간단한 텍스트 또는 HTML 콘텐츠를 간단한 도구 설명으로 표시할 수 있습니다.
Window: C1 창을 사용하여 크기 조정, 끌기 및 닫을 수 있는 모달, 모덜리스 창을 표시할 수 있습니다.
요약
Blazor는 응용 프로그램을 개선하고 개발 프로세스를 간소화하는 데 사용할 수 있는 멋진 무료 도구가 포함된 강력한 프레임워크입니다.
Blazor 응용 프로그램에서 GrapeCity UI 컨트롤을 사용하면 프로젝트 개발 시간이 크게 단축됩니다. GrapeCity UI 컨트롤을 사용하여 응용 프로그램을 더욱 강력하고 응답성이 높으며 확장 가능하게 만드십시오. 에서 다른 웹 개발 콘텐츠를 확인하십시오.
다음 Blazor 응용 프로그램에서 웹 응용 프로그램용에 대해 GrapeCity Blazor UI 컨트롤을 사용해 보십시오. GrapeCity가 어떻게 Blazor 응용 프로그램을 향상시키는지를 알아보는 데는
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
