Blazor는 JavaScript 대신 C#을 사용하여 프런트 엔드 개발을 통해 SPA를 만들 수 있는 프레임워크입니다.
WebAssembly (wasm)는 브라우저에서 .NET 코드를 실행합니다.

전부터 Blazor를 공부하고 싶고, 실행 환경만 작성해 보았으므로 투고했습니다.
C# 초보자입니다. 잘 부탁드립니다.

아래의 Get started대로 가면 특별히 문제없이 실행 환경을 만들 수있었습니다.

Get started with ASP.NET Core Blazor | Microsoft Docs

자신이 시도한 환경

macOS Mojave

dotnet 3.0.100-preview6-012264

Google 크롬 : 75.0.3770.100 (Official Build) (64-bit)

1. .NET Core 3.0 설치

Download .NET Core 3.0 (Linux, macOS, and Windows)

macOS 설치 프로그램 다운로드



화면의 지시에 따라 조작을 하면 설치할 수 있었습니다.



.NET Core 3.0이 설치되었는지 확인합니다.

2. 명령을 실행하여 Blazor 템플릿 설치

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2

3. Blazor 프로젝트 만들기

VSCode를 사용하여 프로젝트를 작성한 단계를 소개합니다.

3-1. C# for Visual Studio Code extension 설치

VSCode에서 C# 개발을 할 때는 필수이므로 넣어 둡니다.

프로젝트 만들기

bash

dotnet new blazor -o WebApplication1
code -r WebApplication1 #WebApplication1のフォルダをルートのフォルダにしてVSCodeを開き直す
dotnet run

http://localhost:5000/ 를 열면 Blazor 프로젝트를 확인할 수 있습니다.

3-2. 카운터의 움직임을 확인

Pages/Counter.razor

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

@page 로 /counter 로 지정되어 있으므로 http://localhost:5000/counter 로 액세스하면 Pages/Counter.razor 의 내용이 실행됩니다.
@onclick 에서 클릭 이벤트를 지정하고 @IncrementCount가 실행되어 @currentCount의 업데이트를 확인할 수 있습니다.

3-3. 코드 변경하기

Pages/Counter.razor 에 [Parameter] 속성을 지정하여 IncrementAmount 의 속성을 추가하고 currentCount 에 IncrementAmount 를 더하도록 변경

Pages/Counter.razor

  @page "/counter"

  <h1>Counter</h1>

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

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

  @code {
      int currentCount = 0;

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

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

홈 화면에 <Counter /> 요소를 추가합니다.
방금 Counter 구성 요소에 IncrementAmount 속성을 추가했으므로 <Counter IncrementAmount="10" />
Pages/Index.razor

  @page "/"

  <h1>Hello, world!</h1>

  Welcome to your new app.

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

+ <Counter IncrementAmount="10" />

코드를 변경했으므로 Ctrl+C로 서버를 한 번 종료하고 dotnet run로 다시 시작하면 변경 내용이 반영됩니다.

4. 모니터링 모드에서 실행

dotnet watch run 그러면 파일이 변경되면 자동으로 다시 컴파일하여 서버를 시작합니다.
1회 1회 Ctrl+C로 하는 수고가 빠집니다.

단지 내 환경이라면 자동이라고는 해도, 파일을 갱신 -> 서버 리로드 로 5~6초 정도 걸려 버렸습니다.
좀 더 하기 쉬운 방법등 있으면, 가르쳐 주셨으면 합니다. m(_ _)m

5. 크롬에서 단계 실행

시도해 보면 아마 잘 되었기 때문에 자신이 한 일을 적어 드리겠습니다.

참고

Debug ASP.NET Core Blazor | Microsoft Docs

Compiling C# to WASM with Mono and Blazor then Debugging .NET Source with Remote Debugging in Chrome DevTools - Scott Hanselman

macos - Start Google Chrome on Mac with command line switches - Super User

5-1 디버그 모드로 부팅하기

dotnet run --configuration Debug

5-2 chrome을 명령에서 시작

1 크롬을 열면 닫기
2 다음 명령으로 크롬 열기

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 http://localhost:5000

3 열린 크롬이 활성 창 상태에서 shift+option+D
4 dev tool이 열리므로 중단점 설정
5 단계 실행해보기

이 코드 ↓를 스텝 실행해 보겠습니다.

Pages/Counter.razor

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
        currentCount++;
        currentCount++;
        currentCount++;
        currentCount++;
    }
}

chrome에서 단계를 실행할 수있었습니다, 숨바라시 ...

자신이 빠진 부분

5-3. dev tool을 command + R로 다시로드하면 왜 파일을 볼 수 없게됩니다.

command+R이 아니라 왼쪽 상단 리로드를 마우스로 클릭하면 파일을 볼 수 있습니다. ↓
안전한 소스를 확인할 수있었습니다.





끝까지 읽어 주셔서 감사합니다.