연습 - Blazor 웹앱 만들기 및 실행 - Training

8분

.NET 개발 환경을 설정하고 첫 번째 Blazor 웹앱을 만들어 보겠습니다.

이 모듈은 로컬 개발을 위해 .NET CLI, Visual Studio Code 또는 Visual Studio 2022를 사용할 수 있는 옵션을 제공합니다. Visual Studio Code로 개발하는 경우 이 모듈에서 사용하는 C# 개발 키트 확장을 설치합니다.

이 모듈에서는 .NET 8.0 SDK를 사용합니다. 기본 설정 터미널에서 다음 명령을 실행하여 .NET 8.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

다음 예제와 유사한 출력이 표시됩니다.

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

8으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열되는 버전이 없거나 명령을 찾을 수 없는 경우 최신 .NET 8.0 SDK를 설치합니다.

C# 개발 키트를 사용하여 새로운 Blazor 웹앱 만들기

C# 개발 키트를 사용하여 Visual Studio Code에서 새 Blazor 웹앱 프로젝트를 만들려면 다음을 수행합니다.

Ctrl+Shift+P를 사용하여 명령 팔레트를 불러온 다음 ".NET"을 입력합니다.
.NET: 새 프로젝트 명령을 찾아 선택합니다.
드롭다운 목록에서 Blazor 웹앱을 선택합니다.
새 프로젝트를 만들려는 폴더를 선택합니다.
프로젝트 이름을 BlazorApp으로 지정하고 Enter 키를 눌러 확인합니다.
솔루션 탐색기에서 새 Blazor 앱 프로젝트를 확인합니다.

선택 사항: .NET CLI를 사용하여 새 Blazor 앱 만들기

명령줄에서 .NET SDK를 사용하여 Blazor 웹앱 프로젝트를 만들려면 다음 명령을 사용합니다.

dotnet new blazor

Visual Studio Code 또는 .NET CLI를 사용하여 Blazor 앱을 만들었는지 여부에 관계없이 만들어진 프로젝트에는 다음 파일과 페이지가 포함됩니다.

Program.cs는 서버를 시작하고 앱 서비스와 미들웨어를 구성하는 앱의 진입점입니다.
App.razor는 앱의 루트 구성 요소입니다.
Routes.razor는 Blazor 라우터를 구성합니다.
Components/Pages 디렉터리에는 앱에 대한 몇 가지 예제 웹 페이지가 포함되어 있습니다.
BlazorApp.csproj는 앱 프로젝트와 해당 종속성을 정의하며 솔루션 탐색기에서 프로젝트 노드를 두 번 클릭하여 볼 수 있습니다.
Properties 디렉터리 내의 launchSettings.json 파일은 로컬 개발 환경에 대한 다양한 프로필 설정을 정의합니다. 프로젝트를 만들 때 포트 번호가 자동으로 할당되어 이 파일에 저장됩니다.

통합 디버거로 앱 실행

Visual Studio Code의 메뉴에서 실행을 선택합니다.
디버깅 시작을 선택합니다.
디버거 선택 드롭다운에서 C#을 선택합니다.
C#: BlazorApp [기본 구성]을 선택합니다.

이렇게 하면 디버깅이 사용하도록 설정된 앱이 빌드되고 시작됩니다. 앱은 기본 브라우저에서 자동으로 열립니다. 브라우저에서 사이트가 안전하지 않다고 경고할 수 있습니다. 그렇지만 계속 진행해도 안전합니다.

선택 사항: .NET CLI를 사용하여 앱 실행

터미널 창에서 다음 명령을 복사하여 붙여넣어 앱을 실행하고 파일 변경 내용을 감시합니다.
```
dotnet watch
```
이 명령은 앱을 빌드하고 시작한 다음 실행 중인 앱에 코드 변경 내용을 적용합니다. 앱은 기본 브라우저에서 자동으로 열립니다. 브라우저는 사이트에 아직 유효한 인증서가 없다는 경고를 표시할 수 있습니다. 계속 진행하는 것이 안전합니다.

첫 번째 Blazor 앱을 성공적으로 실행했습니다!

새 Blazor 앱 만들기

Visual Studio는 Blazor 앱을 쉽게 만들 수 있도록 하는 .NET 개발을 위한 모든 기능을 갖춘 IDE입니다.

Visual Studio를 사용하여 Blazor 웹앱을 만들고 작업하려면 Visual Studio 설치 관리자를 사용하여 "ASP.NET 및 웹 개발" 워크로드를 설치해야 합니다.

Visual Studio 설치 관리자에서 ASP.NET 및 웹 개발 워크로드를 선택하는 것을 보여 주는 스크린샷.

Visual Studio를 사용하여 새 Blazor 웹앱을 만들려면 다음을 수행합니다.

Visual Studio를 시작하고 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 창에서 검색 상자에 Blazor를 입력하고 Enter 키를 누릅니다.
Blazor 웹앱 템플릿을 선택하고 다음을 선택합니다.
새 프로젝트 구성 창에서 프로젝트 이름으로 BlazorApp을 입력하고 다음을 선택합니다.
추가 정보 창에서 아직 선택하지 않은 경우 프레임워크 드롭다운에서 .NET 8.0(장기 지원)을 선택하고 만들기 단추를 클릭합니다.

Blazor 웹앱을 만들 때 인증 사용하도록 설정 여부, 사용하도록 설정할 대화형 렌더링 모드, 앱의 대화형 정도 등 다양한 옵션 중에서 선택할 수 있습니다. 이 앱의 경우 기본값이 다음과 같이 선택되어 있는지 확인합니다.
- 인증 유형: 없음
- 대화형 렌더링 모드: 서버
- 상호 작용 위치: 페이지/구성 요소당

프로젝트가 Visual Studio에서 만들어지고 로드됩니다. 솔루션 탐색기를 사용하여 프로젝트의 콘텐츠를 살펴봅니다.

기본 Blazor Server 프로젝트의 파일 목록이 있는 Visual Studio 2022 솔루션 탐색기의 스크린샷.

실행할 준비가 된 간단한 Blazor 앱을 제공하기 위해 여러 파일이 생성되었습니다.

Program.cs는 서버를 시작하고 앱 서비스와 미들웨어를 구성하는 앱의 진입점입니다.
App.razor는 앱의 루트 구성 요소입니다.
Routes.razor는 Blazor 라우터를 구성합니다.
Components/Pages 디렉터리에는 앱에 대한 몇 가지 예제 웹 페이지가 포함되어 있습니다.
BlazorApp.csproj는 앱 프로젝트와 해당 종속성을 정의하며 솔루션 탐색기에서 프로젝트 노드를 두 번 클릭하여 볼 수 있습니다.
Properties 디렉터리 내의 launchSettings.json 파일은 로컬 개발 환경에 대한 다양한 프로필 설정을 정의합니다. 프로젝트를 만들 때 포트 번호가 자동으로 할당되어 이 파일에 저장됩니다.

앱 실행

Visual Studio의 디버그 도구 모음에서 디버깅 시작 단추(녹색 화살표)을 클릭하여 앱을 실행합니다.

앱이 실행되면 핫 다시 로드 단추를 클릭하여 실행 중인 앱에 코드 변경 내용을 적용할 수 있습니다.

핫 다시 로드 단추가 강조 표시된 Visual Studio의 디버그 도구 모음 스크린샷.

상단 도구 모음에 있는 중지 단추를 클릭하면 언제든지 앱을 중지할 수 있습니다.

디버깅 중지 단추가 강조 표시된 Visual Studio의 디버그 도구 모음 스크린샷.

Visual Studio에서 웹앱을 처음 실행하면 HTTPS를 통해 앱을 호스팅하기 위한 개발 인증서가 설정된 다음 인증서를 신뢰하라는 메시지가 표시됩니다. 인증서를 신뢰하는 데 동의하는 것이 좋습니다. 인증서는 로컬 개발에만 사용되며 인증서가 없으면 대부분의 브라우저는 웹 사이트의 보안에 대해 불평합니다.

브라우저에서 앱이 시작될 때까지 기다립니다. 다음 페이지로 이동하면 첫 번째 Blazor 앱이 성공적으로 실행된 것입니다!

브라우저에서 실행 중인 기본 Blazor 앱을 보여 주는 스크린샷.

다음 연습에서 이 Blazor 앱을 사용합니다.

계속

연습 - Blazor 웹앱 만들기 및 실행