ASP.NET Core 시작하기

이 자습서에서는 .NET CLI를 사용하여 ASP.NET Core Blazor Web App 를 만들고, 실행하고, 수정하는 방법을 보여줍니다. Blazor 는 단일 프로그래밍 모델에서 서버 쪽 렌더링 및 클라이언트 대화형 작업을 모두 지원하는 .NET 프런트 엔드 웹 프레임워크입니다.

다음을 배우게 됩니다:

Prerequisites

다운로드 .NET에서 최신 .NET SDK를 가져오고 설치 합니다.

Blazor Web App 만들기

샘플 앱에 적합한 위치에 명령 셸을 열고 다음 명령을 사용하여 만듭니다 Blazor Web App. 이 -o|--output 옵션은 프로젝트에 대한 폴더를 만들고 프로젝트의 BlazorSample이름을 다음과 같이 지정합니다.

dotnet new blazor -o BlazorSample

앱 실행

다음 명령을 사용하여 BlazorSample 디렉터리를 폴더로 변경합니다.

cd BlazorSample

이 dotnet watch 명령은 앱을 실행하고 앱의 방문 페이지로 기본 브라우저를 엽니다.

dotnet watch

앱의 사이드바 탐색을 사용하여 카운터 페이지로 이동한 후, 카운터를 증가시키기 위해 Click me 버튼을 선택할 수 있습니다.

앱 변경

카운터 페이지가 로드된 상태에서 브라우저를 열어 둡니다. 명령을 사용하여 dotnet watch 앱을 실행하면 브라우저의 변경 내용을 반영하도록 앱을 다시 빌드하지 않고도 앱의 태그 및 코드를 변경할 수 있습니다.

Counter Razor 카운터 웹 페이지를 렌더링하는 구성 요소는 프로젝트의 Components/Pages/Counter.razor에 위치해 있습니다. Razor는 개발자 생산성을 위해 설계된 HTML 태그와 C# 코드를 결합하는 구문입니다.

텍스트 편집기 Counter.razor 에서 파일을 열고 콘텐츠를 렌더링하고 구성 요소의 카운터 기능이 작동하게 하는 몇 가지 흥미로운 줄을 기록해 둡다.

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

파일은 구성 요소의 상대 경로(/counter)를 나타내는 줄로 시작합니다.

@page "/counter"

페이지 제목은 태그로 <PageTitle> 설정됩니다.

<PageTitle>Counter</PageTitle>

H1 제목이 표시됩니다.

<h1>Counter</h1>

단락 요소(<p>)는 다음과 같은 currentCount변수에 저장된 현재 개수를 표시합니다.

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

단추(<button>)를 사용하면 사용자가 카운터를 증분할 수 있습니다. 이 카운터는 단추 클릭에서 다음과 같은 IncrementCountC# 메서드를 실행할 때 발생합니다.

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

블록에는 @code 구성 요소가 실행하는 C# 코드가 포함되어 있습니다.

• 카운터 변수 currentCount 는 초기 값이 0으로 설정됩니다.
• IncrementCount 메서드가 정의됩니다. 메서드 내의 코드는 메서드가 currentCount 호출될 때마다 변수를 하나씩 증가합니다.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

메서드에서 IncrementCount 카운터의 증분을 변경하겠습니다.

호출될 때마다 currentCount 값이 IncrementCount 10씩 증가되도록 줄을 변경합니다.

- currentCount++;
+ currentCount += 10;

파일을 저장합니다.

파일을 저장하면 dotnet watch 명령을 사용하기 때문에 현재 실행 중인 앱이 자동으로 업데이트됩니다. 브라우저에서 앱으로 돌아가 카운터 페이지에서 단추를 선택합니다 Click me . 이제 카운터가 기존 값 1에서 11 값으로 어떻게 증가되는지 확인합니다. 단추를 선택할 때마다 값이 10씩 증가합니다.

앱 종료

아래 단계를 수행하세요.

• 브라우저 창을 닫습니다.
• 앱을 종료하려면 명령 셸에서 Ctrl+C 를 누릅니다.

Congratulations! 이 자습서를 성공적으로 완료했습니다.

다음 단계

이 자습서에서는 다음 방법을 알아보았습니다.

이 자습서에서는 .NET CLI를 사용하여 ASP.NET Core 웹앱을 만들고 실행하는 방법을 보여줍니다.

Blazor 자습서는 ASP.NET Core Blazor 자습서를 참조하세요.

다음을 배우게 됩니다:

Prerequisites

다운로드 .NET에서 최신 .NET SDK를 가져오고 설치 합니다.

Pages 앱 만들기 Razor

샘플 앱에 적합한 위치에 명령 셸을 열고 다음 명령을 사용하여 Razor Pages 앱을 생성합니다. 이 -o|--output 옵션은 프로젝트에 대한 폴더를 만들고 프로젝트의 RazorPagesSample이름을 다음과 같이 지정합니다.

dotnet new webapp -o RazorPagesSample

앱 실행

다음 명령을 사용하여 RazorPagesSample 디렉터리를 폴더로 변경합니다.

cd RazorPagesSample

이 dotnet watch 명령은 앱을 실행하고 앱의 방문 페이지로 기본 브라우저를 엽니다.

dotnet watch

앱 변경

텍스트 편집기에서 Pages/Index.cshtml 파일을 엽니다.

"Welcome" 인사말이 있는 줄 다음에 다음 줄을 추가하여 로컬 시스템 날짜 및 시간을 표시합니다.

<p>The time on the server is @DateTime.Now</p>

변경 내용을 저장합니다.

파일을 저장하면 dotnet watch 명령을 사용하기 때문에 현재 실행 중인 앱이 자동으로 업데이트됩니다.

브라우저에서 페이지를 새로 고쳐 결과를 확인합니다.

변경 내용을 보여 주는 웹앱의 홈페이지

앱 종료

앱을 종료하려면 다음을 수행합니다.

• 브라우저 창을 닫습니다.
• 명령 셸에서 Ctrl+C 를 누릅니다.

Congratulations! 이 자습서를 성공적으로 완료했습니다.

다음 단계

이 자습서에서는 다음 방법을 알아보았습니다.