Blazor Server로 풀스택 웹어플리케이션 만들기(1) - Blazor Server란?

이 시리즈에서는 블레이저 서버를 이용해서 풀스택 웹어플리케이션을 만드는 내용을 다룹니다.

C# Blazor란?

C#과 razor 컴포넌트를 이용해서 프론트엔드를 구성할 수 있습니다.
C#에서는 ASP.NET Core라는 강력한 백엔드 프레임워크가 이미 있기 때문에, 프론트엔드와 백엔드 모두를 C#으로 작성할수 있습니다.
Blazor 프로젝트 템플릿은 두가지로 나눌 수 있습니다.

Blazor WebAssembly

Blazor WebAssembly는 말그대로 WebAssembly 프로젝트입니다. 브라우저에서 wasm으로 빌드 된 닷넷 런타임을 실행시키고 C#코드를 실행시키는 방식으로 구동됩니다. 따라서 Blazor Wasm도 Asp.net core 서버와 코드를 공유할수 있는 큰 장점이 있습니다.
언어를 전환할 필요도 언어별 dto 클래스를 다시작성할 필요도 없는것이 장점입니다.

간단하게 설명하면 Blazor wasm은 react나 vue와 같은 프론트엔드 프레임워크이고, C#으로 작성하여 브라우저에서 실행시킬수 있는 것입니다.

Blazor Server

Blaozr Server는 서버사이드 랜더링 방식의 풀스택 웹어플리케이션 입니다. 정말 특이 하지만 여태까지 본적도 다른 스택에서는 본적이 없는 말도 안되는 생산성 이점을 가져다줍니다. 이부분은 코드를 보여드리면서 설명하도록 하겠습니다.

다른 웹 SSR 프로그램과 어떻게 다를까요?

다른 SSR을 예를 들어 봅시다.
SSR MVC 구조에서 사용자가 접근하면 어떤 순서로 사용자한테 페이지를 보여주게 될까요?
왜 SSR MVC에서는 템플릿엔진(jsp,타임리프,cshtml)을 사용하고 또 그안에서 js코드는 왜 작성 되있을까요?

사용자의 요청에 따라서 MVC 백엔드는 어떤일들을 하는지 순서대로 나열 해보겠습니다.

1. 사용자가 웹사이트에 접근하고 특정 페이지를 요청합니다.
2. 서버는 사용자가 요청하는 페이지를 현재 상태에 따라서 템플릿 엔진과 조합하여 HTML로 변환합니다. 이 과정에서 템플릿엔진페이지에 작성된 C#이나 java코드가 단 한번 실행 됩니다.
3. 사용자에게 이렇게 완성된 html 페이지를 보내줍니다.
4. 사용자는 이렇게 만들어진 html에서 서비스를 이용하다가 페이지 내의 어떤 요청을 보냅니다.

const response = await fetch("http://example.com/api/movie"); 
// response 받은 이후 진행 할 js 코드

6. 이 요청은 js를 이용해서 보내도록 되어있습니다. 같은 사이트의 엔드포인트(컨트롤러)로 요청을 보냅니다.
7. request를 받아서 처리하고 다시 사용자에게 response를 보냅니다. 받은 사용자의 브라우저는 요청 코드의 이후동작을 진행합니다.
8. 이후 코드로는 다른 페이지로 넘어가지 않는다면 전부 브라우저에 실행되는 js로 진행 됩니다. DOM을 조작하거나 하는것도, 모든것은 다 js로 진행됩니다. 새 페이지로 가기 전까지요

대부분의 MVC SSR 프로젝트에서는 이 구조에서 벗어나지 않을겁니다.
그럼 blazor server에서는 뭐가 다를까요?

Blazor Server는 단독으로 사용 할 경우 요청/응답 코드가 없습니다.

 

Visual Studio나 Rider 를 사용하시면 이렇게 생성하시면 되고..

Cli나 vscode에서는 터미널을 열고

dotnet new blazorserver -o MyBlazorServerApp

dotnet sdk가 설치된 상태에서 이렇게 하면 blazor serverapp이 생성됩니다.

프로젝트를 만들었으면 분석을 해봅시다.

C# .net 에서 실행이 있는 프로그램의 시작점은 Program.cs를 보시면 됩니다.

Program.cs

Program.cs 에서는 ForecastService를 IOC Container를 통해서 Singleton으로 주입합니다.

달랑 저것만 주입되있고 컨트롤러나 미니멀 api 를 사용하는 엔드포인트 주입은 없고 그 대신

app.MapBlazorHub();

코드가 엔드포인트 실행 코드로 보입니다.

SignalR

SignalR을 이용한 엔드포인트를 사용한다는 내용인데

위에 적은 것 처럼 Blazor는 http Request/ Response 를 이용하는 일반적인 http통신을 하지 않습니다.

SignalR이라는 것을 써서 통신을 합니다.

msdn에 있는 Blaozr Server에 대한 구동방식에 대한 그림인데 여기서도 SignalR을 이용해서 통신하는 것이 나옵니다.

asp.net core 서버와 SignalR을 이용해 통신하고 DOM을 조작한다는 내용입니다.

* SignalR은 dotnet에서 사용할수 있는 WebSocket/Long Polling을 지원하는 실시간웹통신 라이브러리라고 생각하시면 됩니다. SignalR과 통신할수 있는 클라이언트 언어는 다양하지만, 서버는 닷넷만 가능합니다.

기본적으로는 웹소켓 방식으로 통신합니다.

 

API를 작성하고 프론트엔드로 공유해야하는 부분이 굉장히 서로간 인터페이스를 맞추기 어려운 부분이고, 실수하기도 쉬운 부분입니다. 

 

하지만 Blazor Server만 단독으로 사용할 경우  해당 문제가 발생하지 않습니다. 클라이언트 - 서버간 통신이 http Request가 아닌 WebSocket으로 이뤄진 메서드 호출에 의해서 일어나기 때문에, 잘못된 인수를 넣으면 빌드시점에서 컴파일 에러가 발생될 뿐 입니다. 

 

 

이번 포스트에서는 블레이저 서버의 기본적인 내용에 대해서 작성해봤습니다.

다음 포스트에서는 블레이저 서버를 이용해서 MVVM 아키텍처를 구현해보도록 하겠습니다.