Blazor의 UI 업데이트 방식 ( feat : 리액트, CSR )

부서에서 감사하게도, 공부할 시간을 주셔서 이것저것 공부해볼 수 있는 시간을 가지고 있습니다.

 

요즈음 하루 중 대부분을 Blazor 나 Swift UI 공부하는데에 대부분 할애하고 있는 것 같아요.

 

오늘은 Blazor로 하루를 먼저 열었습니다. 그래서 블레이저에 대해서 좀 살펴볼게요.

 

 

 

* 블레이저는 뭘까

제가 생각할때는 풀스택 웹 프레임워크라고 생각해요. 

 

Next.js가 이걸 따라한 것 같은 느낌이 살짝 들어요. 물론 Next.js가 더 안좋다는건 아니고..

Ado.net으로 api를 직접 만들고 메서드로 감싸서 바로 호출 때려버릴 수도 있구요.

Entity Framework ( 저는 어려워서 잠시 보류함 ) 라는게 있는데 이거 써서 api 만들 수도 있구요. 

 

확실히 이렇게 프론트 개발하고 쿼리도 직접 날리다보니, 백엔드와의 소통? 단계가 없어지다 보니까 뭔가 개발하는게 수월해질 수 있겠다 라는 생각도 조금은 들어요.

 

* C# 만 알면 블레이저를 쓸 수 있나요?

그건 아닌 것 같아요. 

결국은 JS만큼 브라우저를 잘 다룰 수 있는 언어는 없는 것 같아요. 

JS로 함수를 짜서 써야하는 상황이 결국 오는 것 같아요.

 

 

* C#으로 웹 개발하면 어때요?

아무래도 좀 코드 짜다보면 어거지로 짜맞추는 느낌도 나고, 

제가 강타입 언어 되게 싫어하는데 뭐 좀 주고 받으려고 하면 DTO 선언해야하는 것도 조금 귀찮기도 하고..

그리고 문서가 ..ㅋㅋ... 뭔가 엄청 적혀있어요. 그런데 뭘 어떻게 읽어야할지를 처음에 진짜 모르겠어서 힘들었어요.

명절에 할머니 집가서 할머니가 차려주는 밥상 느낌이에요. 먹을게 엄청 많은데 뭘 먹어야 할지 모르는

 

 

* 와 블레이저 배우고 싶어요. 배울까요?

리액트나 다른 프레임워크를 사용하는 개발자가 블레이저를 굳이 배울 필요는 없는 것 같아요.

다만, 회사 부서에서 닷넷 베이스 기술스택이 주를 이루고 있다면 마이크로소프트의 여러 프레임워크 중에서 [블레이저]가 가장 웹 만드는데에는 제일 최신 느낌이 나지 않나하는 생각이 들었어요.

 

 

*** 아 또 다른 곳으로 너무 샜군요. 그럼 들어가볼게요.

 

- 아까 JS 함수를 결국 쓸 일이 생길 수밖에 없다고 했습니다.

그래서 쓰려면 3가지 단계를 거쳐야 합니다.

 

1. 먼저 wwwroot ( 정적파일 보관하는 곳 ) 에다가 JS 폴더 하나 만들어주고 함수 넣어줄 파일 하나 만들게요.

저는 JS/JsFunctions.js 라고 하겠습니다.

 

2. 다음으로는 app.razor에다가 스크립트 추가해줘야해요. 리액트에서의 index.html 같은 느낌인 것이죠. 

바디 태그 안에다가

<script src="JS/JsFunctions.js"></script>

요로코롬 넣어줍니다.

 

3. 이제 저걸 갖다가 사용할 레이저 페이지 파일에다가

다음을 합니다.

먼저, @inject IJSRuntime JSRuntime  // 종속성을 주입해주고

그냥 메서드에서 쓰면 됩니다.

private async Task TestJsAsync()
{
    // JSRuntime.InvokeVoidAsync 메서드를 사용하여 JavaScript 함수를 호출
    await JsRuntime.InvokeVoidAsync("TestConsole", "안녕");
}

저는 간단하게 그냥 콘솔 찍는 걸로..

TestConsole이 함수 이름이고, 이후는 인자입니다.

 

 

이렇게 하면!! 안될 겁니다. ㅋㅎ

왜냐하면 Blazor webapp은 렌더모드를 설정할 수 있는데, 

default가 정적 서버사이드 렌더링이기 때문입니다. 이건 진짜 우리가 아는 SSR이 맞아요.

그러다보니까 아무리 이후에 스크립트 로드해서 찍어대도 안될거에요.

 

그래서 렌더모드를 바꿔야 하는데, 한번 살펴볼까요.

 

렌더링 모드를 바꾸려고 딱 보면 선지가 3가지가 있습니다.

 

InteractiveAuto : 대화형 자동 렌더링

InteractiveServer : 대화형 SSR

InteractiveWebAssembly : 대화형 웹 어셈블리 wasm 렌더링 ( 그냥 대화형 CSR이라고 합시다 )

 

 

근데 그런 생각이 들어요. 

 

( 대화형 SSR...무선소리고..)

이런 표정이 자연스레 지어지네요..

 

SSR이면 SSR이지 뭔 대화형 SSR이냐..

 

이게 보니까 리액트랑 살짝 비슷한 것 같으면서도 다른 느낌이 나요. 

 

이 경우에 마소에서 쓰고 있는 SignalR이야기가 나오는데 자세하게 볼 필요는 없고, 실시간으로 통신을 할 수 있게 해주는 마소에서 제공해주는 오픈소스 라이브러리입니다. 이걸로 채팅도 만들고 실시간 알림 뭐 이런거 할 수 있다고 합니다.

 

 

이걸 어따 쓴거냐 

너무 단촐하긴한데 브라우저랑 서버라고 할게요. 

 

Blazor가 UI를 업데이트 하는 과정을 살펴볼까요. 

 

- 맨 처음에 초기 페이지를 서버가 브라우저에 보냈습니다.

- 근데 이벤트가 발생했어요. 예를 들어서 버튼을 클릭하던가 폼을 제출했습니다.

- 그러면 그 상호작용 이벤트가 아까 말한 SignalR 을 통해서 서버로 전송됩니다.

- 서버는 받은 이벤트를 처리하고 컴포넌트의 상태를 업데이트 합니다.

- 그리고 변경된 부분만 서버에서 계산해서 변경된 Dom요소만 클라이언트로 전송하는데 이 경우에 바이너리 형식으로 압축되어서 전송된다고 합니다. 

- 그리고 클라이언트는 서버로부터 받은 변경사항으로 UI를 업데이트 하는데 이때 전체 페이지를 로드하는게 아니라 바뀐 DOM 만 바꿔치기 합니다. 

 

그러면 깜빡 거리지 않고, 리액트처럼 CSR처럼 작동하는 것이죠. 

이정도면 그냥 CSR이라고 봐도 괜찮은 것 같은데, 이벤트 서버가 개입하니까 완전 Csr이라고 하기는 뭐하고 하니까

대화형 서버다!! 라고 한 것 같아요. 

귀차느니까 걍 대충지어..

 그래도 이름 누가 이렇게 지으래... 대화형 SSR이 뭐냐.. 차라리 CSR 같은 SSR이 낫겠다.

 

 

 

*** 어쨋든! 

이렇게 정적 SSR에서 대화형 SSR 로 바꾸고 나면!

@rendermode InteractiveServer

 

잘 돌아갈 겁니다.