[Blazor] Blazor 앱 만들기

참고

• https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/install

개요

• 빌드 가능한 Blazor 웹 앱을 만들어 봅니다.

설치 및 다운로드

• ASP.NET and web development 워크로드를 선택해서 설치를 진행합니다.

앱 만들기

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

• 새 프로젝트 만들기 대화 상자에서 검색 상자에 blazor 를 입력하고 Enter 키를 누릅니다.
• Blazor 서버 앱 템플릿을 선택하고 다음을 선택합니다.

• 새 프로젝트 구성 대화 상자에서 프로젝트 이름으로 BlazorApp을 입력하고 다음을 선택합니다.
• 추가 정보 대화 상자에서 모든 기본값을 그대로 두고 만들기를 선택할 수 있습니다.
• 솔루션 탐색기 를 사용하여 프로젝트의 내용을 살펴보면 다음과 같습니다.

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

앱 실행

• F5 키를 입력하여 Blazor 앱을 실행합니다.
• 다음 페이지가 보이면, Blazor 앱을 성공적으로 실행한 것입니다.

• 표시된 페이지는 디렉터리 Index.razor 내부에 있는 파일에 의해 정의됩니다.
• Pages 내용은 다음과 같습니다.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Count 사용

• 실행 중인 앱에서 왼쪽 사이드바의 카운터 탭을 클릭하여 카운테 페이지로 이동합니다.

• 페이지 새로 고침 없이 카운트를 늘리려면 Click me 버튼을 클릭합니다.
• 웹 페이지에서 카운터를 늘리려면 일반적으로 JavaScript 를 작성해야 하지만 Blazor 에서는 C# 을 사용할 수 있습니다.
• Counter.razor 파일을 통해 코드 내용을 확인할 수 있습니다.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

• 상단 /counter 의 지시문에 지정된대로 브라우저에서에 대한 요청은 구성 요소가 콘텐츠를 렌더링하도록 합니다.