Fast Blazor 적응기 - slog

suwoo · 9월 20, 2023, 11:15오후

확실히 8.0의 기본 Blazor 템플릿으로는 정상 작동이 되질 않네요.
슬프게도, 기본 css 조차도 먹질 않아요.
css 격리 덕분인지, Bootstrap 스타일도 먹통!

원래 기존 Blazor Server Template은,
Package 추가만 해도 버튼이 작동 하거든요.
(js import 조차 하지 않아도 가능합니다. 이전 버전 패키지에서 업그레이드 할 경우 js 배달 옵션을 끄라는 권장이 있어요.)

아무래도 Blazor App 자체의 구조가 살짝 바뀌어서 생긴 원인이 아닐까 싶은데요,
기존 Blazor Server의 경우
진입점인 Program.cs에서,

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// 이하생략...

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

여기를 통해
_Host.cshtml → App.razor 인스턴스 활성화 → RouteView(인증이 있으면 AuthorizedRouteView가 되겠죠?) →
MainLayout.razor → [RenderFragment?] 타입인 @body 로 메인 페이지를 처음 가져오는데요.

8.0와서 기본 구조가 바뀌었더라구요.

아예 처음의 Program.cs

builder.Services.AddRazorComponents()
    .AddServerComponents();

...

app.MapRazorComponents<App>()
    .AddServerRenderMode();

이미 여기서부터 모양이 살짝 달라졌지요?
근데 이제 호출 따라가보면
App.razor 부터 내용이 확 달라집니다.

//- 8.0의 App.razor
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />  // <- 여길 잘 봐주세요!
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

///- 기존의 App.razor
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

분명 다른데 익숙한 이 느낌은,

사실 8.0의 저 구조는
_Host.cshtml에 있는 내용과 매우 흡사합니다.

//_Host.cshtml
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp2.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorApp2.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

헌데 8.0 템플릿에는 Route.razor가 있지요.
막상 기존 App.razor의 내용이 여기 들어가있습니다.

//Route.razor
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

심지어, MainLayout에 @body가 있네요.

///MainLayout.razor
@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

그렇다면,

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

Program.cs->_Host.cshtml → App.razor 인스턴스 활성화 → RouteView(인증이 있으면 AuthorizedRouteView가 되겠죠?) →
MainLayout.razor → @body 구조에서

app.MapRazorComponents<App>()
    .AddServerRenderMode();

Program.cs → App.razor → Routes.razor → MainLayout.razor → @body
로 바뀐걸로 정리 할 수 있겠습니다…만

여기서 제가 뭐가 문제인지 잘 모르겠더라고요.

여기서부터 제가 해본 시도인데,

혹시나 해서, 8.0의 Header 태그를 생성해주는 App.razor에다가

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>

을 추가했더니, 그제서야 비주얼적인 부분만 작동하더라고요. Hover 효과 등등, css부분만요!
심지어 eventHandler를 붙여도 먹통인 증상이 ㅜㅜ

혹시 ServerRender와 관련이 있는 건가?

라고 생각 했는데, 8.0부터(인 지는 모르겠습니다만…)는 prerendered가 기본값이더군요.

@attribute [RenderModeAuto(prerender:true)]

suwoo · 9월 20, 2023, 11:48오후

그래서 혹시나 싶어서
Fast.UI 에서 제공하는 기본 생성 템플릿을 써봤습니다.

사실, Server App이라는 단어 자체가 8.0에서 변했어요.
서버 앱 에서 웹앱 선택 후 “선택형 서버 기능 추가” 선택으로 바뀌었거든요.
그러니까, 이미 템플릿 이름 부터 예전 버전 기반임을 알 수 있습니다.

솔루션 파일 구조 보시면 Shared도 있고, _Host.cshtml이 있는걸 보면
기존 템플릿에 닷넷 버전만 올린 모양이라고 볼 수 있겠네요.

그렇다면 무엇이 문제일까요?
일단, 패키지에 포함된 기본 js 경로부터 일단 맞지 않는 것 같고요.
그런데 이 부분은 _content/ 가상 경로에 생성되는 친구라, 제가 제어 할 수 있을지도 모르겠네요.
파일 구조가 바뀐 탓이 제일 큰 것 같은데 말이죠.

그래서 남은 사항 시도 방법이
npm에서 fast 패키지를 직접 받아서 css 빌드를 하고,
js를 직접 땡겨 쓰자 정도인데,

굳이 이렇게까지 해야 하나…?

라는 생각이 들어서 잠깐 멈춘 상태입니다.

제 개인 도메인 메인 페이지를 실습도 해볼 겸 blazor 새 버전으로 해보려다가,
이런 참사를 겪게 되네요

+++

아 참, 이 주소는

Fluent UI Blazor components (fluentui-blazor.net)
여기로 도메인 연결이 되었더라고요!
혹시 데모 보실 분 계시면 참고 부탁드립니다.

dimohy · 9월 21, 2023, 1:04오전

Blazor Webassembly로 테스트했을 때는 잘 되었어서…

@suwoo 테스트한 템플릿이 Blazor 웹앱 프로젝트 템플릿이군요! 저도 해봤는데… 안되네요.
아마도 렌더링 하는 방식이 달라 그런 것 같은데요, 안되는 것이 맞는 것 같습니다.

Blazor 웹앱에서 서버 렌더링 또는 클라이언트 렌더링을 각각 따로 선택해서 테스트를 저도 해볼께요

dimohy · 9월 21, 2023, 1:19오전

서버, 웹어셈블리를 혼합하지 않고 (Blazor 웹앱 프로젝트 생성 시 초기 체크박스로 선택할 수 있습니다) 둘 다 잘 동작하는 것을 확인할 수 있었는데요, 제가 한 것은,

| csproj에 패키지 추가

  <ItemGroup>
    <PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="3.0.1" />
  </ItemGroup>

| App.razor에 reboot.css 추가

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" />

| Counter.razor에 FluentButton추가

<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>

| 동작 화면

※ 참고로 왼쪽 Nav 스타일이 안맞는것은 Bootstrap을 제거했기 때문입니다.

suwoo · 9월 21, 2023, 1:23오전

답변 감사합니다.
저도 한번 다시 해볼게요!

재미있게도, 버튼 css 적용이 안 된 채로 클릭 이벤트는 발생하네요.

dimohy · 9월 21, 2023, 1:26오전

신기하네요. 스타일을 보니 기본 스타일은 적용이 된 듯 한데요, (reboot.css 스타일일 수도 있어요) 버튼 어디갔지;;;

dimohy · 9월 21, 2023, 2:06오전

@suwoo 확인해보니 Blazor 웹앱 혼합 모드에서도 동작을 잘 합니다. 안된다고 하셔서 급하게 테스트 하다보니 잘못 확인하였네요. 역시 잘 동작합니다.

간단히 테스트한 코드 깃허브로 공유합니다.

dimohy · 9월 21, 2023, 2:09오전

아 이상한 게 있네요. 혼합 모드에서 prerendering 시 Badge가 이상하게 출력되네요! 이것 Fast Blazor 팀에게 문의를 해봐야겠습니다.

dimohy · 9월 21, 2023, 2:50오전

suwoo · 9월 21, 2023, 4:50오전

github.com/microsoft/fluentui-blazor

fix: v3 Library with Blazor Web App .NET 8

열림 04:17AM - 18 Aug 23 UTC

닫힘 10:06PM - 27 Nov 23 UTC

timheuer

# 🐛 Bug Report When using the library with the new Blazor Web App (.NET8 Prev…iew 7) template, I'm not getting any of the styles loading like the Header, etc. The content is rendering, no errors in outputs/console log/etc. just not getting any UI that is expected. ## 💻 Repro or Code Sample (install .NET 8 Preview 7) 1. File...New Blazor Web App 2. Add 3.0.0-RC1 package and configure project 3. Add <Header> element to MainLayout ``` <FluentHeader> My Dashboard </FluentHeader> ``` ## 🤔 Expected Behavior Header renders like documentation indicates ![image](https://github.com/microsoft/fluentui-blazor/assets/4821/317ca94e-ea63-40a8-9d2c-1f8e064371cf) ## 😯 Current Behavior Header content renders, but nothing else ![image](https://github.com/microsoft/fluentui-blazor/assets/4821/1e990793-7845-4feb-9bcd-2c0e9c15acd2)

github.com/dotnet/aspnetcore

[Blazor] Finalize behavior of JavaScript initializers for Blazor Web apps

열림 04:49PM - 18 Aug 23 UTC

닫힘 03:15PM - 05 Oct 23 UTC

MackinnonBuck

bug area-blazor

Open questions with JavaScript initializers: * Should we update the arguments… to `beforeStart` to make it easier to detect which .NET runtime (Server/WebAssembly) is starting? * In the case of Blazor WebAssembly, should we wait to invoke `beforeStart` until we know for sure that Blazor WebAssembly is starting? Currently, `beforeStart` gets invoked during the Blazor WebAssembly loading procedure, but this doesn't always indicate that Blazor WebAssembly will be used (consider auto mode). * In the case of Blazor Server, should the `afterStarted` callback run each time a new circuit is created? We plan on closing circuits automatically if all Blazor Server components get removed from the page. * Should `beforeStart` execute immediately after `Blazor.start()` is called when using `blazor.web.js`? Currently, `beforeStart` only executes just before Blazor WebAssembly or Blazor Server starts up. * Or, alternatively, should the module be imported as soon as `Blazor.start()` gets called, but `beforeStart` only gets called when Blazor Server or WebAssembly starts? * Should we add arguments to the `afterStarted` callback to indicate which .NET runtime started?

제가 겪은 것과 거의 같은 증상인 듯 하여 링크 걸어 봅니다 ㅎㅎ ㅠㅠ

RC2까지 이슈를 block 한다고 하네요.

Hi,

See also #706. We are blocked on this till .NET 8 RC2. The issue with MainLayout/@Attribute will be addressed then.

_jeonghwan · 9월 21, 2023, 5:11오전

저 같은 경우는 asp.net core 7.0 blazor server 기준이기는 한데, 저는 템플릿 이용하지 않고 패키지(3.0.1)를 인스톨 해서 사용했습니다. 참고사항으로 내용을 남겨봅니다.

FluentTitle css가 제대로 적용되지 않길래 템플릿과의 차이점을 확인해봤더니…
_Host.cshtml >> head 태그에 파일이 프로젝트에 없더라도

<link href="{프로젝트명}.styles.css" rel="stylesheet">

이 부분을 추가해야 했습니다.
렌더링 될때마다 해당 페이지의 css가 생성되어 삽입되는 것 같습니다.
자동생성된 css 내용은 다음과 같습니다.

@import '_content/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.bundle.scp.css';

[b-bepfy0c0x7] > fluent-dialog::part(control) {
    --dialog-width: 1200px;
    --dialog-height: 700px;
    padding: 2rem;
    background-color: white;
}

[b-bepfy0c0x7] > fluent-dialog .fluent-dialog-content .fluent-dialog-body {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

import되는 Microsoft.Fast.Components.FluentUI.bundle.scp.css >> 이 파일은 Fluent Component 및 웹컴포넌트에 대한 css 파일이고 아래 css 코드는 해당 페이지에 대한 css 격리가 처리된 부분입니다.

suwoo · 9월 21, 2023, 5:17오전

넵! 사용 하신 방법이 맞습니다.
7.0기준으로는 별 문제 없이 작동됩니다.

8.0에선 저 css파일 참조가 자동으로 들어가요.

_jeonghwan · 9월 21, 2023, 5:21오전

그렇군요~~^^

suwoo · 10월 10, 2023, 2:43오전

내용 쬐끔 덧붙입니다.

이 이슈를 보면 저와 같은 증상으로 고통 받는(?)분들이 꽤 있었는데요,

github.com/microsoft/fluentui-blazor

docs: DesignTokens and RenderModeServer in .NET 8

opened 02:38PM - 07 Sep 23 UTC

SPWizard01

area:blazor status:blocked

# 🙋 Documentation Request Hi, In the documentation you specifically point …that you recommend to use code approach to specify the design tokens to implement custom theming. https://www.fluentui-blazor.net/DesignTokens#using-the-fluentdesignsystemprovider The usual place where you would do this is in MainLayout(i.e. change default font, primary color etc), however the layout cannot be set to RenderModeServer. So unless you would specifically use WebAssembly, you cannot get OnAfterRenderAsync to execute, and therefore you cannot get Ref to an element where you would apply the theming. I was not able to find a way to specify BodyFont and i.e. FillColor at the same time inside a MainLayout without using WebAssembly or `FluentDesignSystemProvider`. Maybe I am missing something? ## 💁 Possible Solution The only solution that i found was to create an SSR wrapper and use that wrapper in every page as top element, something like that: SSRThemeProvider.cs: ``` public class SSRThemeProvider { private readonly BodyFont bodyFont; private readonly FillColor fillColor; public SSRThemeProvider(BodyFont bodyFontInj, FillColor fillColorInj) { bodyFont = bodyFontInj; fillColor = fillColorInj; } public async Task SetupTheming(ElementReference reference) { await bodyFont.SetValueFor(reference, "Fantasy"); await fillColor.SetValueFor(reference, "#DEADBF".ToSwatch()); } } ``` CustomThemeWrapper.razor: ``` @using Microsoft.Fast.Components.FluentUI; <div @ref="themeHolder"> <FluentLayout> <FluentHeader> My App <FluentSpacer /> <CascadingAuthenticationState> <AuthorizeView> Hello, @context.User.Identity?.Name! </AuthorizeView> </CascadingAuthenticationState> </FluentHeader> <FluentStack Orientation="Orientation.Horizontal"> <NavMenu /> <FluentBodyContent> @ChildContent </FluentBodyContent> </FluentStack> </FluentLayout> </div> @code { [Parameter] public RenderFragment ChildContent { get; set; } private ElementReference themeHolder; [Inject] public SSRThemeProvider ThemeProvider { get; set; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await ThemeProvider.SetupTheming(themeHolder); StateHasChanged(); } } } ``` and then inside a page: ``` @using Microsoft.Fast.Components.FluentUI; @page "/ValidationManagement" @attribute [RenderModeServer] <CustomThemeWrapper> <FluentStack Orientation="Orientation.Vertical"> .... </FluentStack> </CustomThemeWrapper> ``` the problem with this approach is that the page would flicker 3 times (initial prerender, FluenUI load, theming setup), and the fact you have to wrap your component every time :) Is there any better way to do the theming using RenderModeServer?

github.com/dotnet/aspnetcore

[Blazor] Finalize behavior of JavaScript initializers for Blazor Web apps

opened 04:49PM - 18 Aug 23 UTC

closed 03:15PM - 05 Oct 23 UTC

MackinnonBuck

bug area-blazor

Open questions with JavaScript initializers: * Should we update the arguments… to `beforeStart` to make it easier to detect which .NET runtime (Server/WebAssembly) is starting? * In the case of Blazor WebAssembly, should we wait to invoke `beforeStart` until we know for sure that Blazor WebAssembly is starting? Currently, `beforeStart` gets invoked during the Blazor WebAssembly loading procedure, but this doesn't always indicate that Blazor WebAssembly will be used (consider auto mode). * In the case of Blazor Server, should the `afterStarted` callback run each time a new circuit is created? We plan on closing circuits automatically if all Blazor Server components get removed from the page. * Should `beforeStart` execute immediately after `Blazor.start()` is called when using `blazor.web.js`? Currently, `beforeStart` only executes just before Blazor WebAssembly or Blazor Server starts up. * Or, alternatively, should the module be imported as soon as `Blazor.start()` gets called, but `beforeStart` only gets called when Blazor Server or WebAssembly starts? * Should we add arguments to the `afterStarted` callback to indicate which .NET runtime started?

해당 이슈 해결되는 변경점이 Merge 된 걸로 보이네요!

github.com/dotnet/aspnetcore

[Blazor] Initializers fixes for Blazor Web

dotnet:release/8.0 ← dotnet:javiercn/blazor-web-initializers

opened 03:47PM - 21 Sep 23 UTC

javiercn

+879 -70

Updates the initializers in Blazor to include platform specific variants that ca…n be tailored to each runtime. ## Description * Initializers in Blazor WebAssembly and Server allowed library authors and applications to define JS modules that would be automatically imported by the JS Blazor runtime when it booted up. * These JS modules were used to tweak the configuration of a given Blazor Runtime or perform additional initialization of JS libraries on the page. * Since Blazor Web can have multiple runtimes running simultaneously on the page at the same time (server and webassembly), libraries can run into issues like initializing the wrong runtime, running initialization multiple times, or having to wait until we initialize a runtime to apply custom styles and other logic that might be necessary for the correct function of their libraries. * This PR addresses that by defining runtime specific extension points that libraries can use to tweak a concrete runtime when it boots as well as an initial extension point to target Blazor Web specific scenarios that don't involve a runtime. Fixes #50187 ## Customer Impact * Existing libraries with initializers won't be initialized until an interactive component is rendered on the page. * Initialization logic might run more than once for existing libraries, causing all sorts of unpredictable side effects. * For example, double initialization. ## Regression? - [ ] Yes - [X] No It's not a regression in the sense that Blazor Web is a new scenario, but a feature that library authors depend on (for example the Fluent UI Blazor components library does) will not work reliably in this scenario. ## Risk - [ ] High - [ ] Medium - [X] Low The fix is an extension to the existing mechanism to give library authors a path forward. The previous mechanism is disabled by default in Blazor Web scenarios and this fix gives library authors a path forward to make the feature work reliably here. In addition to that, with this fix app developers are not blocked on library authors updating their packages to work on Blazor web, as they can author adapters for the initializers within their apps that use the extension defined by the fix. ## Verification - [ ] Manual (required) - [X] Automated ## Packaging changes reviewed? - [ ] Yes - [ ] No - [X] N/A ---- ## When servicing release/2.1 - [ ] Make necessary changes in eng/PatchConfig.props

이쪽은 VS Preview의 템플릿 생성 가독성 관련 제안 인 듯 해요.

github.com/dotnet/aspnetcore

Blazor Web project interactive options improvements. Rename render modes.

dotnet:release/8.0 ← dotnet:stevesa/project-interactive-at-root

opened 03:55PM - 13 Sep 23 UTC

SteveSandersonMS

+725 -345

Fixes https://github.com/dotnet/aspnetcore/issues/50433 (Add root level interact…ivity option) Fixes https://github.com/dotnet/aspnetcore/issues/50646 (Remove workaround for Counter component) Fixes https://github.com/dotnet/aspnetcore/issues/50636 (Clarify the names of the interactive render modes) In terms of the code we now emit, there should be nothing controversial here. The template just has to do quite a bit of if/else in many places to account for all these options and how rendermodes are used and not used based on them. The PR is big because the renames have really wide impact, but almost all the "files changes" are just due to renames. The only real code changes are in the project templates. # Testing impact Adding this option, the BlazorWeb template now has **so many** possible combinations of options, including: - Whether or not to enable Server interactivity - Whether or not to enable WebAssembly interactivity - Whether or not to be interactive from the root - Whether or not to include sample content - Whether or not to use ProgramMain So that's around 32 combinations of output - without even accounting for auth options! We don't currently have E2E verification of any of them, as those tests are skipped due to unreliability. We're going to have to lean hard on CTI validations for this, and make sure all the important combinations are covered - cc @mkArtakMSFT. # Options design update Having a list of 6 separate checkboxes in VS is pretty unpleasant and hard to understand: <img src="https://github.com/dotnet/aspnetcore/assets/1101362/93713e83-0793-4140-82e1-95ca63580e3d" width="500" /> So, in this PR I'm proposing (and have implemented, but we can still change it), a change to use dropdowns for the interactivity type and location options. This reduces the number of inputs by one, and means they can be more self-describing: <img src="https://github.com/dotnet/aspnetcore/assets/1101362/649c93fd-d464-499c-b1f2-36436ebf4e3c" width="500" /> * The "interactivity type" choices are: * **None** * **Server** (default) * **WebAssembly** * **Auto (Server and WebAssembly)**. * The "interactivity location" choices are: * **Per page/component** (default) * **Global** Note that "interactivity location" is disabled if interactivity type == "None", but [only CLI honors that right now](https://github.com/dotnet/templating/issues/5648) (VS should add support later, and until then, location will have no effect if there's no interactivity). I think this is much easier to understand, since you no longer have to infer that enabling both Server and WebAssembly means you're going to get Auto. It's also much better in the CLI, since it was completely ridiculous before that `--use-server` defaulted to true but `--use-wasm` defaulted to false, so to get WebAssembly you needed to set `--use-server false --use wasm`. Now you would say `--interactivity webassembly` (and not `wasm` - that was weird too). ![image](https://github.com/dotnet/aspnetcore/assets/1101362/0b4751ad-f91b-4bac-8edf-9e31aa761fbf)

음, 그렇다면 RC2가 릴리즈 되면 해당 증상이 해결되었는지 확인 해봐야겠군요.

suwoo · 10월 25, 2023, 1:18오전

약간 Blazor Template 자체의 문제와 겹치는 분이 많은 것 같아
이 이상 여기 붙이는 건 정보의 범람 같기도 하고,
제 경험담 공유를 위해 글을 따로 작성해보았습니다.

Blazor 홀로서기 🧵 Slog

FluentUI 사용하기 / dotnet8 blazorapp InteractiveMode Microsoft FAST 소개 Fast Blazor 적응기 - slog 연관된 글은 이쪽입니다. 정확히는 https://forum.dotnetdev.kr/t/fast-blazor-slog/5946/31?u=suwoo 이 링크에 대한 해결책에 가깝습니다. 어쩌면 중복된 내용이 더 많을 수도 있겠습니다. 이 글은 먼저 시도해본, Blazor Web App - InteractiveServer Mode 입니다. 닷넷 8 버전에 와서 템플릿 구조가 살짝 바뀌었어요. (물론 기존 프로젝트도 정상 작동합니다.) 닷넷 8 부터 외부 js 파일을 추가하고, html 문서의 Header가 포함되던 _Layout.cshtml 가 감쪽같이 없어졌지요? 해당 내용은 app.razor로 이동되었습니다. 헌데, <component type="typeof(HeadOutlet)" render-mo…

먼저 이런 시도를 하게 해주신 양질의 글쓴이 여러분 너무 고맙습니다!