Blazor 홀로서기

[suwoo]

안녕하세요!

Blazor 관련해 생긴 의문점이나, 개인적으로 스스로 해결하려고 하는 이슈들에 대해 정리하고
결과를 적어보려고 합니다.
제가 무언갈 꾸준히 잘 하지 못해서 얼마나 완성이 가능할 지는 모르겠지만
작심삼일을 세 번 씩 하면 하지 않을까 하는 마음으로 시도해보려고 합니다.

1. Blazor 관련 정보 습득
2. 궁금증 리스트업 / 및 Self-Solve 해보기
3. 현재 구매해 놓은 도메인에 서비스를 올리고, 위 내용 관련된 경험담을 보관할 수 있는 컨텐츠 정리해보기.

정도가 현재 이 글 작성 할 당시의 목표입니다.

혹시나 보시다가 틀린점/보완할 점 은 당연히 말씀해주셔도 됩니다. 아니 부탁합니다! ㅎㅎㅎㅎ

[suwoo]

시작 하기 전에

조사해 볼 내용부터 리스트-업 해 볼까요?
이 리스트는 우선순위는 아니며, 종종 계속 추가될 것 같네요.
어쩌면 이 이슈들은 별개의 SLOG로 빼야 할 수도 있을 것 같습니다.

현재 기준 버전은 dotnet 8.0.1-rc2 입니다.

• FluentUI를 사용해보기 / dotnet8 blazorapp InteractiveMode
• Tailwind CSS를 적용해보기.
• Blazor App 템플릿 / 부제 : Client(예전의 WebAssembly)가 신기해진(?) 건
• 현재 미니PC에 세팅 된 IIS가 있는데, 여기 올릴 때의 프로젝트에 대한 구상
• Client Mode에서 쓸 Authentication / Authorization 즉 Identity에 관하여

[suwoo]

FluentUI 사용하기 / dotnet8 blazorapp InteractiveMode

Microsoft FAST 소개
Fast Blazor 적응기 - slog
연관된 글은 이쪽입니다.

정확히는

Fast Blazor 적응기 - slog

제가 겪은 것과 거의 같은 증상인 듯 하여 링크 걸어 봅니다 ㅎㅎ ㅠㅠ RC2까지 이슈를 block 한다고 하네요. Hi, See also #706. We are blocked on this till .NET 8 RC2. The issue with MainLayout/@Attribute will be addressed then.

이 링크에 대한 해결책에 가깝습니다.
어쩌면 중복된 내용이 더 많을 수도 있겠습니다.

이 글은 먼저 시도해본, Blazor Web App - InteractiveServer Mode 입니다.
닷넷 8 버전에 와서 템플릿 구조가 살짝 바뀌었어요.
(물론 기존 프로젝트도 정상 작동합니다.)

닷넷 8 부터 외부 js 파일을 추가하고, html 문서의 Header가 포함되던 _Layout.cshtml 가 감쪽같이 없어졌지요?

해당 내용은 app.razor로 이동되었습니다.
헌데,

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>

이게

<HeadOutlet/>

이렇게 바뀌었지요. 어라?!???!??!
게다가, 여기에 js를 올려도 적용이 안 되는 현상이 있어서 제가 여기 하소연 했었지요.

이게 이제 rc2부터 새로운 옵션이 추가되었습니다.

ASP.NET Core Blazor render modes

<HeadOutlet @rendermode="@RenderMode.InteractiveServer" />

다음 릴리즈 때에는

<HeadOutlet @rendermode="InteractiveServer" />

로 변경된다고 하니 참고부탁드립니다.

설명이 조금 더 필요한데요.
HeadOutlet 컴포넌트와 Routes 컴포넌트를 InteractiveServer 모드로 하면
예전의 그 Blazor Server 그 맛과 똑같은 전역 Interactive 모드로 작동합니다.

또는 ,

이 스크린샷과 같이 Interactivity type : Server, Location : global로 설정하시면 위와 같이 자동 설정됩니다.

이 rendermode에 관한건 따로 쬐끔 더 다뤄보도록 할게요.

이제서야 본 내용입니다.

어흑. 너무 많이 돌아왔지요?

이후부터는 거의 동일 합니다.
Package에 Microsoft.Fast.Components.FluentUI 추가하고 쓰시면 정상 작동합니다.
web-components.min.js 추가하는 태그는 2.3패키지부터 삭제하도록 권장하고,

<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />

이 부분은 이제 자동생성되니 신경쓰지 않으셔도 됩니다.
헌데, 프로젝트명을 바꿀때마다 자동으로 변경 되지는 않아서 한번씩 체크 해주셔야 합니다.

[suwoo]

Blazor App Template

부제 : ClientSide(a.k.a. Blazor WebAssembly)가 신기해진 건,

최근 사용한 / 배포한 서비스들이 Blazor Server 기반을 사용했어서 해당 부분 위주로만 하다보니
Blazor WASM 관련된 지식이 꽤 미흡한 편이라 말씀드리기에 앞서 양해(?) 부탁드립니다.

오잉?!

분명 기존 blazor 생성 Template는 전부 따로국밥이었지요.

헌데, dotnet8부터 하나로 뭉쳐졌습니다. 띠용!

(다행히, 기존 템플릿도 아직(Visual Studio 2022- 17.8.0 preview 4.0) 살아 있습니다.)

생성 화면은 윗 글에 앞서 보여드린 바와 같습니다.

@suwoo

이 스크린샷과 같이 Interactivity type : Server, Location : global로 설정하시면 위와 같이 자동 설정됩니다.

그런데, 여기서 문득 든 생각

WebAssembly는 그럼…?

해보자!

구버전은 일반 WebAssembly 앱으로 생성하고,
새 템플릿은 Interactivity type : WebAssembly, location : Per Page/Component 로 해보겠습니다.
인증 유형은 자체 포함도 해봤습니다.

기존에서는

Duende IdentityServer를 사용해서 구현하고 있네요.
Identity를 전부 Scaffold 하지 않아서,
Areas/Identity/Pages/Shared/_LoginPartial.cshtml 만 있습니다.

저에게 신기한 점은, Blazor Server와 다르게 _Host.cshtml이 없는 부분이겠네요. ASPNet.Core의 엔트리 지점을 설정하지 않는 것과 같은 맥락일까요? Client단에다 스스로 보여줄 부분만 render 하면 될테니까요.

반면에, 이번 8.0 에서는?

일단 제일 큰 변화로,

Identity 관련 페이지가 전부 scaffold 된 MVC 기반 페이지 에서 razor Component로 교체되었습니다.

사실 크게 보면, razor파일과 razor.cs파일이 하나로 합쳐진 걸로 보셔도 되지 않을까? 라는 생각도 들지만, blazor와 razorpages는 문법만 같고 작동 방식은 미묘하게 다르다고 알고 있었기 때문에.
blazor 친화적으로 바뀌었으니 어쩌면 이제야 제대로 된 게 아닐까 하는 생각이 듭니다.
또 서드파티(가 맞겠죠?)로 대체되던 wasm용 Identity도 제 자리를 찾은 느낌이구요.

물론 이 부분은 ServerMode에서도 거의 비슷하게 구성되니, 확인 해보셔도 좋을 것 같아요.

이 쪽은 Client단의 Authorize 예제용 페이지입니다.
위 포스트와 반대로, [RenderModeInteractiveWebAssembly] 를 사용하고 있네요.

[RenderModeInteractiveAuto] 를 사용하면 하이브리드 모드가 됩니다.
기본값이 RenderModeInteractiveAuto(prerender:true) 이기 때문에,
최초 로드시에는 Server에서 render 된 부분을 받고, 완료되면 WASM으로 작동합니다.

@page "/auth"

@using Microsoft.AspNetCore.Authorization

@attribute [Authorize]
@attribute [RenderModeInteractiveWebAssembly]

<PageTitle>Auth</PageTitle>

<h1>You are authenticated</h1>

<AuthorizeView>
    Hello @context.User.Identity?.Name!
</AuthorizeView>

[BigSquare]

닷넷 8.0부터는 블레이저 WASM 앱을 등한시하는 느낌이 있습니다.

블레이저를 Asp.Net Core 프레임워크 아래에 묶어 두려는 속셈같아 실 약간 실망입니다.

언제까지 풀스택만 강요할 것인지.

[suwoo]

동의합니다. wasm 위주의 프론트보다는
말씀하신 대로 풀 스택 위주로 밀어보려는 느낌이 강하게 느껴집니다.
아쉬운 면도 크지만, 다행히 저는 그래서 제 입장에선 접근하기 편하다는 느낌도 들었어요.

[suwoo]

제 짧은 식견에 의하면, Interactive 기능을 전부 꺼버린 WASM 모드가
순수 프론트 용으로 쓰라고 해놓은 게 아닐까 하는 생각도 들었습니다.

[BigSquare]

그렇게 해보시고, publish 한번 해보시기 바랍니다.
(저는 VS 2022 프리뷰를 지웠습니다)

퍼블리시 결과물에 wwwroot 폴더만 존재하면, 생각하신 바가 맞고 아니면, 아닌 것입니다.

[suwoo]

그렇다면 아예 바이너리가 나오지 않아야 한다는 말씀이실까요?
제가 제대로 이해하지 못한 것 같아 추가적인 설명 부탁 드립니다.

혹은 브라우저 쪽에서 디버깅 툴 등을 통해 wasm 작동 여부를 알 수 있는 방법이 있을까요?
++ 다른프로젝트에서, 디버깅 툴에 네트워크에서 wasm 주르륵 내려받는것 까진 볼 수 있었습니다.

[BigSquare]

블레이저 WASM 프로젝트 템플릿을 게시(publish)하면, 게시 폴더는 아래와 같이 단촐한 모습입니다.

wwwroot/ 에 정적인 파일과 자바 스크립트 파일들이 들어 있습니다.

그 파일들을 웹서버로 복사하면 정적 호스팅이 되는 것입니다.

그러나, 블레이저 서버는 웹앱이기 때문에 실행파일이 게시 폴더에 존재합니다.

[suwoo]

아, 질문드린 방법이 그게 맞았군요. 다행히 예상 가능한 범위에서 질문드린 것 같습니다.
제가 이것 저것 마저 더 해보겠습니다.

++
혹시나 하는 기대감에 말씀 드린 거였는데, 역시나 @BigSquare 님의 말씀이 당연하다는 듯이 결과가 나왔네요.
이번 새 템플릿은 Interactive WASM이기때문에 Server-Client로만 쓰는 것 같네요.
오히려 Server App에 가까운 모습이 맞는 것 같습니다.
배포를 해 봐도 당연하다는 듯이 바이너리가 튀어나오구요.

안 그래도 “index.html이 나오지 않아요! 짱 신기해요”
까지가 위에 작성하던 포스트의 메인 주제 였는데,
헉, 세상에나… 이미 제 맥락을 파악하고 훅 들어오시는… 역시 고수의 눈썰미시군요…

[GoodFish]

.net8의 blazor web app의 경우 asp.net core 호스팅 위에서 돌아갑니다. blazor server를 베이스로 깔고 wasm이 옵션으로 돌아가는 느낌이랄까요… 그래서 그런지 기존 .net7 의 blazor server/wasm과는 달리 404에러(page not found)에 대한 처리도 달리진것 같습니다. 기존에는 blazor 내에서 페이지이동(navigation manger)을 하든 브라우져 주소표시줄에서 직접 주소를 입력하든 page를 찾을 수 없을때 router 컴포넌트의 notfound 섹션으로 바로 이동하였는데, .net8의 web app의 경우 브라우저 주소표시줄에 직접 주소를 입력할 경우 바로 404에러가 반환됩니다.

[suwoo]

아, 덕분에 약간 더 퍼즐이 맞춰진 느낌이 들었습니다.
정리해주셔서 너무 고맙습니다 ㅎㅎㅎ

그래서 내부 페이지의 notfound 섹션이 없어졌나보네요.
DevExpress Blazor Component를 사용 할 때 Blazor Enable WASM Feature라고 해서
Server에 해당 기능을 넣는 선택 항목이 있었는데, 마치 그것과 비슷하다는 느낌을 받았습니다.
wasm을 이용해 server app을 보완하는 느낌이랄까요?

그래서 사실상 이걸 뭐라고 하면 좋을까요? 생각나는건 Hybrid인데,
그 단어는 이미 쓰고 있네요 ㅎㅎㅎㅎ

[BigSquare]

.net 8.0 는 블레이저 앱라기 보다는 레이저 페이지(.cshtml)에 기반한 웹앱으로 회귀한 느낌입니다.
404 에러 등, 동작 방식이 거의 유사한 것 같습니다.

[CODE_REAPER]

.NET 7 Blazor server에서 SignalR의 실시간 통신구조에 한계가 느껴져서
(서버 다운하면 웹페이지에서도 연결 끊겨서 재접속중 메시지 표시…)

WASM으로 다시 작성할 생각이었는데 .NET 8부터는 또 바뀌었군요?!

망할…

[suwoo]

새 템플릿이 추가된 것 뿐이라
(일단은) 기존 템플릿 대로 쓰시면 정상적으로 기대 된 작동을 합니다…만
이게 정책을 어떻게 할 지는 지켜봐야 할 듯 하네요.

[GoodFish]

제 개인적인 생각으로는 blazor web app이 blazor server를 대체하는 방향으로 나아가지 않을까 합니다.
wasm의 경우 관련파일을 다운로드만 받는다면 독립실행이 가능한 형태라서 굳이 aps.net core 호스팅이 아니더라도 CDN이나 다른 웹서버시스템을 이용하여 호스팅이 가능하니까요…

[BigSquare]

@CODE_REAPER

.NET 7 Blazor server에서 SignalR의 실시간 통신구조에 한계가 느껴져서

.net 8.0 의 interactivity 는 블레이저 서버의 그 문제를 해결할 것으로 보입니다.

SignalR 은 웹어셈블리가 다운로드되기 전에만 동작하고, 일단 다운이 완료되면, 그 다음부터는 wasm 이 처리하니, 재접속 화면이 나오지 않을 것 같습니다.

만약 그렇다면, 한 단계 성숙한 기술적 진보라고 볼 수 있습니다.
다만, 제가 가진 불만은 왜 자꾸 비싼 방식 - 웹앱 호스팅 비용을 지불해야 하는 방식으로만 발전하냐는 것이죠.

[CODE_REAPER]

저도 그게 궁금합니다. 저만의 착각일지는 모르겠으나
Blazor에서 wasm / server라는 선택지를 남겨두고, wasm을 좀 발전시켜 나가는 것으로 보였는데…
Blazor의 방향이 바뀐건지… 아니면 그 의도대로 wasm을 발전시키고 있는건지 (hybrid가 탄생했으니까)