Blazor ํ™€๋กœ์„œ๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”!

Blazor ๊ด€๋ จํ•ด ์ƒ๊ธด ์˜๋ฌธ์ ์ด๋‚˜, ๊ฐœ์ธ์ ์œผ๋กœ ์Šค์Šค๋กœ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ•˜๋Š” ์ด์Šˆ๋“ค์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๊ณ 
๊ฒฐ๊ณผ๋ฅผ ์ ์–ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
์ œ๊ฐ€ ๋ฌด์–ธ๊ฐˆ ๊พธ์ค€ํžˆ ์ž˜ ํ•˜์ง€ ๋ชปํ•ด์„œ ์–ผ๋งˆ๋‚˜ ์™„์„ฑ์ด ๊ฐ€๋Šฅํ•  ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ
์ž‘์‹ฌ์‚ผ์ผ์„ ์„ธ ๋ฒˆ ์”ฉ ํ•˜๋ฉด ํ•˜์ง€ ์•Š์„๊นŒ ํ•˜๋Š” ๋งˆ์Œ์œผ๋กœ ์‹œ๋„ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

  1. Blazor ๊ด€๋ จ ์ •๋ณด ์Šต๋“
  2. ๊ถ๊ธˆ์ฆ ๋ฆฌ์ŠคํŠธ์—… / ๋ฐ Self-Solve ํ•ด๋ณด๊ธฐ
  3. ํ˜„์žฌ ๊ตฌ๋งคํ•ด ๋†“์€ ๋„๋ฉ”์ธ์— ์„œ๋น„์Šค๋ฅผ ์˜ฌ๋ฆฌ๊ณ , ์œ„ ๋‚ด์šฉ ๊ด€๋ จ๋œ ๊ฒฝํ—˜๋‹ด์„ ๋ณด๊ด€ํ•  ์ˆ˜ ์žˆ๋Š” ์ปจํ…์ธ  ์ •๋ฆฌํ•ด๋ณด๊ธฐ.

์ •๋„๊ฐ€ ํ˜„์žฌ ์ด ๊ธ€ ์ž‘์„ฑ ํ•  ๋‹น์‹œ์˜ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

ํ˜น์‹œ๋‚˜ ๋ณด์‹œ๋‹ค๊ฐ€ ํ‹€๋ฆฐ์ /๋ณด์™„ํ•  ์  ์€ ๋‹น์—ฐํžˆ ๋ง์”€ํ•ด์ฃผ์…”๋„ ๋ฉ๋‹ˆ๋‹ค. ์•„๋‹ˆ ๋ถ€ํƒํ•ฉ๋‹ˆ๋‹ค! ใ…Žใ…Žใ…Žใ…Ž

9 Likes

์‹œ์ž‘ ํ•˜๊ธฐ ์ „์—

์กฐ์‚ฌํ•ด ๋ณผ ๋‚ด์šฉ๋ถ€ํ„ฐ ๋ฆฌ์ŠคํŠธ-์—… ํ•ด ๋ณผ๊นŒ์š”?
์ด ๋ฆฌ์ŠคํŠธ๋Š” ์šฐ์„ ์ˆœ์œ„๋Š” ์•„๋‹ˆ๋ฉฐ, ์ข…์ข… ๊ณ„์† ์ถ”๊ฐ€๋  ๊ฒƒ ๊ฐ™๋„ค์š”.
์–ด์ฉŒ๋ฉด ์ด ์ด์Šˆ๋“ค์€ ๋ณ„๊ฐœ์˜ SLOG๋กœ ๋นผ์•ผ ํ•  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ ๊ธฐ์ค€ ๋ฒ„์ „์€ dotnet 8.0.1-rc2 ์ž…๋‹ˆ๋‹ค.

  • FluentUI๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ / dotnet8 blazorapp InteractiveMode
  • Tailwind CSS๋ฅผ ์ ์šฉํ•ด๋ณด๊ธฐ.
  • Blazor App ํ…œํ”Œ๋ฆฟ / ๋ถ€์ œ : Client(์˜ˆ์ „์˜ WebAssembly)๊ฐ€ ์‹ ๊ธฐํ•ด์ง„(?) ๊ฑด
  • ํ˜„์žฌ ๋ฏธ๋‹ˆPC์— ์„ธํŒ… ๋œ IIS๊ฐ€ ์žˆ๋Š”๋ฐ, ์—ฌ๊ธฐ ์˜ฌ๋ฆด ๋•Œ์˜ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ตฌ์ƒ
  • Client Mode์—์„œ ์“ธ Authentication / Authorization ์ฆ‰ Identity์— ๊ด€ํ•˜์—ฌ
6 Likes

FluentUI ์‚ฌ์šฉํ•˜๊ธฐ / dotnet8 blazorapp InteractiveMode

Microsoft FAST ์†Œ๊ฐœ
Fast Blazor ์ ์‘๊ธฐ - slog
์—ฐ๊ด€๋œ ๊ธ€์€ ์ด์ชฝ์ž…๋‹ˆ๋‹ค.

์ •ํ™•ํžˆ๋Š”

์ด ๋งํฌ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์— ๊ฐ€๊น์Šต๋‹ˆ๋‹ค.
์–ด์ฉŒ๋ฉด ์ค‘๋ณต๋œ ๋‚ด์šฉ์ด ๋” ๋งŽ์„ ์ˆ˜๋„ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ๊ธ€์€ ๋จผ์ € ์‹œ๋„ํ•ด๋ณธ, Blazor Web App - InteractiveServer Mode ์ž…๋‹ˆ๋‹ค.
๋‹ท๋„ท 8 ๋ฒ„์ „์— ์™€์„œ ํ…œํ”Œ๋ฆฟ ๊ตฌ์กฐ๊ฐ€ ์‚ด์ง ๋ฐ”๋€Œ์—ˆ์–ด์š”.
(๋ฌผ๋ก  ๊ธฐ์กด ํ”„๋กœ์ ํŠธ๋„ ์ •์ƒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.)

๋‹ท๋„ท 8 ๋ถ€ํ„ฐ ์™ธ๋ถ€ js ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•˜๊ณ , html ๋ฌธ์„œ์˜ Header๊ฐ€ ํฌํ•จ๋˜๋˜ _Layout.cshtml ๊ฐ€ ๊ฐ์ชฝ๊ฐ™์ด ์—†์–ด์กŒ์ง€์š”?

ํ•ด๋‹น ๋‚ด์šฉ์€ app.razor๋กœ ์ด๋™๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
ํ—Œ๋ฐ,

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

์ด๊ฒŒ

<HeadOutlet/>

์ด๋ ‡๊ฒŒ ๋ฐ”๋€Œ์—ˆ์ง€์š”. ์–ด๋ผ?!???!??!
๊ฒŒ๋‹ค๊ฐ€, ์—ฌ๊ธฐ์— js๋ฅผ ์˜ฌ๋ ค๋„ ์ ์šฉ์ด ์•ˆ ๋˜๋Š” ํ˜„์ƒ์ด ์žˆ์–ด์„œ ์ œ๊ฐ€ ์—ฌ๊ธฐ ํ•˜์†Œ์—ฐ ํ–ˆ์—ˆ์ง€์š”.

์ด๊ฒŒ ์ด์ œ rc2๋ถ€ํ„ฐ ์ƒˆ๋กœ์šด ์˜ต์…˜์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ ๋ฆด๋ฆฌ์ฆˆ ๋•Œ์—๋Š”

<HeadOutlet @rendermode="InteractiveServer" />

๋กœ ๋ณ€๊ฒฝ๋œ๋‹ค๊ณ  ํ•˜๋‹ˆ ์ฐธ๊ณ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์„ค๋ช…์ด ์กฐ๊ธˆ ๋” ํ•„์š”ํ•œ๋ฐ์š”.
HeadOutlet ์ปดํฌ๋„ŒํŠธ์™€ Routes ์ปดํฌ๋„ŒํŠธ๋ฅผ InteractiveServer ๋ชจ๋“œ๋กœ ํ•˜๋ฉด
์˜ˆ์ „์˜ ๊ทธ Blazor Server ๊ทธ ๋ง›๊ณผ ๋˜‘๊ฐ™์€ ์ „์—ญ Interactive ๋ชจ๋“œ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋˜๋Š” ,
image
์ด ์Šคํฌ๋ฆฐ์ƒท๊ณผ ๊ฐ™์ด 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" />

์ด ๋ถ€๋ถ„์€ ์ด์ œ ์ž๋™์ƒ์„ฑ๋˜๋‹ˆ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š์œผ์…”๋„ ๋ฉ๋‹ˆ๋‹ค.
ํ—Œ๋ฐ, ํ”„๋กœ์ ํŠธ๋ช…์„ ๋ฐ”๊ฟ€๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ ๋˜์ง€๋Š” ์•Š์•„์„œ ํ•œ๋ฒˆ์”ฉ ์ฒดํฌ ํ•ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

5 Likes

Blazor App Template

๋ถ€์ œ : ClientSide(a.k.a. Blazor WebAssembly)๊ฐ€ ์‹ ๊ธฐํ•ด์ง„ ๊ฑด,

์ตœ๊ทผ ์‚ฌ์šฉํ•œ / ๋ฐฐํฌํ•œ ์„œ๋น„์Šค๋“ค์ด Blazor Server ๊ธฐ๋ฐ˜์„ ์‚ฌ์šฉํ–ˆ์–ด์„œ ํ•ด๋‹น ๋ถ€๋ถ„ ์œ„์ฃผ๋กœ๋งŒ ํ•˜๋‹ค๋ณด๋‹ˆ
Blazor WASM ๊ด€๋ จ๋œ ์ง€์‹์ด ๊ฝค ๋ฏธํกํ•œ ํŽธ์ด๋ผ ๋ง์”€๋“œ๋ฆฌ๊ธฐ์— ์•ž์„œ ์–‘ํ•ด(?) ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์˜ค์ž‰?!

๋ถ„๋ช… ๊ธฐ์กด blazor ์ƒ์„ฑ Template๋Š” ์ „๋ถ€ ๋”ฐ๋กœ๊ตญ๋ฐฅ์ด์—ˆ์ง€์š”.

ํ—Œ๋ฐ, dotnet8๋ถ€ํ„ฐ ํ•˜๋‚˜๋กœ ๋ญ‰์ณ์กŒ์Šต๋‹ˆ๋‹ค. ๋ ์šฉ!
image
(๋‹คํ–‰ํžˆ, ๊ธฐ์กด ํ…œํ”Œ๋ฆฟ๋„ ์•„์ง(Visual Studio 2022- 17.8.0 preview 4.0) ์‚ด์•„ ์žˆ์Šต๋‹ˆ๋‹ค.)

์ƒ์„ฑ ํ™”๋ฉด์€ ์œ— ๊ธ€์— ์•ž์„œ ๋ณด์—ฌ๋“œ๋ฆฐ ๋ฐ”์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ, ์—ฌ๊ธฐ์„œ ๋ฌธ๋“ ๋“  ์ƒ๊ฐ

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] ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋„ค์š”.

:bulb: [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>

5 Likes

๋‹ท๋„ท 8.0๋ถ€ํ„ฐ๋Š” ๋ธ”๋ ˆ์ด์ € WASM ์•ฑ์„ ๋“ฑํ•œ์‹œํ•˜๋Š” ๋Š๋‚Œ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋ ˆ์ด์ €๋ฅผ Asp.Net Core ํ”„๋ ˆ์ž„์›Œํฌ ์•„๋ž˜์— ๋ฌถ์–ด ๋‘๋ ค๋Š” ์†์…ˆ๊ฐ™์•„ ์‹ค ์•ฝ๊ฐ„ ์‹ค๋ง์ž…๋‹ˆ๋‹ค.

์–ธ์ œ๊นŒ์ง€ ํ’€์Šคํƒ๋งŒ ๊ฐ•์š”ํ•  ๊ฒƒ์ธ์ง€.

2 Likes

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. wasm ์œ„์ฃผ์˜ ํ”„๋ก ํŠธ๋ณด๋‹ค๋Š”
๋ง์”€ํ•˜์‹  ๋Œ€๋กœ ํ’€ ์Šคํƒ ์œ„์ฃผ๋กœ ๋ฐ€์–ด๋ณด๋ ค๋Š” ๋Š๋‚Œ์ด ๊ฐ•ํ•˜๊ฒŒ ๋Š๊ปด์ง‘๋‹ˆ๋‹ค.
์•„์‰ฌ์šด ๋ฉด๋„ ํฌ์ง€๋งŒ, ๋‹คํ–‰ํžˆ ์ €๋Š” ๊ทธ๋ž˜์„œ ์ œ ์ž…์žฅ์—์„  ์ ‘๊ทผํ•˜๊ธฐ ํŽธํ•˜๋‹ค๋Š” ๋Š๋‚Œ๋„ ๋“ค์—ˆ์–ด์š”.

3 Likes

์ œ ์งง์€ ์‹๊ฒฌ์— ์˜ํ•˜๋ฉด, Interactive ๊ธฐ๋Šฅ์„ ์ „๋ถ€ ๊บผ๋ฒ„๋ฆฐ WASM ๋ชจ๋“œ๊ฐ€
์ˆœ์ˆ˜ ํ”„๋ก ํŠธ ์šฉ์œผ๋กœ ์“ฐ๋ผ๊ณ  ํ•ด๋†“์€ ๊ฒŒ ์•„๋‹๊นŒ ํ•˜๋Š” ์ƒ๊ฐ๋„ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

2 Likes

๊ทธ๋ ‡๊ฒŒ ํ•ด๋ณด์‹œ๊ณ , publish ํ•œ๋ฒˆ ํ•ด๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.
(์ €๋Š” VS 2022 ํ”„๋ฆฌ๋ทฐ๋ฅผ ์ง€์› ์Šต๋‹ˆ๋‹ค)

ํผ๋ธ”๋ฆฌ์‹œ ๊ฒฐ๊ณผ๋ฌผ์— wwwroot ํด๋”๋งŒ ์กด์žฌํ•˜๋ฉด, ์ƒ๊ฐํ•˜์‹  ๋ฐ”๊ฐ€ ๋งž๊ณ  ์•„๋‹ˆ๋ฉด, ์•„๋‹Œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

3 Likes

๊ทธ๋ ‡๋‹ค๋ฉด ์•„์˜ˆ ๋ฐ”์ด๋„ˆ๋ฆฌ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค๋Š” ๋ง์”€์ด์‹ค๊นŒ์š”?
์ œ๊ฐ€ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ ๊ฐ™์•„ ์ถ”๊ฐ€์ ์ธ ์„ค๋ช… ๋ถ€ํƒ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

ํ˜น์€ ๋ธŒ๋ผ์šฐ์ € ์ชฝ์—์„œ ๋””๋ฒ„๊น… ํˆด ๋“ฑ์„ ํ†ตํ•ด wasm ์ž‘๋™ ์—ฌ๋ถ€๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์„๊นŒ์š”?
++ ๋‹ค๋ฅธํ”„๋กœ์ ํŠธ์—์„œ, ๋””๋ฒ„๊น… ํˆด์— ๋„คํŠธ์›Œํฌ์—์„œ wasm ์ฃผ๋ฅด๋ฅต ๋‚ด๋ ค๋ฐ›๋Š”๊ฒƒ ๊นŒ์ง„ ๋ณผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

2 Likes

๋ธ”๋ ˆ์ด์ € WASM ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ์„ ๊ฒŒ์‹œ(publish)ํ•˜๋ฉด, ๊ฒŒ์‹œ ํด๋”๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‹จ์ดํ•œ ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.

image

wwwroot/ ์— ์ •์ ์ธ ํŒŒ์ผ๊ณผ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋“ค์ด ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ํŒŒ์ผ๋“ค์„ ์›น์„œ๋ฒ„๋กœ ๋ณต์‚ฌํ•˜๋ฉด ์ •์  ํ˜ธ์ŠคํŒ…์ด ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜, ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„๋Š” ์›น์•ฑ์ด๊ธฐ ๋•Œ๋ฌธ์— ์‹คํ–‰ํŒŒ์ผ์ด ๊ฒŒ์‹œ ํด๋”์— ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

3 Likes

์•„, ์งˆ๋ฌธ๋“œ๋ฆฐ ๋ฐฉ๋ฒ•์ด ๊ทธ๊ฒŒ ๋งž์•˜๊ตฐ์š”. ๋‹คํ–‰ํžˆ ์˜ˆ์ƒ ๊ฐ€๋Šฅํ•œ ๋ฒ”์œ„์—์„œ ์งˆ๋ฌธ๋“œ๋ฆฐ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์ œ๊ฐ€ ์ด๊ฒƒ ์ €๊ฒƒ ๋งˆ์ € ๋” ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

++
ํ˜น์‹œ๋‚˜ ํ•˜๋Š” ๊ธฐ๋Œ€๊ฐ์— ๋ง์”€ ๋“œ๋ฆฐ ๊ฑฐ์˜€๋Š”๋ฐ, ์—ญ์‹œ๋‚˜ @BigSquare ๋‹˜์˜ ๋ง์”€์ด ๋‹น์—ฐํ•˜๋‹ค๋Š” ๋“ฏ์ด ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์™”๋„ค์š”.
์ด๋ฒˆ ์ƒˆ ํ…œํ”Œ๋ฆฟ์€ Interactive WASM์ด๊ธฐ๋•Œ๋ฌธ์— Server-Client๋กœ๋งŒ ์“ฐ๋Š” ๊ฒƒ ๊ฐ™๋„ค์š”.
์˜คํžˆ๋ ค Server App์— ๊ฐ€๊นŒ์šด ๋ชจ์Šต์ด ๋งž๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋ฐฐํฌ๋ฅผ ํ•ด ๋ด๋„ ๋‹น์—ฐํ•˜๋‹ค๋Š” ๋“ฏ์ด ๋ฐ”์ด๋„ˆ๋ฆฌ๊ฐ€ ํŠ€์–ด๋‚˜์˜ค๊ตฌ์š”.

์•ˆ ๊ทธ๋ž˜๋„ โ€œindex.html์ด ๋‚˜์˜ค์ง€ ์•Š์•„์š”! ์งฑ ์‹ ๊ธฐํ•ด์š”โ€
๊นŒ์ง€๊ฐ€ ์œ„์— ์ž‘์„ฑํ•˜๋˜ ํฌ์ŠคํŠธ์˜ ๋ฉ”์ธ ์ฃผ์ œ ์˜€๋Š”๋ฐ,
ํ—‰, ์„ธ์ƒ์—๋‚˜โ€ฆ ์ด๋ฏธ ์ œ ๋งฅ๋ฝ์„ ํŒŒ์•…ํ•˜๊ณ  ํ›… ๋“ค์–ด์˜ค์‹œ๋Š”โ€ฆ ์—ญ์‹œ ๊ณ ์ˆ˜์˜ ๋ˆˆ์ฐ๋ฏธ์‹œ๊ตฐ์š”โ€ฆ

4 Likes

.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์—๋Ÿฌ๊ฐ€ ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค.

5 Likes

์•„, ๋•๋ถ„์— ์•ฝ๊ฐ„ ๋” ํผ์ฆ์ด ๋งž์ถฐ์ง„ ๋Š๋‚Œ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
์ •๋ฆฌํ•ด์ฃผ์…”์„œ ๋„ˆ๋ฌด ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค ใ…Žใ…Žใ…Ž

๊ทธ๋ž˜์„œ ๋‚ด๋ถ€ ํŽ˜์ด์ง€์˜ notfound ์„น์…˜์ด ์—†์–ด์กŒ๋‚˜๋ณด๋„ค์š”.
DevExpress Blazor Component๋ฅผ ์‚ฌ์šฉ ํ•  ๋•Œ Blazor Enable WASM Feature๋ผ๊ณ  ํ•ด์„œ
Server์— ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๋„ฃ๋Š” ์„ ํƒ ํ•ญ๋ชฉ์ด ์žˆ์—ˆ๋Š”๋ฐ, ๋งˆ์น˜ ๊ทธ๊ฒƒ๊ณผ ๋น„์Šทํ•˜๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.
wasm์„ ์ด์šฉํ•ด server app์„ ๋ณด์™„ํ•˜๋Š” ๋Š๋‚Œ์ด๋ž„๊นŒ์š”?

๊ทธ๋ž˜์„œ ์‚ฌ์‹ค์ƒ ์ด๊ฑธ ๋ญ๋ผ๊ณ  ํ•˜๋ฉด ์ข‹์„๊นŒ์š”? ์ƒ๊ฐ๋‚˜๋Š”๊ฑด Hybrid์ธ๋ฐ,
๊ทธ ๋‹จ์–ด๋Š” ์ด๋ฏธ ์“ฐ๊ณ  ์žˆ๋„ค์š” ใ…Žใ…Žใ…Žใ…Ž

2 Likes

.net 8.0 ๋Š” ๋ธ”๋ ˆ์ด์ € ์•ฑ๋ผ๊ธฐ ๋ณด๋‹ค๋Š” ๋ ˆ์ด์ € ํŽ˜์ด์ง€(.cshtml)์— ๊ธฐ๋ฐ˜ํ•œ ์›น์•ฑ์œผ๋กœ ํšŒ๊ท€ํ•œ ๋Š๋‚Œ์ž…๋‹ˆ๋‹ค.
404 ์—๋Ÿฌ ๋“ฑ, ๋™์ž‘ ๋ฐฉ์‹์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

4 Likes

.NET 7 Blazor server์—์„œ SignalR์˜ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ๊ตฌ์กฐ์— ํ•œ๊ณ„๊ฐ€ ๋Š๊ปด์ ธ์„œ
(์„œ๋ฒ„ ๋‹ค์šดํ•˜๋ฉด ์›นํŽ˜์ด์ง€์—์„œ๋„ ์—ฐ๊ฒฐ ๋Š๊ฒจ์„œ ์žฌ์ ‘์†์ค‘ ๋ฉ”์‹œ์ง€ ํ‘œ์‹œโ€ฆ)

WASM์œผ๋กœ ๋‹ค์‹œ ์ž‘์„ฑํ•  ์ƒ๊ฐ์ด์—ˆ๋Š”๋ฐ .NET 8๋ถ€ํ„ฐ๋Š” ๋˜ ๋ฐ”๋€Œ์—ˆ๊ตฐ์š”?!

๋งํ• โ€ฆ

2 Likes

์ƒˆ ํ…œํ”Œ๋ฆฟ์ด ์ถ”๊ฐ€๋œ ๊ฒƒ ๋ฟ์ด๋ผ
(์ผ๋‹จ์€) ๊ธฐ์กด ํ…œํ”Œ๋ฆฟ ๋Œ€๋กœ ์“ฐ์‹œ๋ฉด ์ •์ƒ์ ์œผ๋กœ ๊ธฐ๋Œ€ ๋œ ์ž‘๋™์„ ํ•ฉ๋‹ˆ๋‹คโ€ฆ๋งŒ
์ด๊ฒŒ ์ •์ฑ…์„ ์–ด๋–ป๊ฒŒ ํ•  ์ง€๋Š” ์ง€์ผœ๋ด์•ผ ํ•  ๋“ฏ ํ•˜๋„ค์š”.

2 Likes

์ œ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์œผ๋กœ๋Š” blazor web app์ด blazor server๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๋‚˜์•„๊ฐ€์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.
wasm์˜ ๊ฒฝ์šฐ ๊ด€๋ จํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ๋งŒ ๋ฐ›๋Š”๋‹ค๋ฉด ๋…๋ฆฝ์‹คํ–‰์ด ๊ฐ€๋Šฅํ•œ ํ˜•ํƒœ๋ผ์„œ ๊ตณ์ด aps.net core ํ˜ธ์ŠคํŒ…์ด ์•„๋‹ˆ๋”๋ผ๋„ CDN์ด๋‚˜ ๋‹ค๋ฅธ ์›น์„œ๋ฒ„์‹œ์Šคํ…œ์„ ์ด์šฉํ•˜์—ฌ ํ˜ธ์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•˜๋‹ˆ๊นŒ์š”โ€ฆ

3 Likes

.net 8.0 ์˜ interactivity ๋Š” ๋ธ”๋ ˆ์ด์ € ์„œ๋ฒ„์˜ ๊ทธ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

SignalR ์€ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๊ฐ€ ๋‹ค์šด๋กœ๋“œ๋˜๊ธฐ ์ „์—๋งŒ ๋™์ž‘ํ•˜๊ณ , ์ผ๋‹จ ๋‹ค์šด์ด ์™„๋ฃŒ๋˜๋ฉด, ๊ทธ ๋‹ค์Œ๋ถ€ํ„ฐ๋Š” wasm ์ด ์ฒ˜๋ฆฌํ•˜๋‹ˆ, ์žฌ์ ‘์† ํ™”๋ฉด์ด ๋‚˜์˜ค์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋งŒ์•ฝ ๊ทธ๋ ‡๋‹ค๋ฉด, ํ•œ ๋‹จ๊ณ„ ์„ฑ์ˆ™ํ•œ ๊ธฐ์ˆ ์  ์ง„๋ณด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹ค๋งŒ, ์ œ๊ฐ€ ๊ฐ€์ง„ ๋ถˆ๋งŒ์€ ์™œ ์ž๊พธ ๋น„์‹ผ ๋ฐฉ์‹ - ์›น์•ฑ ํ˜ธ์ŠคํŒ… ๋น„์šฉ์„ ์ง€๋ถˆํ•ด์•ผ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ๋งŒ ๋ฐœ์ „ํ•˜๋ƒ๋Š” ๊ฒƒ์ด์ฃ .

3 Likes

์ €๋„ ๊ทธ๊ฒŒ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์ €๋งŒ์˜ ์ฐฉ๊ฐ์ผ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์œผ๋‚˜
Blazor์—์„œ wasm / server๋ผ๋Š” ์„ ํƒ์ง€๋ฅผ ๋‚จ๊ฒจ๋‘๊ณ , wasm์„ ์ข€ ๋ฐœ์ „์‹œ์ผœ ๋‚˜๊ฐ€๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์˜€๋Š”๋ฐโ€ฆ
Blazor์˜ ๋ฐฉํ–ฅ์ด ๋ฐ”๋€๊ฑด์ง€โ€ฆ ์•„๋‹ˆ๋ฉด ๊ทธ ์˜๋„๋Œ€๋กœ wasm์„ ๋ฐœ์ „์‹œํ‚ค๊ณ  ์žˆ๋Š”๊ฑด์ง€ (hybrid๊ฐ€ ํƒ„์ƒํ–ˆ์œผ๋‹ˆ๊นŒ)

3 Likes