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

완료됨

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

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

이 모듈에서는 .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 웹앱 프로젝트를 만들려면 다음을 수행합니다.

  1. Ctrl+Shift+P를 사용하여 명령 팔레트를 표시한 다음 ".NET"을 입력합니다.

  2. .NET: 새 프로젝트 명령을 찾아 선택합니다.

  3. 드롭다운 목록에서 Blazor 웹앱을 선택합니다.

  4. 새 프로젝트를 만들 폴더를 선택합니다.

  5. 프로젝트 이름을 BlazorApp으로 지정하고 Enter 키를 눌러 확인합니다.

  6. 솔루션 탐색기 새 Blazor 앱 프로젝트를 봅니다.

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

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

dotnet new blazor

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

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

통합 디버거를 사용하여 앱 실행

  1. Visual Studio Code의 메뉴에서 실행을 선택합니다.

  2. 디버깅 시작을 선택합니다.

  3. 선택 디버거 드롭다운에서 C#을 선택합니다.

  4. C#을 선택합니다 . BlazorApp [기본 구성]

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

    Screenshot showing the default Blazor app running in a browser.

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

  1. 터미널 창에서 다음 명령을 복사하여 붙여넣어 앱을 실행하고 파일 변경 내용을 확인합니다.

    dotnet watch
    

    이 명령은 앱을 빌드하고 시작한 다음 실행 중인 앱에 코드 변경 내용을 적용합니다. 앱은 기본 브라우저에서 자동으로 열립니다. 브라우저에서 사이트에 아직 유효한 인증서가 없음을 경고할 수 있습니다. 계속 진행해도 안전합니다.

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

새 Blazor 앱 만들기

Visual Studio는 Blazor 앱을 쉽게 만들 수 있는 .NET 개발을 위한 완전한 기능을 갖춘 IDE입니다.

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

Screenshot of selecting the ASP.NET and web development workload in the Visual Studio installer.

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

  1. Visual Studio를 시작하고 새 프로젝트 만들기를 선택합니다.

  2. 새 프로젝트 만들기 창에서 검색 상자에 Blazor를 입력하고 Enter 키를 누릅니다.

  3. Blazor 웹앱 템플릿을 선택하고 다음을 선택합니다.

    Screenshot of Visual Studio 2022 'Create New Project' screen and the Blazor template.

  4. 새 프로젝트 구성 창에서 BlazorApp을 프로젝트 이름으로 입력하고 다음을 선택합니다.

    Screenshot of Visual Studio 2022 'Configure Your Project' screen and recommended settings from step 3.

  5. 추가 정보 창에서 아직 선택하지 않은 경우 프레임워크 드롭다운에서 .NET 8.0(장기 지원)을 선택하고 만들기 단추를 클릭합니다.

    Blazor 웹앱을 만들 때 인증을 사용하도록 설정할지 여부, 사용할 대화형 렌더링 모드 및 대화형으로 사용할 앱의 양과 같은 다양한 옵션 중에서 선택할 수 있습니다. 이 앱의 경우 다음과 같이 기본값이 선택되어 있는지 확인합니다.

    • 인증 유형: 없음
    • 대화형 렌더링 모드: 서버
    • 대화형 위치: 페이지/구성 요소당

    Screenshot of Visual Studio 2022 additional information screen for the Blazor project.

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

Screenshot of Visual Studio 2022 Solution Explorer with a list of the files in a default Blazor project.

실행할 준비가 된 간단한 Blazor 앱을 제공하기 위해 여러 파일이 만들어졌습니다.

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

앱 실행

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

Screenshot of the Debug Toolbar in Visual Studio with the Start Debugging button highlighted.

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

Screenshot of the Debug Toolbar in Visual Studio with the Hot Reload button highlighted.

위쪽 도구 모음에서 중지 단추를 클릭하여 언제든지 앱을 중지 할 수 있습니다.

Screenshot of the Debug Toolbar in Visual Studio with the Stop Debugging button highlighted.

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

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

Screenshot showing the default Blazor app running in a browser.

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