Blazor 란?

Blazor 란 .NET을 사용하여 클라이언트 쪽 웹 UI를 빌드하기 위한 프레임워크입니다. 기존의 JavaScript 대신 C# 을 사용하여 개발할 수 있습니다.

보다 자세한 내용은 공식 문서에서 확인하시기 바랍니다.

개발 환경 구성

여기서는 vscode 를 이용해서 개발 환경을 구성하겠습니다.

먼저 Blazor WebAssembly 부터 구축해보겠습니다.

새 디렉토리를 생성하고 아래 명령어를 통해 설치해줍니다.

dotnet new blazorwasm

아래 명령어를 통해 실행하고 5001 포트에 접속합니다.

dotnet run

사진처럼 실행이 잘되는 것을 확인할 수 있습니다.

Blazor WebAssembly 는 클라이언트 사이드 렌더링 방식이며 브라우저에서 직접 실행됩니다.

아래 명령으로 실행하면 새로고침 시 변경사항을 반영할 수 있습니다.

dotnet watch run

아직 핫 리로딩을 지원하지 않지만 곧 새로운 대안이 추가될 것으로 예상됩니다.

물론 웹소켓 등으로 시도하여 성공한 사례도 있으니 필요한 경우 찾아보시면 됩니다.

(2021.07.02 수정) 현재 핫 리로딩 솔루션이 있습니다.

다음은 Blazor Server 를 구축해보겠습니다.

새 디렉토리를 생성하고 아래 명령어를 통해 설치해줍니다.

dotnet new blazorserver

전과 같이 실행하고 5001 포트에 접속해서 확인할 수 있습니다.

dotnet run

Blazor Server 는 서버 사이드 렌더링 방식이며 서버의 ASP.NET Core 앱 내에서 실행됩니다.

UI 업데이트, 이벤트 처리, JavaScript 호출은 SignalR 연결을 통해 처리됩니다.

추가로 Pages > Host.cshtml 파일의 framework/blazor.server.js 의 script 태그 밑에 다음 코드를 추가하여 핫 리로딩을 이용할 수 있습니다.

<environment include="Development">
  <script>
    Blazor.defaultReconnectionHandler._reconnectCallback = () => document.location.reload();
  </script>
</environment>

*아래 명령을 이용하여 실행

dotnet watch run

덕분에 보다 편리하게 개발할 수 있습니다.

JavaScript 사용

Blazor 는 C# 코드에서 JavaScript 런타임을 호출할 수 있습니다.

어떤 프레임워크를 사용해도 상관 없으니 여기서는 위에서 생성한 Blazor Server 에 작성을 해보겠습니다.

먼저 wwwroot > js > test.js 파일을 생성하고 아래와 같이 호출할 함수를 정의해줍니다.

function testAlert(text) {
  alert(text);
};

그리고 Pages >_Host.cshtml 파일을 열어 head 에 연결해줍니다.

<script src='js/test.js' async></script>

Pages > Counter.razor 파일을 열어 상단에 런타임을 가져옵니다.

@inject IJSRuntime JS;

Counter 버튼을 클릭하면 정의해둔 함수에 인자를 전달하여 호출하도록 작성합니다.

private void IncrementCount()
{
  currentCount++;
  JS.InvokeVoidAsync("testAlert", $"currentCount is {currentCount}!");
}

버튼을 클릭하면 사진과 같이 알림창이 뜨는 것을 확인할 수 있습니다.

저장소

전체 소스코드는 아래 레포지토리에서 확인이 가능합니다.

https://github.com/KHJcode/blazor-environment-blog-example

읽어주셔서 감사합니다.