앱이 실행되면 핫 다시 로드 버튼을 클릭하여 실행 중인 앱에 코드 변경 내용을 적용할 수 있습니다.
상단 도구 모음에서 중지 버튼을 클릭하여 언제든지 앱을 중지할 수 있습니다.
Visual Studio에서 웹앱을 처음 실행하면 HTTPS를 통해 앱을 호스팅하기 위한 개발 인증서가 설정되고 인증서를 신뢰하라는 메시지가 표시됩니다. 인증서를 신뢰하는 데 동의하는 것이 좋습니다. 인증서는 로컬 개발에만 사용되며 인증서가 없으면 대부분의 브라우저에서 웹사이트의 보안에 대해 불평합니다.
브라우저에서 앱이 실행될 때까지 기다립니다. 다음 페이지로 이동하면 첫 번째 Blazor 앱을 성공적으로 실행한 것입니다!
터미널에서 다음 명령을 실행합니다.
Command prompt
dotnet watch
dotnet watch 명령은 앱을 빌드 및 시작한 다음 코드를 변경할 때마다 앱을 업데이트합니다. Ctrl+C를 선택하여 언제든지 앱을 중지할 수 있습니다.
앱에 http://localhost:<port number>에서 수신 대기 중이라고 표시되고 해당 주소에서 브라우저가 시작될 때까지 기다립니다.
앱이 http://localhost:<port number>에서 수신 대기 중임을 표시할 때까지 기다렸다가 브라우저를 열고 해당 주소로 이동합니다.
다음 페이지로 이동하면 첫 번째 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 구성 요소는 브라우저 탭에 표시되도록 현재 페이지의 제목을 설정합니다.
오류가 있나요?
NET::ERR_CERT_INVALID 오류 코드와 함께 "연결이 비공개가 아님"이라는 오류 메시지가 표시되면 브라우저에서 새 인증서를 선택할 수 있도록 모든 브라우저 창을 다시 시작하고 애플리케이션을 다시 실행해 보세요.
발생한 문제를 해결할 수 없는 경우 문제 해결에 대한 도움말을 보려면 아래에 있는 문제가 발생했습니다 버튼을 선택하세요.
카운터 사용해 보기
실행 중인 앱에서 왼쪽 사이드바의 카운터 탭을 클릭하여 카운터 페이지로 이동합니다. 그런 다음 페이지를 표시해야 합니다.
페이지를 새로 고치지 않고 카운트를 늘리려면 나를 클릭하세요 버튼을 선택하세요. 웹 페이지에서 카운터를 증가시키려면 일반적으로 JavaScript를 작성해야 하지만 Blazor에서는 C#을 사용할 수 있습니다.
Components/Pages 디렉터리에 있는 Counter.razor 파일에서 Counter 구성 요소의 구현을 찾을 수 있습니다.
맨 위의 @page 지시문에 지정된 대로 브라우저에서 /counter를 요청하면 Counter 구성 요소가 해당 콘텐츠를 렌더링합니다. @rendermode 지시문은 구성 요소에 대해 대화형 서버 렌더링을 사용하도록 설정하여 브라우저에서 사용자 인터페이스 이벤트를 처리할 수 있도록 합니다.
[클릭] 버튼을 선택할 때마다:
onclick 이벤트가 발생합니다.
IncrementCount 메서드가 호출됩니다.
currentCount가 증가합니다.
업데이트된 수를 표시하기 위해 구성 요소가 렌더링됩니다.
구성 요소 추가
각 .razor 파일은 재사용할 수 있는 UI 구성 요소를 정의합니다.
Visual Studio에서 Home.razor 파일을 엽니다. Home.razor 파일이 이미 존재하며 프로젝트를 생성할 때 생성되었습니다. 이전에 만든 BlazorApp 디렉터리 내의 Components/Pages 폴더에 있습니다.
원하는 텍스트 편집기에서 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 />
핫 다시 로드 버튼을 클릭하여 실행 중인 앱에 변경 내용을 적용합니다. 그러면 Counter 구성 요소가 홈 페이지에 표시됩니다.
이 변경 내용이 저장되면 dotnet watch 명령이 실행 중인 앱에 변경 내용을 적용하여 Counter 구성 요소가 홈 페이지에 표시되도록 합니다.
구성 요소 수정
구성 요소 매개 변수는 특성 또는 자식 콘텐츠를 사용하여 지정되며, 이를 통해 하위 구성 요소에 대한 속성을 설정할 수 있습니다. Counter 구성 요소에 매개 변수를 정의하여 버튼을 클릭할 때마다 증가하는 양을 지정합니다.
[Parameter] 특성을 사용하여 IncrementAmount에 대한 공개 속성을 추가합니다.
currentCount 값을 증가시킬 때 IncrementAmount를 사용하도록 IncrementCount 메서드를 변경하세요.
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씩 증가합니다.
Home 구성 요소에는 다음 이미지와 같이 Click me 버튼이 선택될 때마다 10씩 증가하는 자체 카운터가 있습니다. /counter의 Counter 구성 요소(Counter.razor)는 계속 1씩 증가합니다.
다음 단계
축하합니다. 첫 번째 Blazor 앱을 빌드하고 실행했습니다!
계속 학습
이제 기본 정보를 학습했으니, 할 일 목록 앱을 빌드할 Microsoft Learn의 Blazor 자가 학습 모듈을 사용하여 첫 번째 Blazor 앱 빌드를 계속하세요.
