Blazor 자습서 | 첫 번째 앱 빌드

시작

목적

Blazor로 첫 번째 웹앱을 빌드하세요.

필수 구성 요소

없음.

완료 시간

10~15분 + 다운로드/설치 시간

시나리오

간단한 카운터 구성 요소를 만들고, 사용하고, 수정합니다.

다운로드 및 설치

Visual Studio 2022 다운로드

원하는 경우 자습서의 명령줄 인터페이스 버전을 사용하여 Blazor를 시작할 수도 있습니다.

설치하는 동안 ASP.NET 및 웹 개발 워크로드를 선택해야 합니다(위의 설치 링크는 이미 해당 옵션을 미리 선택함).

이미 Visual Studio 2022가 있습니까?

Visual Studio 2022가 이미 있는 경우 ASP.NET 및 웹 개발 워크로드를 추가할 수 있습니다.

Windows 로고 키를 선택하고 Visual Studio 설치 관리자를 입력한 다음 Enter 키를 누릅니다.
메시지가 표시되면 설치 프로그램이 자체적으로 업데이트하도록 허용합니다.
Visual Studio 2022용 업데이트가 있는 경우 업데이트 버튼이 표시됩니다. 설치를 수정하기 전에 업데이트하려면 선택하세요.
Visual Studio 2022 설치를 찾아 수정 버튼을 선택합니다.
아직 선택하지 않은 경우 ASP.NET 및 웹 개발 워크로드를 선택하고 수정 버튼을 선택합니다. 그렇지 않으면 대화 창을 닫으세요.

앱 만들기

Visual Studio를 시작하고 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 창에서 검색 상자에 Blazor를 입력하고 Enter 키를 누릅니다.
Blazor Server App 템플릿을 선택하고 다음을 선택합니다.
새 프로젝트 구성 창에 프로젝트 이름으로 BlazorApp을 입력하고 다음을 선택합니다.
아직 선택하지 않은 경우 추가 정보 창의 Framework 드롭다운에서 .NET 7.0(표준 기간 지원)을 선택하고 만들기 버튼을 클릭합니다.

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

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

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

모든 것이 정상이면 아래의 계속 버튼을 선택하여 다음 단계로 이동합니다.

앱 실행

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

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

상단 도구 모음에서 중지 버튼을 클릭하여 언제든지 앱을 중지할 수 있습니다.

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

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

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

Pages/Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

여기에는 홈페이지로 설정하고 Hello, world!와 Welcome to your new app텍스트를 표시하는 코드가 이미 포함되어 있습니다. 또한 Blazor 피드백 설문 조사에 대한 링크를 렌더링하는 SurveyPrompt 구성 요소도 포함되어 있습니다.

카운터 사용해 보기

실행 중인 앱에서 왼쪽 사이드바의 카운터 탭을 클릭하여 카운터 페이지로 이동합니다. 그런 다음 페이지를 표시해야 합니다.

페이지를 새로 고치지 않고 카운트를 늘리려면 나를 클릭하세요 버튼을 선택하세요. 웹 페이지에서 카운터를 증가시키려면 일반적으로 JavaScript를 작성해야 하지만 Blazor에서는 C#을 사용할 수 있습니다.

Pages 디렉터리에 있는 Counter.razor 파일에서 Counter 구성 요소의 구현을 찾을 수 있습니다.

Pages/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++;
    }
}

맨 위의 @page 지시문에 지정된 대로 브라우저에서 /counter를 요청하면 Counter 구성 요소가 해당 콘텐츠를 렌더링합니다.

[클릭] 버튼을 선택할 때마다:

onclick 이벤트가 발생합니다.
IncrementCount 메서드가 호출됩니다.
currentCount가 증가합니다.
업데이트된 수를 표시하기 위해 구성 요소가 렌더링됩니다.

구성 요소 추가

각 .razor 파일은 재사용할 수 있는 UI 구성 요소를 정의합니다.

Visual Studio에서 Index.razor 파일을 엽니다. Index.razor 파일이 이미 존재하며 프로젝트를 생성할 때 생성되었습니다. 이전에 만든 BlazorApp 디렉터리의 Pages 폴더에 있습니다.

Index.razor 파일 끝에 <Counter /> 요소를 추가하여 앱 홈페이지에 Counter 구성 요소를 추가합니다.

Pages/Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

<Counter />

핫 다시 로드 버튼을 클릭하여 실행 중인 앱에 변경 내용을 적용합니다. 그러면 Counter 구성 요소가 홈 페이지에 표시됩니다.

구성 요소 수정

구성 요소 매개 변수는 특성 또는 자식 콘텐츠를 사용하여 지정되며, 이를 통해 하위 구성 요소에 대한 속성을 설정할 수 있습니다. Counter 구성 요소에 매개 변수를 정의하여 버튼을 클릭할 때마다 증가하는 양을 지정합니다.

[Parameter] 특성을 사용하여 IncrementAmount에 대한 공개 속성을 추가합니다.
currentCount 값을 증가시킬 때 IncrementAmount를 사용하도록 IncrementCount 메서드를 변경하세요.

다음 코드는 이를 달성하는 방법을 보여줍니다. 강조 표시된 선은 변경 내용을 보여줍니다.

Pages/Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

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

Index.razor에서 <Counter> 요소를 업데이트하여 다음 코드의 강조 표시된 줄에 표시된 것처럼 증분량을 10으로 변경하는 IncrementAmount 특성을 추가합니다.

Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

<Counter IncrementAmount="10" />

핫 다시 로드 버튼을 클릭하여 앱에 변경 내용을 적용합니다. Index 구성 요소에는 다음 이미지와 같이 Click me 버튼이 선택될 때마다 10씩 증가하는 자체 카운터가 있습니다. /counter의 Counter 구성 요소(Counter.razor)는 계속 1씩 증가합니다.

다음 단계

축하합니다. 첫 번째 Blazor 앱을 빌드하고 실행했습니다!

계속 학습

이제 기본 정보를 학습했으니, 할 일 목록 앱을 빌드할 Microsoft Learn의 Blazor 자가 학습 모듈을 사용하여 첫 번째 Blazor 앱 빌드를 계속하세요.

Microsoft Learn: Blazor 할 일 목록 앱 빌드

.NET으로 더 많은 웹 개발

6부로 구성된 .NET을 사용한 웹 개발 소개 시리즈를 살펴보세요! 여기에서 멋진 프로젝트를 빌드하고 Razor Pages, Minimal APIs, Blazor 등에 대한 모든 것을 배우게 됩니다.

.NET을 사용한 웹 개발 소개

초보자용 Blazor

제프가 전체 Blazor 앱을 처음부터 끝까지 빌드할 수 있도록 합니다.

귀하는 다음 항목에도 또한 관심이 있을 수 있습니다...

Blazor 문서

멋진 웹앱을 빌드하는 방법을 알아보려면 Blazor에 대한 설명서를 살펴보세요.

Blazor 게시 개념

Azure Static Web Apps를 사용하여 Blazor 앱 및 .NET API를 게시하는 방법에 대한 Microsoft Learn을 따르세요.

REST API 빌드

ASP.NET을 사용하여 REST API 만들기

Blazor 자습서 - 첫 번째 Blazor 앱 빌드

시작

목적

필수 구성 요소

완료 시간

시나리오

다운로드 및 설치

이미 Visual Studio 2022가 있습니까?

올바르게 설치된 모든 것을 확인하세요

오류가 있나요?

앱 만들기

앱 실행

카운터 사용해 보기

구성 요소 추가

구성 요소 수정

다음 단계

계속 학습

.NET으로 더 많은 웹 개발

초보자용 Blazor

Blazor 문서

Blazor 게시 개념

REST API 빌드

문제 보고

피드백 제공