Visual Studio의 시간 절약 Blazor 확장

간략한 개요: Blazor 개발을 더 쉽게 만드는 방법

팀은 먼저 목표를 설명합니다. 그 목표는 Visual Studio에서 Blazor 사용하는 개발자들이 워크플로를 간소화할 수 있도록 돕는 것입니다. 그는 이 확장 프로그램이 Razor 파일 관리, 네임스페이스 및 코드 비하인드 분리와 같은 사소한 불편함을 해결하는 데 초점을 맞추고 있다고 말합니다. 이러한 작업은 여러 Blazor 구성 요소 또는 Razor 페이지를 다룰 때 반복적으로 발생할 수 있습니다.

이 Visual Studio 확장 프로그램은 단순히 편의성만을 위한 것이 아닙니다. 이 기능은 렌더링 성능을 향상시키고, UI 상호 작용을 단순화하며, 특히 Blazor 웹 앱의 .NET 개발 주기를 단축하는 데 도움이 됩니다.

Jimmy Engström의 확장 설치

Tim은 Jimmy Engström이 개발한 BLM이라는 Visual Studio 확장 프로그램을 소개합니다. Visual Studio의 확장 프로그램 > 확장 프로그램 관리에서 "BLM 확장 프로그램"을 검색하면 찾을 수 있습니다. 설치 후에는 Visual Studio를 다시 시작해야 합니다.

Tim은 해당 확장 프로그램에 GitHub README 파일에서 직접 가져온 훌륭한 문서가 포함되어 있다고 언급했습니다. 즉, 초보 개발자도 IDE를 벗어나지 않고 사용 방법을 이해할 수 있다는 뜻입니다.

Blazor 프로젝트 설정하기

설치 후에는 새 Blazor 프로젝트를 생성하거나 기존 프로젝트를 열어야 합니다. Tim은 .NET Core 사용하는 Blazor Server 프로젝트인 "SuggestionApp"이라는 샘플 프로젝트를 불러옵니다. 이것은 Razor 구문과 컴포넌트 내 코드 비하인드 로직이 혼합되어 사용되는 것을 보여주는 훌륭한 예시입니다.

Razor 파일 및 코드 비하인드 작업

Tim은 Razor 파일을 열고 그 안에 Razor 마크업과 C# 로직이 모두 포함되어 있다고 설명합니다. 로직을 별도의 코드 비하인드 파일로 분리하고 싶다면, 이 확장 프로그램을 사용하면 마우스 오른쪽 버튼을 클릭하고 '코드 비하인드 생성'을 선택하는 것만으로 간단하게 분리할 수 있습니다. 이렇게 하면 Razor 컴포넌트에 연결된 Razor 파일이 생성됩니다.

예제에는 이미 코드가 포함되어 있지만 Tim은 처음부터 다시 시작하는 것을 시뮬레이션하기 위해 해당 코드를 삭제하고 Razor 라는 이름의 새 구성 요소를 생성합니다.

Razor 컴포넌트 작성 및 연결

Razor 에서 Tim은 간단한 문자열 변수를 정의합니다.

string test = "hello world";

string test = "hello world";

그는 Razor 마크업에서 @test 표현식을 사용하여 브라우저에 렌더링합니다. 프로젝트를 컴파일하면 구성 요소가 완전히 작동합니다. 이 예제는 .NET 런타임과 컴파일된 어셈블리를 사용하여 Blazor 구성 요소에서 동적 콘텐츠를 렌더링하는 기본 동작을 보여줍니다.

Visual Studio의 코드 비하인드로 추출 기능

Tim은 Visual Studio의 기본 기능인 빠른 작업 > 리팩토링 > 코드 비하인드로 추출을 사용하여 인라인 Razor 로직을 코드 비하인드 파일로 추출하는 방법을 시연합니다. 이는 로직 레이어와 UI를 분리하는 것으로, 유지보수 및 테스트 측면에서 좋은 방법입니다.

이 확장 프로그램은 역방향 기능을 추가합니다.

바로 여기서 확장 프로그램의 진정한 가치가 드러납니다. Visual Studio는 코드를 Razor.cs 파일로 이동하는 것을 지원하지만, 다시 원래 위치로 되돌리는 것은 허용하지 않습니다. 이 확장 프로그램을 사용하면 Tim은 Razor 파일을 마우스 오른쪽 버튼으로 클릭하고 "코드 비하인드를 Razor 로 이동"을 선택합니다. 그러면 C# 로직이 즉시 Razor 파일로 다시 이동됩니다.

이 기능은 베타 버전으로 표시되어 있지만, Tim은 개발자들이 파일을 간소화하거나 로직을 인라인으로 디버깅할 때 안정적이고 유용하다고 생각합니다.

격리된 CSS 및 JS 파일 생성

Tim은 또 다른 시간 절약 팁을 소개합니다. 마우스 오른쪽 버튼을 클릭하고 '격리된 CSS 만들기'를 선택하세요. 이렇게 하면 Blazor 컴포넌트별 스타일링에 사용하는 패턴인 Razor 라는 파일이 생성됩니다. 팀은 확장 프로그램이 없으면 [추가 > 새 항목]을 통해 파일을 수동으로 생성하고 이름이 일치하는지 확인해야 한다고 설명합니다.

JavaScript 격리에도 동일한 기능이 있어 범위가 지정된 동작을 개별 구성 요소에 쉽게 연결할 수 있습니다. 이는 상호 작용적이고 안전한 구성 요소를 구축할 때 웹 개발에서 중요한 부분입니다.

앱 전체에서 구성 요소 사용 위치를 찾으세요

또 다른 유용한 기능으로, Tim은 NotAuthorized 구성요소를 마우스 오른쪽 버튼으로 클릭하고 " 구성요소 사용 찾기"를 선택합니다. 이렇게 하면 해당 구성요소가 참조된 모든 파일을 빠르게 확인할 수 있습니다. 이 기능은 특히 컴포넌트가 여러 페이지와 레이아웃에서 재사용되는 대규모 .NET 프로젝트에서 리팩토링에 매우 유용합니다.

컴포넌트로부터 BUnit 테스트 생성

테스트는 모든 웹 애플리케이션에서 필수적인 부분입니다. Tim은 Blazor 용 테스트 프레임워크인 BUnit 테스트를 자동으로 생성하는 방법을 보여줍니다. 구성요소를 마우스 오른쪽 버튼으로 클릭하고 "BUnit 테스트 생성"을 선택하면 Razor 또는 C# 구문 중에서 선택할 수 있습니다.

이 도구는 필요한 테스트 스캐폴드를 생성하여 UI 테스트를 빠르게 설정할 수 있도록 해줍니다. 이는 자동화된 테스트를 통해 보안, 응답 유효성 검사 또는 UI 동작을 구현하려는 개발자에게 적합합니다.

공유 UI를 재사용 가능한 구성 요소로 추출

다음으로 Tim은 Razor UI 블록을 선택하고 "컴포넌트로 추출"을 선택하는 방법을 보여줍니다. 그의 데모에서는 컨테이너 안의 버튼을 TestButton이라는 새 컴포넌트로 추출합니다. 이를 통해 더 깔끔한 코드, 향상된 재사용성, 모듈식 UI 디자인이 가능해집니다. 이는 특히 모바일 앱, Blazor 하이브리드 앱 또는 대규모 웹 애플리케이션을 개발할 때 중요합니다.

Blazor 앱에서 경로 시각화하기

또 다른 주목할 만한 기능은 확장 프로그램 > BLM > Blazor 경로 표시를 통해 접근할 수 있는 Blazor 경로 표시 기능입니다. 이 도구는 프로젝트 전체에서 정의된 모든 경로, 즉 Razor 파일에서 @page 지시문을 사용하여 정의된 경로를 모두 나열합니다.

Tim Razor 파일에서 @page 지시문을 수정하면 경로 목록이 즉시 업데이트되는 것을 보여줍니다. 목록에서 아무 경로나 두 번 클릭하면 해당 컴포넌트가 열립니다. 이를 통해 특히 향상된 탐색 기능, 여러 렌더링 모드 또는 깊게 중첩된 구성 요소를 사용하는 앱에서 탐색 관리가 훨씬 효율적이 됩니다.

.NET Watch를 사용하여 프로젝트 실행

Tim은 중요한 성능 향상 팁을 공유합니다. Visual Studio의 내장 핫 리로드 기능에 의존하는 대신 PowerShell을 통해 .NET Watch를 사용하는 것입니다. 그는 기존의 재장전 방식은 속도가 느리고 일관성이 떨어진다고 설명합니다. 하지만 확장 프로그램을 사용하면 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 " .NET Watch 실행"을 선택할 수 있습니다.

이렇게 하면 PowerShell 창이 열리고 다음 명령어를 사용하여 앱이 실행됩니다.

dotnet watch

dotnet watch

이를 통해 실시간 새로 고침, 빠른 시작 및 더욱 반응성이 뛰어난 개발이 가능합니다. 웹 서버에 배포하거나, 정식 명칭으로 프로그레시브 앱을 개발하는 개발자에게 이러한 속도 향상은 개발 경험을 크게 개선할 수 있습니다.

결론: 이 확장 프로그램을 설치해야 하는 이유

마지막 1분 동안 Tim은 Blazor 개발을 위한 이 Visual Studio 확장 프로그램의 강력한 기능을 요약해서 설명합니다. Blazor WebAssembly 앱을 개발하든, 서버 측 프로젝트를 개발하든, 그 외 어떤 종류의 프로젝트를 개발하든 이 도구는 다음과 같은 기능을 제공합니다.

• 파일 및 구성 요소 생성 속도 향상

• Razor 와 C# 코드의 더욱 깔끔한 분리

• 더욱 간편한 테스트 및 경로 탐색

• 렌더링 트리 이해도 향상

• 컴파일된 구문 및 마크업의 관리 개선

Tim은 .NET, C#, 또는 Blazor 앱을 개발하는 모든 사람이 이 확장 프로그램을 설치하고 기본 도구 모음에 통합하는 것을 고려해 볼 것을 강력히 권장합니다.

결론: 이 확장 프로그램을 사용하면 Blazor 와 Visual Studio의 조합이 훨씬 더 좋아집니다.

Visual Studio에서 Blazor 사용하여 최신 웹 앱을 개발하고 있다면 Tim Corey의 튜토리얼을 통해 이 작은 확장 프로그램이 얼마나 강력한지 확인할 수 있습니다. 파일 처리, 테스트, 라우팅 및 빌드 효율성을 향상시키는 기능을 통해 최소한의 설정으로 큰 성능 향상을 제공합니다.

지미 엥스트롬의 노력 덕분에 개발자들은 이제 Blazor 및 .NET Core 생태계와 완벽하게 호환되는 도구를 사용할 수 있게 되었습니다. 이 도구는 수작업을 줄이고, 더 나은 컴포넌트 설계를 가능하게 하며, 프로젝트의 전반적인 상호 작용성과 유지 관리성을 향상시킵니다.

모바일, 데스크톱 또는 웹 앱 개발 여부와 관계없이 이 확장 프로그램은 Blazor, Visual Studio 및 .NET 런타임의 잠재력을 최대한 활용할 수 있도록 도와줍니다. 더 자세한 내용은 Tim의 영상을 시청하고 그의 채널을 구독하여 C# 및 개발에 대한 더 많은 유익한 영상을 시청하세요.