Mac OS 용 Rider 에서 HotReload 로 Blazor 디버깅 하기 (간편한 방법)

👨‍🏫 튜토리얼, 팁, 강좌
,
1

이미 많은 분들이 알고 계실지도 모르겠지만, 최근에 발견한 팁을 공유 합니다.

Mac 에선 Rider 이용하여 .NET 하고 있는데요, 윈도우 VS 와 달리, Blazor 에서 HotReload 가 동작 되도록 미리 세팅 되어 있지 않아, 방법을 모를땐 매번 HTML 을 바꾸고 다시 빌드를 하는 불편함이 있었습니다.
여기 아주 간단한 팁으로 Mac , Rider 에서도 HotReload 를 즐길수 있습니다.

  1. Rider 로 Blazor - Webassembly 프로젝트를 생성 합니다.

  2. launchSettings.json 파일을 열어 줍니다.
    image

  3. HotReload 시킬 프로필을 지정 하여 HotReload 속성을 추가 하겠습니다. (이번엔 https 를 선택 하도록 하겠습니다)

      
  "https": {
  ... 중략 ...       
        "hotReloadEnabled": true,
       ... 중략 ...       
      }

    image
    image900×468 80.7 KB

  4. 이제 같은 파일 하단에 새로운 Watch 프로필을 추가 하고 SAVE 합니다.

    "Watch":{
      "commandName": "Executable",
      "workingDirectory": "$(ProjectDir)",
      "executablePath": "dotnet",
      "commandLineArgs": "watch run debug --launch-profile https"
    }

    • 실제로, 디버깅시 마지막줄 commandLineArgs 이 실행 되는 것이고, --launch profile 뒤에 hotReload 시킬 프로필을 넣어 주면 됩니다. 3번 단계에서 https 를 설정 하였으니, 위와 같이 기입 하였습니다.

    • 실제로는 이렇게 보이겠지요?

      image
      image1148×740 114 KB

  5. 이제 실행옵션에 방금 만든 Watch 가 보입니다. 이 옵션으로 실행 해보도록 하겠습니다.
    image

  6. 실제로 동작하는 hotReload 캡처 입니다. Home.razor 파일을 대상으로 테스트를 하였는데요,

    image
    image1474×1808 125 KB

  • Rider 에서 편집후 저장하면, 익숙한듯 좌상단에 :ballot_box_with_check: 를 보실 수 있습니다.
  • 역시 제가 수정한 타이틀 " -3" 이 즉시 추가 되었습니다.
  • 또한 터미널에 “dotnet watch :fire: Hot reload of changes succeeded.” 로 동작상황을 보실 수 있습니다.

덧붙임
당연 VS code 로 디버깅시, 동일한 프로필을 선택 하여 시작하여도 잘 동작 합니다.
또한 commandLineArgs 를 이용한 프로필로 자신만의 빌드 프로필을 응용하여 만들수 도 있겠습니다.

7개의 좋아요