Fast Blazor ์ ์‘๊ธฐ - slog

์•„๋‹™๋‹ˆ๋‹ค. ํ›Œ๋ฅญํ•˜๋„ค์š”โ€ฆ ๊ด€๋ จ ๊ฒฝํ—˜์„ ๋ธ”๋กœ๊ทธ ๊ธ€๋กœ ๊ณต์œ  ์ฃผ์‹œ๋ฉด ๋„์›€์ด ๋งŽ์ด ๋  ๋“ฏ ํ•ฉ๋‹ˆ๋‹ค.

3 Likes

์š”์ปจ๋Œ€ ์ต์ˆ™ํ•ด์ง€๊ธฐ ํŽธํ•œ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ๋งŒ ์ œ๊ณตํ•˜๊ณ ,
์˜ˆ์˜๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฑด ๊ฒฐ๊ตญ css๋กœ ์žก์•„์ค˜์•ผ ํ•˜๋Š”๊ฑฐ๊ตฐ์š”?

์Œ, ์˜คํžˆ๋ ค ๊ทธ๊ฒŒ ๋” ๊น”๋”ํ•˜๊ฒŒ ๋ณด์ผ ์ˆ˜๋„ ์žˆ๊ฒ ๋„ค์š”.
์ • ์•ˆ๋˜๋ฉด ์˜ˆ์œ css ๊ตฌํ•ด๋‹ค ๋ถ™์—ฌ๋ฒ„๋ ค๋„ ๋˜๊ณ ,
๋‹จโ€ฆ @_jeonghwan ๋‹˜๊ป˜์„œ ์ •๋ฆฌํ•ด์ฃผ์‹  ๊ฒƒ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๊ฒ ๋„ค์š”.

2 Likes

CSS์—์„œ flex์™€ grid๊ฐ€ ์–ด๋Š์ •๋„ ์ด์ˆ™ํ•ด์ง€๋‹ˆ <Stack> ๋“ฑ์˜ ๋ ˆ์ด์•„์›ƒ ๊ด€๋ จ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฑฐ์ถ”์žฅํ•ด์กŒ์Šต๋‹ˆ๋‹ค. class ๋˜๋Š” style์ด ์•„๋‹Œ ๋ณ„๋„์˜ ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ด์„œ ๊ตฌ์กฐ๊ฐ€ ์ข€ ๋” ๋ณต์žกํ•ด์ง€๋Š” ์ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ •๋„ ๋˜๋‹ˆ HTML-CSS ์‚ฌ์ƒ โ€“ ๋ฌธ์„œ์™€ ์Šคํƒ€์ผ์„ ๊ตฌ๋ณ„ํ•˜๋Š” ์ ‘๊ทผ๋ฒ•์ด XAML ๊ตฌ์กฐ ๋ณด๋‹ค ์ข‹์•„๋ณด์ด๋Š” ์ ๋„ ์ƒ๊น๋‹ˆ๋‹ค. (๋ ˆ์ด์•„์›ƒ์„ ๋น ๋ฅด๊ฒŒ ํƒœ๊ทธ๋กœ ์žก๊ณ  ์Šคํƒ€์ผ์„ ๋จน์—ฌ๊ฐ€๋Š” ์žฌ๋ฏธ๋„ ์ข€ ์ฐจ์ด๊ฐ€ ๋‚ฉ๋‹ˆ๋‹ค)

4 Likes

์ œ๊ฐ€ ์„ธํŒ…์„ ์ž˜ ๋ชป ํ•ด์„œ ๊ทธ๋Ÿฐ์ง€๋Š” ๋ชฐ๋ผ๋„,
๋‹ท๋„ท 8.0์—์„œ ์ƒˆ๋กœ ๋ฐ”๋€ blazor์˜ ๊ธฐ๋ณธ template๊ณผ ํ˜ธํ™˜์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์•„์š”.

์‹ฌ์ง€์–ด ๊ฐ™์€ ๋Ÿฐํƒ€์ž„ ์กฐ๊ฑด ํ•˜์—์„œ, fast ์ „์šฉ, ์ฆ‰ FluentUI ํ…œํ”Œ๋ฆฟ์œผ๋กœ ์ƒ์„ฑํ•˜๋ฉด ์ž˜ ์ž‘๋™ ํ•ฉ๋‹ˆ๋‹ค๋งŒ,
8 ๋ฒ„์ „์ด ์•„๋‹ˆ์—ˆ์„ ๋•Œ์˜ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ์ƒ์„ฑํ•ด์„œ ๊ทธ๋Ÿฐ๊ฐ€ ๋ด์š”.

2 Likes

์ œ๊ฐ€ ํ…Œ์ŠคํŠธ ํ–ˆ์„ ๋•Œ๋Š” ์ž˜ ๋˜์—ˆ๋Š”๋ฐ์š”, ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณต์œ  ๊ฐ€๋Šฅ ํ• ๊นŒ์š”?

3 Likes

ํ™•์‹คํžˆ 8.0์˜ ๊ธฐ๋ณธ Blazor ํ…œํ”Œ๋ฆฟ์œผ๋กœ๋Š” ์ •์ƒ ์ž‘๋™์ด ๋˜์งˆ ์•Š๋„ค์š”.
์Šฌํ”„๊ฒŒ๋„, ๊ธฐ๋ณธ css ์กฐ์ฐจ๋„ ๋จน์งˆ ์•Š์•„์š”.
css ๊ฒฉ๋ฆฌ ๋•๋ถ„์ธ์ง€, Bootstrap ์Šคํƒ€์ผ๋„ ๋จนํ†ต!
image

์›๋ž˜ ๊ธฐ์กด Blazor Server Template์€,
Package ์ถ”๊ฐ€๋งŒ ํ•ด๋„ ๋ฒ„ํŠผ์ด ์ž‘๋™ ํ•˜๊ฑฐ๋“ ์š”.
(js import ์กฐ์ฐจ ํ•˜์ง€ ์•Š์•„๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ด์ „ ๋ฒ„์ „ ํŒจํ‚ค์ง€์—์„œ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•  ๊ฒฝ์šฐ js ๋ฐฐ๋‹ฌ ์˜ต์…˜์„ ๋„๋ผ๋Š” ๊ถŒ์žฅ์ด ์žˆ์–ด์š”.)
image

์•„๋ฌด๋ž˜๋„ 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)]
4 Likes

๊ทธ๋ž˜์„œ ํ˜น์‹œ๋‚˜ ์‹ถ์–ด์„œ
Fast.UI ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ์ƒ์„ฑ ํ…œํ”Œ๋ฆฟ์„ ์จ๋ดค์Šต๋‹ˆ๋‹ค.
image
์‚ฌ์‹ค, Server App์ด๋ผ๋Š” ๋‹จ์–ด ์ž์ฒด๊ฐ€ 8.0์—์„œ ๋ณ€ํ–ˆ์–ด์š”.
์„œ๋ฒ„ ์•ฑ ์—์„œ ์›น์•ฑ ์„ ํƒ ํ›„ โ€œ์„ ํƒํ˜• ์„œ๋ฒ„ ๊ธฐ๋Šฅ ์ถ”๊ฐ€โ€ ์„ ํƒ์œผ๋กœ ๋ฐ”๋€Œ์—ˆ๊ฑฐ๋“ ์š”.
๊ทธ๋Ÿฌ๋‹ˆ๊นŒ, ์ด๋ฏธ ํ…œํ”Œ๋ฆฟ ์ด๋ฆ„ ๋ถ€ํ„ฐ ์˜ˆ์ „ ๋ฒ„์ „ ๊ธฐ๋ฐ˜์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์†”๋ฃจ์…˜ ํŒŒ์ผ ๊ตฌ์กฐ ๋ณด์‹œ๋ฉด Shared๋„ ์žˆ๊ณ , _Host.cshtml์ด ์žˆ๋Š”๊ฑธ ๋ณด๋ฉด
๊ธฐ์กด ํ…œํ”Œ๋ฆฟ์— ๋‹ท๋„ท ๋ฒ„์ „๋งŒ ์˜ฌ๋ฆฐ ๋ชจ์–‘์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”.

๊ทธ๋ ‡๋‹ค๋ฉด ๋ฌด์—‡์ด ๋ฌธ์ œ์ผ๊นŒ์š”?
์ผ๋‹จ, ํŒจํ‚ค์ง€์— ํฌํ•จ๋œ ๊ธฐ๋ณธ js ๊ฒฝ๋กœ๋ถ€ํ„ฐ ์ผ๋‹จ ๋งž์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™๊ณ ์š”.
๊ทธ๋Ÿฐ๋ฐ ์ด ๋ถ€๋ถ„์€ _content/ ๊ฐ€์ƒ ๊ฒฝ๋กœ์— ์ƒ์„ฑ๋˜๋Š” ์นœ๊ตฌ๋ผ, ์ œ๊ฐ€ ์ œ์–ด ํ•  ์ˆ˜ ์žˆ์„์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋„ค์š”.
ํŒŒ์ผ ๊ตฌ์กฐ๊ฐ€ ๋ฐ”๋€ ํƒ“์ด ์ œ์ผ ํฐ ๊ฒƒ ๊ฐ™์€๋ฐ ๋ง์ด์ฃ .

๊ทธ๋ž˜์„œ ๋‚จ์€ ์‚ฌํ•ญ ์‹œ๋„ ๋ฐฉ๋ฒ•์ด
npm์—์„œ fast ํŒจํ‚ค์ง€๋ฅผ ์ง์ ‘ ๋ฐ›์•„์„œ css ๋นŒ๋“œ๋ฅผ ํ•˜๊ณ ,
js๋ฅผ ์ง์ ‘ ๋•ก๊ฒจ ์“ฐ์ž ์ •๋„์ธ๋ฐ,

๊ตณ์ด ์ด๋ ‡๊ฒŒ๊นŒ์ง€ ํ•ด์•ผ ํ•˜๋‚˜โ€ฆ?

๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ ์ž ๊น ๋ฉˆ์ถ˜ ์ƒํƒœ์ž…๋‹ˆ๋‹ค.

์ œ ๊ฐœ์ธ ๋„๋ฉ”์ธ ๋ฉ”์ธ ํŽ˜์ด์ง€๋ฅผ ์‹ค์Šต๋„ ํ•ด๋ณผ ๊ฒธ blazor ์ƒˆ ๋ฒ„์ „์œผ๋กœ ํ•ด๋ณด๋ ค๋‹ค๊ฐ€,
์ด๋Ÿฐ ์ฐธ์‚ฌ๋ฅผ ๊ฒช๊ฒŒ ๋˜๋„ค์š” :frowning:

+++

์•„ ์ฐธ, ์ด ์ฃผ์†Œ๋Š”

Fluent UI Blazor components (fluentui-blazor.net)
์—ฌ๊ธฐ๋กœ ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ์ด ๋˜์—ˆ๋”๋ผ๊ณ ์š”!
ํ˜น์‹œ ๋ฐ๋ชจ ๋ณด์‹ค ๋ถ„ ๊ณ„์‹œ๋ฉด ์ฐธ๊ณ  ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

4 Likes

Blazor Webassembly๋กœ ํ…Œ์ŠคํŠธํ–ˆ์„ ๋•Œ๋Š” ์ž˜ ๋˜์—ˆ์–ด์„œโ€ฆ

@suwoo ํ…Œ์ŠคํŠธํ•œ ํ…œํ”Œ๋ฆฟ์ด Blazor ์›น์•ฑ ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ์ด๊ตฐ์š”! ์ €๋„ ํ•ด๋ดค๋Š”๋ฐโ€ฆ ์•ˆ๋˜๋„ค์š”.
์•„๋งˆ๋„ ๋ Œ๋”๋ง ํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ฌ๋ผ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™์€๋ฐ์š”, ์•ˆ๋˜๋Š” ๊ฒƒ์ด ๋งž๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Blazor ์›น์•ฑ์—์„œ ์„œ๋ฒ„ ๋ Œ๋”๋ง ๋˜๋Š” ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง์„ ๊ฐ๊ฐ ๋”ฐ๋กœ ์„ ํƒํ•ด์„œ ํ…Œ์ŠคํŠธ๋ฅผ ์ €๋„ ํ•ด๋ณผ๊ป˜์š”

3 Likes

์„œ๋ฒ„, ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ํ˜ผํ•ฉํ•˜์ง€ ์•Š๊ณ  (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์„ ์ œ๊ฑฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

3 Likes

๋‹ต๋ณ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
์ €๋„ ํ•œ๋ฒˆ ๋‹ค์‹œ ํ•ด๋ณผ๊ฒŒ์š”!

image
์žฌ๋ฏธ์žˆ๊ฒŒ๋„, ๋ฒ„ํŠผ css ์ ์šฉ์ด ์•ˆ ๋œ ์ฑ„๋กœ ํด๋ฆญ ์ด๋ฒคํŠธ๋Š” ๋ฐœ์ƒํ•˜๋„ค์š”.

3 Likes

์‹ ๊ธฐํ•˜๋„ค์š”. ์Šคํƒ€์ผ์„ ๋ณด๋‹ˆ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์€ ์ ์šฉ์ด ๋œ ๋“ฏ ํ•œ๋ฐ์š”, (reboot.css ์Šคํƒ€์ผ์ผ ์ˆ˜๋„ ์žˆ์–ด์š”) ๋ฒ„ํŠผ ์–ด๋””๊ฐ”์ง€;;;

3 Likes

@suwoo ํ™•์ธํ•ด๋ณด๋‹ˆ Blazor ์›น์•ฑ ํ˜ผํ•ฉ ๋ชจ๋“œ์—์„œ๋„ ๋™์ž‘์„ ์ž˜ ํ•ฉ๋‹ˆ๋‹ค. ์•ˆ๋œ๋‹ค๊ณ  ํ•˜์…”์„œ ๊ธ‰ํ•˜๊ฒŒ ํ…Œ์ŠคํŠธ ํ•˜๋‹ค๋ณด๋‹ˆ ์ž˜๋ชป ํ™•์ธํ•˜์˜€๋„ค์š”. ์—ญ์‹œ ์ž˜ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ„๋‹จํžˆ ํ…Œ์ŠคํŠธํ•œ ์ฝ”๋“œ ๊นƒํ—ˆ๋ธŒ๋กœ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.

3 Likes

์•„ ์ด์ƒํ•œ ๊ฒŒ ์žˆ๋„ค์š”. ํ˜ผํ•ฉ ๋ชจ๋“œ์—์„œ prerendering ์‹œ Badge๊ฐ€ ์ด์ƒํ•˜๊ฒŒ ์ถœ๋ ฅ๋˜๋„ค์š”! ์ด๊ฒƒ Fast Blazor ํŒ€์—๊ฒŒ ๋ฌธ์˜๋ฅผ ํ•ด๋ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

3 Likes
2 Likes

์ œ๊ฐ€ ๊ฒช์€ ๊ฒƒ๊ณผ ๊ฑฐ์˜ ๊ฐ™์€ ์ฆ์ƒ์ธ ๋“ฏ ํ•˜์—ฌ ๋งํฌ ๊ฑธ์–ด ๋ด…๋‹ˆ๋‹ค ใ…Žใ…Ž ใ… ใ… 

RC2๊นŒ์ง€ ์ด์Šˆ๋ฅผ block ํ•œ๋‹ค๊ณ  ํ•˜๋„ค์š”.

Hi,

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

2 Likes

์ € ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” 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 ๊ฒฉ๋ฆฌ๊ฐ€ ์ฒ˜๋ฆฌ๋œ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

2 Likes

๋„ต! ์‚ฌ์šฉ ํ•˜์‹  ๋ฐฉ๋ฒ•์ด ๋งž์Šต๋‹ˆ๋‹ค.
7.0๊ธฐ์ค€์œผ๋กœ๋Š” ๋ณ„ ๋ฌธ์ œ ์—†์ด ์ž‘๋™๋ฉ๋‹ˆ๋‹ค.

  • 8.0์—์„  ์ € cssํŒŒ์ผ ์ฐธ์กฐ๊ฐ€ ์ž๋™์œผ๋กœ ๋“ค์–ด๊ฐ€์š”.
2 Likes

๊ทธ๋ ‡๊ตฐ์š”~~^^

2 Likes

๋‚ด์šฉ ์ฌ๋” ๋ง๋ถ™์ž…๋‹ˆ๋‹ค.

์ด ์ด์Šˆ๋ฅผ ๋ณด๋ฉด ์ €์™€ ๊ฐ™์€ ์ฆ์ƒ์œผ๋กœ ๊ณ ํ†ต ๋ฐ›๋Š”(?)๋ถ„๋“ค์ด ๊ฝค ์žˆ์—ˆ๋Š”๋ฐ์š”,

ํ•ด๋‹น ์ด์Šˆ ํ•ด๊ฒฐ๋˜๋Š” ๋ณ€๊ฒฝ์ ์ด Merge ๋œ ๊ฑธ๋กœ ๋ณด์ด๋„ค์š”!

์ด์ชฝ์€ VS Preview์˜ ํ…œํ”Œ๋ฆฟ ์ƒ์„ฑ ๊ฐ€๋…์„ฑ ๊ด€๋ จ ์ œ์•ˆ ์ธ ๋“ฏ ํ•ด์š”.

์Œ, ๊ทธ๋ ‡๋‹ค๋ฉด RC2๊ฐ€ ๋ฆด๋ฆฌ์ฆˆ ๋˜๋ฉด ํ•ด๋‹น ์ฆ์ƒ์ด ํ•ด๊ฒฐ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ ํ•ด๋ด์•ผ๊ฒ ๊ตฐ์š”.

3 Likes

์•ฝ๊ฐ„ Blazor Template ์ž์ฒด์˜ ๋ฌธ์ œ์™€ ๊ฒน์น˜๋Š” ๋ถ„์ด ๋งŽ์€ ๊ฒƒ ๊ฐ™์•„
์ด ์ด์ƒ ์—ฌ๊ธฐ ๋ถ™์ด๋Š” ๊ฑด ์ •๋ณด์˜ ๋ฒ”๋žŒ ๊ฐ™๊ธฐ๋„ ํ•˜๊ณ ,
์ œ ๊ฒฝํ—˜๋‹ด ๊ณต์œ ๋ฅผ ์œ„ํ•ด ๊ธ€์„ ๋”ฐ๋กœ ์ž‘์„ฑํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

๋จผ์ € ์ด๋Ÿฐ ์‹œ๋„๋ฅผ ํ•˜๊ฒŒ ํ•ด์ฃผ์‹  ์–‘์งˆ์˜ ๊ธ€์“ด์ด ์—ฌ๋Ÿฌ๋ถ„ ๋„ˆ๋ฌด ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค!

3 Likes