Apple M1 또는 M2 칩이 있는 Mac을 사용하는 경우 Arm64 버전의 SDK를 설치해야 합니다.
올바르게 설치된 모든 것을 확인하세요
설치한 후 새 명령 프롬프트를 열고 다음 명령을 실행합니다.
설치한 후 새 터미널을 열고 다음 명령을 실행합니다.
Command prompt
dotnet --version
설치에 성공한 경우 버전 8.0.100 이상이 출력되어야 합니다.
Command prompt
8.0.100
모든 것이 정상이면 아래의 계속 버튼을 선택하여 다음 단계로 이동합니다.
오류가 있나요?
'dotnet'이 내부 또는 외부 명령 오류로 인식되지 않는 경우 새 명령 프롬프트를 열어야 합니다. 컴퓨터를 빠르게 다시 시작해도 문제를 해결할 수 없는 경우 문제가 발생했습니다 버튼을 사용하여 문제 해결에 도움을 받으세요.
앱 만들기
명령 프롬프트에서 다음 명령을 실행하여 앱을 만듭니다.
Command prompt
dotnet new blazor -o BlazorApp
이 명령은 새 Blazor 웹앱 프로젝트를 만들고 현재 위치 내의 BlazorApp라는 새 디렉터리에 배치합니다.
이전 명령으로 만든 새 BlazorApp 디렉터리로 이동합니다.
Command prompt
cd BlazorApp
BlazorApp 디렉터리의 내용을 빠르게 살펴보세요.
Command prompt
dir
실행할 준비가 된 간단한 Blazor 앱을 제공하기 위해 BlazorApp 디렉터리에 여러 파일을 만들었습니다.
Program.cs는 서버를 시작하고 앱 서비스와 미들웨어를 구성하는 앱의 진입점입니다.
Components 디렉터리 내:
App.razor는 앱의 루트 구성 요소입니다.
Routes.razor는 Blazor 라우터를 구성합니다.
Pages 디렉터리에는 앱에 대한 몇 가지 예제 웹 페이지가 포함되어 있습니다.
BlazorApp.csproj는 앱 프로젝트와 해당 종속성을 정의합니다.
Properties 디렉터리 내의 launchSettings.json 파일은 로컬 개발 환경에 대한 다양한 프로필 설정을 정의합니다. 포트 번호는 프로젝트 생성 시 자동으로 할당되어 이 파일에 저장됩니다.
자습서의 뒷부분에서 사용할 BlazorApp 디렉터리 경로를 기록해 둡니다.
모든 것이 정상이면 아래의 계속 버튼을 선택하여 다음 단계로 이동합니다.
오류가 있나요?
"Blazor Web App" 템플릿을 만들 수 없습니다와 같은 메시지를 받을 경우 'C:\Windows\System32\BlazorApp' 경로에 대한 액세스가 거부되었습니다, 현재 디렉터리를 새 폴더를 만들 수 있는 권한이 있는 디렉터리로 변경하고 명령을 다시 실행해 보세요.
프로젝트를 만들려고 할 때 Windows에서 SDK를 찾을 수 없고 SDK를 설치했다고 확신하는 경우 컴퓨터에 PATH 환경 변수에 문제가 있을 수 있습니다. 이 문제를 진단하고 수정하는 방법에 대한 지침은 이 Stack Overflow 게시물을 참조하세요.
발생한 문제를 해결할 수 없는 경우 문제 해결에 대한 도움말을 보려면 아래에 있는 문제가 발생했습니다 버튼을 선택하세요.
앱 실행
명령 프롬프트에서 다음 명령을 실행합니다.
Command prompt
dotnet watch
dotnet watch 명령은 앱을 빌드 및 시작한 다음 코드를 변경할 때마다 앱을 업데이트합니다. Ctrl+C를 선택하여 언제든지 앱을 중지할 수 있습니다.
앱에 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 구성 요소는 브라우저 탭에 표시되도록 현재 페이지의 제목을 설정합니다.
오류가 있나요?
발생한 문제를 해결할 수 없는 경우 문제 해결에 대한 도움말을 보려면 아래에 있는 문제가 발생했습니다 버튼을 선택하세요.
카운터 사용해 보기
실행 중인 앱에서 왼쪽 사이드바의 카운터 탭을 클릭하여 카운터 페이지로 이동합니다. 그런 다음 페이지를 표시해야 합니다.
페이지를 새로 고치지 않고 카운트를 늘리려면 나를 클릭하세요 버튼을 선택하세요. 웹 페이지에서 카운터를 증가시키려면 일반적으로 JavaScript를 작성해야 하지만 Blazor에서는 C#을 사용할 수 있습니다.
Components/Pages 디렉터리에 있는 Counter.razor 파일에서 Counter 구성 요소의 구현을 찾을 수 있습니다.