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

시작

목적

Visual Studio Code에서 Blazor를 사용하여 ASP.NET Core로 첫 번째 웹앱을 빌드합니다.

필수 구성 요소

macOS 12.0 이상 버전.

완료 시간

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

시나리오

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

Visual Studio 또는 CLI를 선호합니까?

원하는 경우 Visual Studio 또는 명령줄 인터페이스를 사용하여 Blazor를 시작할 수도 있습니다.

다운로드 및 설치

첫 번째 .NET 애플리케이션을 빌드하려면 .NET SDK, Visual Studio Code 및 C# 개발 키트를 설치해야 합니다.

.NET SDK, Visual Studio Code 및 C# 개발 키트란?

.NET SDK(소프트웨어 개발 키트)는 C#을 사용하여 애플리케이션을 빌드하고 실행하는 데 필요한 도구 및 라이브러리의 무료 오픈 소스 컬렉션입니다. C#은 이 자습서에 사용할 최신 개체 지향 프로그래밍 언어입니다.
Visual Studio Code (VS Code)는 세계에서 가장 인기 있는 경량의 무료 오픈 소스 코드 편집기입니다. 여기에서 C# 코드를 작성합니다.
C# 개발 키트는 C# 개발을 더 쉽게 만드는 강력한 VS Code 확장 집합입니다. 앱을 빌드할 때 코드를 작성, 테스트 및 디버그하는 데 도움이 됩니다.

Visual Studio Code를 사용하여 첫 번째 .NET 애플리케이션을 빌드하려면 환경을 설정합니다.

.NET SDK 다운로드 및 설치:

.NET 9 SDK 설치 지침

.NET 9 SDK x64(Intel) 다운로드
.NET 9 SDK Arm64(Apple Silicon) 다운로드

Apple M1 또는 M2 칩이 있는 Mac을 사용하는 경우 Arm64 버전의 SDK를 설치해야 합니다.
VS Code 다운로드 및 설치:

VS 코드 다운로드
VS Code를 열고 왼쪽의 VS Code 작업 막대에서 확장 단추를 선택합니다. 검색 창에서 C#을 입력하고 C# Dev Kit을 선택한 다음 C# Dev Kit 확장 페이지에서 설치 단추를 선택합니다.

구성 파일 다운로드 및 실행

WinGet 파일을 다운로드하려면 다음 링크를 클릭하십시오.

.NET WinGet 구성 파일

다운로드 폴더를 열고 파일을 두 번 클릭하여 설치를 시작합니다. 파일을 실행할 애플리케이션을 선택하라는 메시지가 표시되면 Windows 패키지 관리자 클라이언트 선택하세요.

터미널이 열리고 WinGet 구성 파일이 .NET 9 SDK, 없는 경우 VS Code, C# 개발 키트를 설치할 준비가 되었음이 표시됩니다.

라이선스 계약을 읽고 터미널에 "y"를 입력하고 Enter 키를 눌러 동의하세요.

참고: 실행하려는 구성 설정을 이해하는 것은 귀하의 책임입니다. Microsoft는 사용자가 작성하거나 가져온 구성 파일에 대해 책임을 지지 않습니다. 이 구성은 Windows의 설정을 변경하고, 소프트웨어를 설치하고, 소프트웨어 설정(보안 설정 포함)을 변경하고, 사용자를 대신하여 타사 패키지 및 서비스에 대한 사용자 계약에 동의할 수 있습니다. 이 구성 파일을 실행함으로써, 귀하는 이러한 리소스 및 설정을 이해하고 이에 동의하게 됩니다. 설치된 모든 애플리케이션은 해당 소유자가 사용자에게 라이선스를 부여합니다. Microsoft는 타사 패키지 또는 서비스에 대해 책임을 지지 않으며 라이선스를 부여하지도 않습니다.

WinGet에서 시작하는 데 필요한 모든 항목을 설치하고 있습니다! 설치 시간은 컴퓨터 사양, 네트워크 속도 등에 따라 달라집니다. 완료하는 데 5분 정도 걸리지만 최대 15분이 걸릴 수 있습니다.

일부 설치 단계에서는 설치하려면 관리자 수준의 권한이 필요할 수 있습니다. Windows 작업 표시줄 UAC(사용자 계정 컨트롤) 프롬프트가 깜박이는지 확인하고 해당 아이콘을 클릭하세요. 설치를 계속하려면 [예]를 선택해야 메시지가 표시됩니다.

설치가 완료되면 터미널에서 아래 출력을 볼 수 있습니다.

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

환경을 설정했으면 새 VS Code 터미널을 엽니다. 도구 모음에서 터미널을 선택한 다음 새 터미널을 선택합니다.

터미널에서 다음 명령을 실행하여 설치를 확인합니다.

Terminal

dotnet

설치에 성공하면 다음과 유사한 출력이 표시됩니다.

Terminal

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

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

오류가 있나요?

'dotnet'이 내부 또는 외부 명령 오류로 인식되지 않음 오류가 발생하는 경우 새 VS Code 터미널을 열었는지 확인하세요. VS Code를 다시 시작하거나컴퓨터를 다시 시작해도 문제를 해결할 수 없는 경우 문제가 발생했습니다 버튼을 사용하여 문제 해결에 도움을 받으세요.

앱 만들기

VS CODE에서CTRL+SHIFT+P를 눌러 명령 팔레트를 엽니다.
VS CODE에서 CMD+SHIFT+P를 눌러 명령 팔레트를 엽니다.
.NET: 을 입력하여 C# 개발 키트로 실행할 수 있는 명령을 확인합니다.
.NET: 새 프로젝트를 찾아 선택하여 새 .NET 프로젝트를 만듭니다.
아래로 스크롤하여 Blazor Web App을 선택합니다.
프로젝트를 저장할 폴더 위치를 선택합니다.
메시지가 표시되면 명령 팔레트에서 프로젝트 이름을 BlazorApp으로 지정합니다. 확인하려면 Enter를 누릅니다.

작업 영역 신뢰를 활성화하려면 체크박스를 선택하고 예, 작성자를 신뢰합니다.를 선택하세요.

Visual Studio 구독이 있는 경우 계정에 로그인합니다. 프롬프트 팝업이 표시되지 않으면 VS Code 상태 표시줄에서 창의 오른쪽 아래에 있는 C# 아이콘을 클릭합니다.

사이드바에서 VS Code 탐색기가 열려 있는지 확인합니다. 여기에서 BlazorApp 폴더와 솔루션 탐색기를 볼 수 있습니다.
아래 비디오를 따라 BlazorApp 폴더를 접고 솔루션 탐색기를 엽니다. BlazorApp 프로젝트를 열고 솔루션 탐색기를 위로 끌어다 놓습니다.

VS Code 탐색기에서 BlazorApp 폴더를 접습니다.
솔루션 탐색기 왼쪽의 펼침 단추를 클릭하여 확장합니다.
솔루션 탐색기에서 BlazorApp 프로젝트 왼쪽에 있는 펼침 단추를 클릭하여 확장합니다.
BlazorApp 아래에 솔루션 탐색기를 끌어서 놓습니다.

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

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

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

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

앱 실행

작업 영역 왼쪽의 Activity Bar>에서 실행 및 디버그 아이콘을 선택합니다.

파란색 실행 및 디버그 단추를 선택합니다.

Visual Studio Code에서 시작 구성 메뉴를 엽니다. C#: BlazorApp [기본 구성]을 선택합니다.

그런 다음, 디버거를 선택해야 합니다. C#을 선택합니다.

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

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

애플리케이션을 실행하려면 오른쪽 위에 있는 실행 단추의 오른쪽에 있는 드롭다운 메뉴를 선택하고 이 파일과 연결된 프로젝트 실행을 선택합니다.

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

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

홈페이지로 설정하고 Hello, world!와 Welcome to your new app 텍스트를 표시하는 코드를 이미 포함합니다. PageTitle 구성 요소는 브라우저 탭에 표시되도록 현재 페이지의 제목을 설정합니다.

카운터 사용해 보기

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

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

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

Components/Pages/Counter.razor

@page "/counter"
@rendermode InteractiveServer

<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 구성 요소가 해당 콘텐츠를 렌더링합니다. @rendermode 지시문은 구성 요소에 대해 대화형 서버 렌더링을 사용하도록 설정하여 브라우저에서 사용자 인터페이스 이벤트를 처리할 수 있도록 합니다.

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

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

구성 요소 추가

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

원하는 텍스트 편집기에서 Home.razor 파일을 엽니다. Home.razor 파일이 이미 있으며 dotnet new 명령을 실행했을 때 생성되었습니다. 이전에 만든 BlazorApp 디렉터리 내의 Components/Pages 폴더에 있습니다.

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

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

이 변경 내용이 저장되면 dotnet watch 명령이 실행 중인 앱에 변경 내용을 적용하여 Counter 구성 요소가 홈 페이지에 표시되도록 합니다.

구성 요소 수정

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

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

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

Components/Pages/Counter.razor

@page "/counter"
@rendermode InteractiveServer

<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;

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

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

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

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Home 구성 요소에는 다음 이미지와 같이 Click me 버튼이 선택될 때마다 10씩 증가하는 자체 카운터가 있습니다. /counter의 Counter 구성 요소(Counter.razor)는 계속 1씩 증가합니다.

다음 단계

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

계속 학습

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

Microsoft Learn: Blazor 할 일 목록 앱 빌드

초보자용 Blazor

처음부터 끝까지 전체 Blazor 앱을 빌드하는 방법 알아보기:

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

Blazor 문서

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

Blazor 게시 개념

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

REST API 빌드

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

Blazor를 사용하여 ASP.NET Core로 첫 웹앱을 빌드하세요.

시작

목적

필수 구성 요소

완료 시간

시나리오

Visual Studio 또는 CLI를 선호합니까?

다운로드 및 설치

구성 파일 다운로드 및 실행

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

오류가 있나요?

앱 만들기

앱 실행

오류가 있나요?

카운터 사용해 보기

구성 요소 추가

구성 요소 수정

다음 단계

계속 학습

초보자용 Blazor

Blazor 문서

Blazor 게시 개념

REST API 빌드

문제 보고

피드백 제공