선용 - "C# SPA의 Blazer 및

"C#에서 SPA를 만들 수 있다니, 어떻게 된 일입니까?"
C#로 스파 하면 뭐가 좋아?
"Blazor에는 클라이언트 버전과 서버 버전이 있다고 들었습니다."
이 화제에 관해서 나는 아래의 슬라이드를 참고할 수 있다고 생각한다.

-C#으로 SPA의 Blazer를 재제작하고 환경을 개발하는 방법-CLI편

블라조어 앱을 개발하는 환경을 구축하기 위해 Windows에서 진행할 때도 비주얼스튜디오 2019를 설치하는 방법이 있다.
하지만 이번에는 CLI(명령줄 인터페이스)를 사용해 OS에 따라 좌우되지 않는 개발 환경의 구축 순서를 설명한다.
CLI 기반 Blazor 애플리케이션 개발 환경의 구축 순서는 크게 세 가지로 나뉜다.
1단계.NET Core SDK 설치
2단계.프로젝트 템플릿 설치
단계 3.편집기 준비다음은 순서대로 설명하겠습니다.

1단계.NET Core SDK 설치

사실 Blazor 애플리케이션 개발에 필요한 최소한의 환경은NET Core SDK만 있습니다.
이후 URL을 기재하고 홈페이지 마법사에 따라 각종 리눅스 발행, 맥OS, 윈도에 따라 각각 사용하는 OS 환경을 살펴본다.NET Core SDK를 설치합니다.

클라이언트 Blazer 애플리케이션을 제작하는 경우 미리 보기 버전을 설치합니다(현재).

단, 설치.NET Core SDK 버전을 참조하십시오.
이 원고를 작성할 때, Blazor WebAssiembly 응용 프로그램 (클라이언트 측 Blazor) 은 여전히 미리 보기 버전이다.
따라서 Blazor WebAssiembly 애플리케이션을 만들기 위해NET Core SDK3.1 미리보기 3이 필요합니다.
.NET Core SDK3.1 미리보기 버전의 설치 단계와 설치 프로그램을 시작하려면 아래 링크를 참조하십시오.

https://dotnet.microsoft.com/download/dotnet-core/3.1

예를 들어 Windows의 경우 위 링크부터 시작합니다.NET Core SDK의 설치 프로그램 파일(.exe)(다음 그림은 적환)을 다운로드한 후 실행하고 시작하는 설치 프로그램 화면에서 계속 전진하면 완성됩니다.
(※ 설치기의 파일 크기는 120MB 정도)

설치가 완료되면 터미널(명령 프롬프트, PowerShell)에서 다음 명령dotnet을 실행하여 사용 가능 및 버전을 확인하십시오.

> dotnet --version
3.1.100-preview3-014645

또한 Blazor 서버 응용 프로그램(서버 쪽 Blazor)은 안정적인 버전이다.NET Core SDK 3.0은 나중에 설치하면 됩니다.
그리고NET Core SDK는 동일한 PC, OS에 여러 버전을 설치할 수 있습니다.
따라서 안정판과 미리보기판은 각각의 것이다.Blazor 애플리케이션 개발을 위해 NET Core SDK를 설치할 수 있습니다.

2단계.Blazor 프로젝트 템플릿 설치

서버측 Blazor용 프로젝트 템플릿이 준비되었습니다.

Blazor 앱은 NET Core SDK를 설치할 수만 있다면 개발할 수 있다.
특히 서버 측 Blazor 응용 프로그램은 다음과 같다dotnet new는 명령을 프로젝트 템플릿 이름blazorserver으로 지정하여 실행하고 서버 측 Blazor 응용 프로그램의 새로운 프로젝트를 만들 수 있다.

> dotnet new blazorserver -o FooBar

상기 명령을 실행하면 현재 디렉터리에'FooBar'라는 하위 폴더를 만들고 이'FooBar'하위 폴더에 프로젝트 이름'FooBar'로 서버측 Blazor 응용 프로그램의 프로젝트 집합을 생성합니다.

클라이언트 Blazor의 프로젝트 템플릿 자체 설치

다른 한편, 클라이언트 측의 Blazer는 현재 미리 보기 버전에 있습니다.NET Core SDK만 설치하면 클라이언트 Blazor의 프로젝트 템플릿이 기본적으로 준비되지 않습니다.
그러나 프로젝트 템플릿이 없어도 클라이언트 Blazor 응용 프로그램의 프로젝트 파일을 스크랩해서 다시 만들 수 있습니다.
있을 수도 있지만 좀 귀찮아요.
따라서 클라이언트 블레이저용 프로젝트 템플릿을 별도로 설치하는 것이 좋습니다.
.NET Core SDK용 프로젝트 템플릿nuget.org도 배포됐으며, 클라이언트 Blazor의 프로젝트 템플릿도 nuget.org을 통해 설치됩니다.
브라우저nuget.org를 열고 "Blazor Templates"등으로 검색하면 검색 결과Microsoft.AspNetCore.Blazor.Templates 패키지가 표시됩니다.
이것을 열고 이 공사 템플릿을 설치하는 포장 방법이 적혀 있습니다.
현재 다음 명령dotnet을 수행할 수 있습니다.

> dotnet new --install Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2

프로젝트 템플릿의 설치가 완료되면 dotnet new 명령을 통해 프로젝트 템플릿 이름blazorwasm을 지정하여 클라이언트 Blazor 응용 프로그램의 새로운 프로젝트를 만들 수 있습니다.

> dotnet new blazorwasm -o FooBar

상기 명령을 실행하면 현재 디렉터리에'FooBar'라는 하위 폴더를 만들고 이'FooBar'하위 폴더에 프로젝트 이름'FooBar'로 클라이언트 Blazor 응용 프로그램의 프로젝트 집합을 생성합니다.
또한 위 명령은 클라이언트 웹 응용 프로그램으로 구성된 항목으로만 생성됩니다.
이외에도 서버 측으로 설치된 ASP입니다.NET Core 웹 응용 프로그램을 구성한 프로젝트 구성도 생성할 수 있습니다.
이를 위해 다음과 같이 --hosted 스위치dotnet new를 열고 명령을 실행합니다.

> dotnet new blazorwasm -o FooBar --hosted

보충 1: 실행 방법

Blazor 프로그램의 프로젝트 구축과 실행 방법은 현재 디렉터리를 프로젝트가 있는 폴더로 이동해서 dotnet run 명령을 실행하는 것입니다.

> cd ./FooBar
> dotnet run

이렇게 하면 프로젝트가 자동으로 구축되고 웹 서버가 시작되며 브라우저에서 열 수 있습니다.
자세한 내용은 dotnet 명령에 관한 공식 사이트의 해설(이하 링크)을 참조하십시오.

.NET Core CLI(명령줄 인터페이스) 도구 | Microsoft Docs

Windows/Linux/macOS의NET Core에서 명령행 사용 개요 | Microsoft Docs

보충 2: 더 쉬운 엔지니어링 템플릿

위에서 소개한 고객측 Blazor의 프로젝트 템플릿은 처음부터 다양한 설치가 있었다. 예를 들어 이 프로젝트 템플릿으로 제작된 프로젝트 중Bootstrap 디자인 등이 있다.
그렇지 않습니다. 새로운 클라이언트 Blazor 프로그램 프로젝트를 만들고 싶을 때, 진정한 새로운, 필요한 최소한의 구현을 원한다면, 이러한 용도의 프로젝트 템플릿을 추가할 수 있습니다.
필요한 최소한의 실현만 제시하면 클라이언트 Blazor의 프로젝트 템플릿은 다음과 같은 조작을 통해 설치됩니다.

> dotnet new --install Toolbelt.AspNetCore.Blazor.Minimum.Templates::3.1.0-preview3.19555.2

또한 판본(사칭 2개 이후의'3.1.0-preview 3.19555.2')은 본 원고의 집필 시간의 물건이므로 적당히 현지에서 교환해 주십시오.
상기 명령을 실행하여 공사 템플릿의 설치를 완료하면 blazorwasmmin와 blazorwasmhostedmin 두 항목의 템플릿 이름을 추가로 사용할 수 있습니다.
새 클라이언트 Blazor 애플리케이션 항목을 만들려면 다음과 같이 하십시오.

> dotnet new blazorwasmmin -o FooBar

새 클라이언트 Blazor 애플리케이션의 서버측 ASPNET Core를 통한 웹 서버의 새 프로젝트는 다음과 같습니다.

> dotnet new blazorwasmhostedmin -o FooBar

단계 3.편집기 준비

그런 다음 원하는 편집기에서 C#의 소스 코드 파일(.cs)과 Blazor의 구성 요소 파일(.razor)을 편집하고 인코딩하면 됩니다.
특별히 신경 쓰는 편집기가 없는 상황에서 블레이저 앱 개발의 관점에서 볼 때 먼저 Visual Studio Code는 나무랄 데 없는 추천이다.
Visual Studio Code에 대한 자세한 내용과 설치 프로그램 수령 등에 대해서는 아래 링크를 참조하십시오.

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

C# 확장이 설치된 상태라면 코드의 색상 구분과 코드 보완 등 강력한 개발 지원을 받아 편안하게 코딩할 수 있다.

이상의 이야기!

지금까지 CLI 기반 Blazer 애플리케이션 개발 환경을 구축했습니다.
Happy Coding :)