Aspnetcore: Razor ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ด๋ฆ„์„ ์„œ๋ฒ„ ์ธก Blazor๋กœ ๋‹ค์‹œ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2019๋…„ 03์›” 29์ผ  ยท  50์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dotnet/aspnetcore

์ฒ˜์Œ์— Blazor 0.5.0์—์„œ Blazor ์„œ๋ฒ„ ์ธก ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์„ ๋„์ž…ํ•œ ๋‹ค์Œ ๋‚˜์ค‘์— .NET Core 3.0์—์„œ ์ œ๊ณตํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์ธก Blazor์™€ ์„œ๋ฒ„ ์ธก Blazor๋ฅผ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ์„œ๋ฒ„ ์ธก ๋ชจ๋ธ์— Razor Components๋ผ๋Š” ์ƒˆ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ํ˜ผ๋ž€์„ ์•ผ๊ธฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ฐํ˜€์กŒ์Šต๋‹ˆ๋‹ค.

์ด ํ˜ผ๋ž€์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค๋ฅธ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•˜๋Š” Blazor๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ชจ๋ธ ์„ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋‹ค์‹œ ์ „ํ™˜ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. Blazor ์•ฑ์€ .NET Core์˜ ์„œ๋ฒ„ ๋˜๋Š” WebAssembly๊ฐ€ ์žˆ๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ ํ˜ธ์ŠคํŒ…๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์ชฝ Blazor ์ง€์›์€ .NET Core 3.0๊ณผ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋ฉฐ ํด๋ผ์ด์–ธํŠธ ์ชฝ ์ง€์›์€ WebAssembly ์ง€์›์ด ์ค€๋น„๋˜๋Š” ์ฆ‰์‹œ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๊ตฌํ˜„ ์„ธ๋ถ€ ์ •๋ณด:

  • .NET Core 3.0์˜ Razor ๊ตฌ์„ฑ ์š”์†Œ ํ…œํ”Œ๋ฆฟ ์ด๋ฆ„์„ ๋‹ค์‹œ "Blazor(์„œ๋ฒ„ ์ธก)"๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.
  • ๋ช…ํ™•์„ฑ์„ ์œ„ํ•ด Blazor ํ…œํ”Œ๋ฆฟ์˜ ์ด๋ฆ„์„ "Blazor(ํด๋ผ์ด์–ธํŠธ ์ธก)"๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.
  • services.AddRazorComponents() ์ด๋ฆ„ ๋ฐ”๊พธ๊ธฐ -> services.AddServerSideBlazor()
  • routes.MapComponentHub<TComponent>() ์ด๋ฆ„ ๋ฐ”๊พธ๊ธฐ -> routes.MapBlazorHub<TComponent>()
  • components.server.js์˜ ์ด๋ฆ„์„ ๋‹ค์‹œ blazor.server.js๋กœ , components.webassembly.js๋ฅผ ๋‹ค์‹œ blazor.webassembly.js๋กœ ์ด๋ฆ„์„ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.
  • .NET Core 3.0 ๋ฒ„์ „์— ๋งž๊ฒŒ Blazor ํŒจํ‚ค์ง€ ๋ฒ„์ „์„ ์ •๋ ฌํ•ฉ๋‹ˆ๋‹ค(#8859).
  • ๋‹ค๋ฅธ Blazor ํ…œํ”Œ๋ฆฟ๊ณผ ์ผ์น˜ํ•˜๋„๋ก "Blazor(์„œ๋ฒ„ ์ธก)" ํ…œํ”Œ๋ฆฟ์˜ ์•„์ด์ฝ˜ ์—…๋ฐ์ดํŠธ
Done area-blazor enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์ด ์ข‹์€ ์›€์ง์ž„์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. Razor Components์™€ Blazor์˜ ๊ด€๊ณ„์— ๋Œ€ํ•œ ํ˜ผ๋ž€์€ ๋์ด ์—†์Šต๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์€ ๋ Œ๋”๋ง ๋ฐฉ์‹์ด ๋‹ค๋ฅผ ๋ฟ ์•„๋‹ˆ๋ผ ํ”„๋ ˆ์ž„์›Œํฌ๋„ ๋‹ค๋ฅด๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฒŒ๋‹ค๊ฐ€ ์ œ ๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ์œผ๋กœ๋Š” Blazor๊ฐ€ ๋ฉ‹์ง„ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  50 ๋Œ“๊ธ€

์Šน์ธ๋œ ๊ฒฐ์ •์ž…๋‹ˆ๊นŒ? ์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ํˆฌํ‘œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ €๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ด๋ฆ„ ๋ณ€๊ฒฝ์— ๋ฐ˜๋Œ€ํ•ฉ๋‹ˆ๋‹ค. Razor Components๊ฐ€ ๋” ๋‚˜์€ ์ด๋ฆ„์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. :(

@xclud ๊ณต๊ฐœ ํฌ๋Ÿผ์ด๋ฏ€๋กœ ํ”ผ๋“œ๋ฐฑ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค ๐Ÿ˜ƒ

์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ ์„ Razor ๊ตฌ์„ฑ ์š”์†Œ๋ผ๊ณ  ๋ถ€๋ฅผ ๊ฒƒ์ด์ง€๋งŒ(์ฆ‰, .razor ํŒŒ์ผ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹Razor ๊ตฌ์„ฑ ์š”์†Œ์ž„), ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ชจ๋ธ ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•  ๋•Œ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๊ฐ–๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋ฒˆ๊ฑฐ๋กญ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Blazor๋ผ๋Š” ์ด๋ฆ„ ๋’ค์—๋Š” ์ด๋ฏธ ์ƒ๋‹นํ•œ ์ถ”์ง„๋ ฅ์ด ์žˆ์œผ๋ฏ€๋กœ ๊ณ„์† ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด๋ฆ„์€ ๋ฌผ๋ก  ์ฃผ๊ด€์ ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ค ์ด๋ฆ„์„ ์„ ํƒํ•˜๋“  ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋งŒ์กฑํ•  ์ˆ˜๋Š” ์—†์ง€๋งŒ Blazor๋Š” ์ง€๊ธˆ๊นŒ์ง€ ์šฐ๋ฆฌ์—๊ฒŒ ๊ฝค ๋„์›€์ด ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์ด ์ข‹์€ ์›€์ง์ž„์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. Razor Components์™€ Blazor์˜ ๊ด€๊ณ„์— ๋Œ€ํ•œ ํ˜ผ๋ž€์€ ๋์ด ์—†์Šต๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์€ ๋ Œ๋”๋ง ๋ฐฉ์‹์ด ๋‹ค๋ฅผ ๋ฟ ์•„๋‹ˆ๋ผ ํ”„๋ ˆ์ž„์›Œํฌ๋„ ๋‹ค๋ฅด๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฒŒ๋‹ค๊ฐ€ ์ œ ๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ์œผ๋กœ๋Š” Blazor๊ฐ€ ๋ฉ‹์ง„ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์—๊ฒŒ Blazor์— ๋Œ€ํ•ด ์ž์ฃผ ์ด์•ผ๊ธฐํ•˜๋Š” ์‚ฌ๋žŒ์œผ๋กœ์„œ. Razor Components๋Š” ํ˜ผ๋ž€์— ๋ถˆ๊ณผํ–ˆ์Šต๋‹ˆ๋‹ค. Blazor ์•ฑ์€ Razor Components ์•ฑ์ด๊ณ , Razor Components๋Š” [Razor Pages & Razor Class Libraries]์™€ ๊ด€๋ จ๋˜์–ด ์žˆ์œผ๋ฉฐ, Razor/Blazor๋ผ๊ณ  ๋งํ•  ๋•Œ ์ž๊ธฐ ์ž์‹ ์— ๊ฑธ๋ ค ๋„˜์–ด์ง€๋Š” ๋ฉด์—์„œ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋˜ํ•œ Blazor์— ๋Œ€ํ•œ ์“ฐ๊ธฐ๋ฅผ ์–ด๋ ต๊ฒŒ ๋งŒ๋“ค๊ณ  SEO๋ฅผ ์–ด๋ ต๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ณ„์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ •์‹ ๋ ฅ์ด ์šฐ์„ธํ•ฉ๋‹ˆ๋‹ค! ์ด ๋ณ€๊ฒฝ์— ๋Œ€ํ•ด ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

razor ํŽ˜์ด์ง€๋Š” ์—ฌ์ „ํžˆ .cshtml์ด๊ณ  ๊ตฌ์„ฑ ์š”์†Œ๋Š” .razor์ด๋ฏ€๋กœ .blazor๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ์œ ๋ฆฌํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ .razor ํŒŒ์ผ ํ™•์žฅ์ž๋Š” ์–ด๋–ป๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ๋ฉด๋„๊ธฐ ํŽ˜์ด์ง€๋ฅผ .cshtml ๋Œ€์‹  .razor๋ผ๊ณ  ๋ถ€๋ฅด์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
์ƒ๋‹นํžˆ ํ˜ผ๋ž€์Šค๋Ÿฌ์šด ๊ฒƒ๋“ค

์šฐ๋ฆฌ๋Š” ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ .razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ๊ตฌ๋ฌธ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์ง€๋งŒ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ์ปดํŒŒ์ผ๋Ÿฌ์—์„œ ๋‹ค๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ ๋‹ค๋ฅธ ํŒŒ์ผ ํ™•์žฅ๋ช…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Blazor ํ˜ธ์ŠคํŒ… ํ…œํ”Œ๋ฆฟ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ? ํด๋ผ์ด์–ธํŠธ ์ธก ๋ชจ๋ธ์˜ ๊ฒฝ์šฐ ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • CSP ๋ณด์•ˆ ํ—ค๋” ์ ์šฉ
  • SRI ํ•ด์‹œ ๊ณ„์‚ฐ(์ด์ƒ์ ์œผ๋กœ๋Š” blazor.webassembly.js์—์„œ ์ง์ ‘ ๋‹ค์šด๋กœ๋“œํ•œ ์ž์‚ฐ์—๋„ ํ•„์š”ํ•จ)
  • ์ž์‚ฐ ์••์ถ•(์ ์–ด๋„ dll ํŒŒ์ผ์ด ๋‚ด๊ฐ€ ์‹œ๋„ํ•œ ๋‘ ๊ฐœ์˜ CDN์— ์˜ํ•ด โ€‹โ€‹์ด๋ฏธ ์••์ถ•๋œ wasm ์ฝ˜ํ…์ธ  ์œ ํ˜•์œผ๋กœ ๋ฐฐ์†ก๋  ๋•Œ๊นŒ์ง€)

๋”ฐ๋ผ์„œ ํ˜ธ์ŠคํŒ…๋œ ํ…œํ”Œ๋ฆฟ์ด ๊ณ„์† ์กด์žฌํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋˜ํ•œ ์ด ์ด๋ฆ„์„ "Blazor"๋กœ ๋˜๋Œ๋ฆฌ๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ATM์—์„œ ์‚ฌ๋žŒ๋“ค๊ณผ Blazor ๋ฐ Razor ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๊ฒƒ์€ ๋‹จ์ˆœํ•œ ํ˜ผ๋ž€์ž…๋‹ˆ๋‹ค.

Blazor๋Š” (์ ์–ด๋„) ๋‘ ๊ฐœ์˜ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์ด ์žˆ๋Š” trchnology์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š” ๋ธ”๋ ˆ์ด์ €๊ฐ€ ์ข‹์•„์š”!

๊ทธ๋“ค์„ ๋ชจ๋‘ ๋‹ค์Šค๋ฆฌ๋Š” ํ•˜๋‚˜์˜ ์ด๋ฆ„. ๋‘ ๊ฐœ์˜ ์„œ๋กœ ๋‹ค๋ฅธ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์ด ์žˆ๋Š” ํ•˜๋‚˜์˜ Blazor๊ฐ€ ํ™•์‹คํžˆ ๋” ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๊ธธ์„ ๋”ฐ๋ผ ๋งŽ์€ ํ˜ผ๋ž€์—์„œ ๊ตฌํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ณ€ํ™”๋ฅผ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ์ƒˆ(๋˜๋Š” ์ด์ „) ์ด๋ฆ„ ์ง€์ •์ด ํ›จ์”ฌ ๋œ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

ํŒŒ์ผ ํ™•์žฅ๋ช…๋„ .blazor ๋กœ ๋ฐ”๊ฟ”์•ผ ํ•œ๋‹ค๋Š” .cshtml ๋ฐ .razor ์—๋Š” ๋ชจ๋‘ razor ๊ตฌ๋ฌธ์ด ์žˆ์ง€๋งŒ, .blazor ํŒŒ์ผ ํ™•์žฅ์ž๋ฅผ ๋ณด๋‹ค ์ •ํ™•ํ•˜๊ณ  ๋œ ๋ชจํ˜ธํ•œ IMHO๋กœ ๋งŒ๋“œ๋Š” Blazor ํŠน์ • ์ฝ”๋“œ๋Š” ํ•˜๋‚˜๋งŒ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์งง์€ ์˜๊ฒฌ: ์ด๋ฆ„์„ _Razor Components_์—์„œ _Server-side Blazor_๋กœ ๋‹ค์‹œ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.

๊ธด ๋Œ€๋‹ต: ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฐ ์„œ๋ฒ„ ์ธก "๊ตฌ์„ฑ ์š”์†Œ"๋Š” ๋ชจ๋‘ Blazor, Razor ๊ตฌ์„ฑ ์š”์†Œ, ASP.NET Core ๊ตฌ์„ฑ ์š”์†Œ์— ๊ด€๊ณ„์—†์ด ๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด React์™€ React Native๋Š” ํ›จ์”ฌ ๋” ๋‹ค๋ฅธ ๊ธฐ์ˆ ์ด์ง€๋งŒ ๊ฐ™์€ ์ด๋ฆ„์„ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.

Blazor ์ด๋ฆ„์˜ ์ด์  :

  • ์ด๋ฏธ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ž˜ ์•Œ๋ ค์ง„ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค ๋ธŒ๋ผ์šฐ์ €์—์„œ .NET์„ ์‹คํ–‰ํ•˜๋Š” ๊ธฐ์ˆ ๋กœ๋„ ์ดํ•ด๋˜๊ณ  ์žˆ๋Š”๋ฐ 100% ๋งž๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค.
  • ์‚ฌ๋žŒ๋“ค์ด Blazor๋ฅผ ์„œ๋ฒ„ ์ธก(์‹ค์ œ๋กœ๋Š” ์„œ๋ฒ„ ์ธก ์—†์ด)์—์„œ .NET ์—†์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ฐ›์•„๋“ค์ด๊ฑฐ๋‚˜ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฌ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Razor ๊ตฌ์„ฑ ์š”์†Œ ์ด๋ฆ„์˜ ์žฅ์ :

  • Razor ๋ฐ ASP.NET Core์™€ ์—ฐ๊ฒฐํ•˜๋ฉด ์‚ฌ๋žŒ๋“ค์ด ๊ธฐ์ˆ ์ด ์ ์ ˆํ•œ ์ง€์›๊ณผ ์•ˆ์ •์„ฑ์„ ๊ฐ–๊ฒŒ ๋  ๊ฒƒ์ž„์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Blazor๋Š” ์ด๋ฏธ ๋งŽ์€ ์ฃผ๋ชฉ์„ ๋ฐ›์•˜์ง€๋งŒ ์•ˆ์ •์ ์ธ ๊ธฐ์ˆ ๋กœ ์ดํ•ด๋˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํ™•์žฅ๊ณผ ๊ด€๋ จํ•˜์—ฌ Razor ์ปดํŒŒ์ผ์„ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์•ž์œผ๋กœ .razor ํ™•์žฅ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์  ์ƒ์„ฑ๋œ Razore ํŽ˜์ด์ง€๊ฐ€ ์žˆ๊ณ  ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ด๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด .razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ .xaml ํ™•์žฅ์ž๋Š” ์ปจํŠธ๋กค, ํŽ˜์ด์ง€, ๋ฆฌ์†Œ์Šค, ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๊ฐœ์ฒด์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์ด ์™„๋ฒฝํ•˜๊ฒŒ ๋‹ฌ์„ฑ ๊ฐ€๋Šฅํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. Razor ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ฝ”๋“œ ์ˆจ๊น€์„ ์ง€์›ํ•˜๋Š” ํ˜„์žฌ ์ƒํƒœ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ฝ”๋“œ ์ˆจ๊น€์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ComponentBase ๋˜๋Š” ๋‹ค๋ฅธ ํ•ญ๋ชฉ์—์„œ ์ƒ์†๋˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์€ .razor ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฝ”๋“œ ๋น„ํ•˜์ธ๋“œ๊ฐ€ ์—†๋Š” ๊ธฐ๋ณธ ์ƒ์†์€ ComponentBase์ด๋ฉฐ ํ–ฅํ›„ ๊ธฐ๋ณธ ๊ธฐ๋ณธ ํด๋ž˜์Šค๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํ–ฅํ›„ Razor ๊ฐœ์ฒด๊ฐ€ ๋‹ค๋ฅธ ํ™•์žฅ์„ ๊ฐ€์ ธ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ Blazor ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด .blazor ๊ฐ€ ํ›จ์”ฌ ๋” ๋‚˜์€ ์˜ต์…˜์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด ๋ณ€ํ™”๋ฅผ ๋งค์šฐ ํ™˜์˜ํ•œ๋‹ค! "Razor ๊ตฌ์„ฑ ์š”์†Œ"๋ผ๋Š” ์ด๋ฆ„์€ ํ•ญ์ƒ ์•ฝ๊ฐ„ ํ˜ผ๋ž€์Šค๋Ÿฌ์› ์Šต๋‹ˆ๋‹ค. Razor๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ๋‹ค๋ฅธ ๋ชจ๋“  ์ž‘์—…๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ด๊ฒƒ์ด ์ˆœ์ „ํžˆ ์„œ๋ฒ„ ์ธก ์ž‘์—…์ผ ๊ฒƒ์ด๋ผ๋Š” ๊ธฐ๋Œ€ ๋•Œ๋ฌธ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Razor ๊ตฌ์„ฑ ์š”์†Œ๋Š” WPF์˜ ์‚ฌ์šฉ์ž ์ปจํŠธ๋กค๊ณผ ์œ ์‚ฌํ•˜๋ฉฐ ์ฝ”๋“œ ๋Œ€์‹  Razor ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค(์˜ˆ: ํƒœ๊ทธ ๋„์šฐ๋ฏธ๊ฐ€ ํ—ˆ์šฉํ•จ).

์ด๋ฆ„์„ ๋ฐ”๊พธ๋ฉด ๊ทธ ํ˜ผ๋ž€์ด ์ œ๊ฑฐ๋˜๊ณ  ์‹ค์ œ๋กœ ์–ธ์  ๊ฐ€๋Š” ์„œ๋ฒ„ ์ธก ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ Razor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ƒ๊ฐํ•ด๋‚ผ ๊ธฐํšŒ๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค.

.razor ํ™•์žฅ์— ๊ด€ํ•ด์„œ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ .blazor ๋Œ€์‹  ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ํ•ฉ๋ฆฌ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ๋ฐ”์— ๋”ฐ๋ฅด๋ฉด ์ด๋Ÿฌํ•œ ํŒŒ์ผ์—๋Š” Blazor ์ปจํ…์ŠคํŠธ ๋‚ด์—์„œ๋งŒ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ๋…ผ๋ฆฌ๊ฐ€ ๊ตฌ์„ฑ ์š”์†Œ์™€ ๊นŠ์ด ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋น„ Blazor ์ปจํ…์ŠคํŠธ์—์„œ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํด๋ผ์ด์–ธํŠธ ์ธก Blazor ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋™์ผํ•œ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์ง€์†์ ์œผ๋กœ .blazor ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‹๋ณ„ํ•˜๋Š” ๋” ์ข‹์€ ์•„์ด๋””์–ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋Ÿฐ ๋‹ค์Œ ์„œ๋ฒ„ ์ธก ๋˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ). .

@poke ์™€ @duracellko ๊ฐ€ ์ „๋‹ฌํ•˜๋ฉด์„œ blazor ๊ตฌ์„ฑ ์š”์†Œ๋ผ๋Š” ์šฉ์–ด๋ฅผ ์–ธ๊ธ‰ํ•œ ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ์ด๋ฆ„์œผ๋กœ ๊ทธ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. __Blazor(์„œ๋ฒ„ ์ธก)__ ๋Œ€์‹  __Blazor Components__๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

์˜ค. ๊ทธ๋ฆฌ๊ณ  ํ™•์žฅ๋ช…์— .blazor ๋„ ์ข‹์€ ์•„์ด๋””์–ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

@myty ๊ฐœ๋…์ ์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ•ญ์ƒ "Blazor ๊ตฌ์„ฑ ์š”์†Œ"(์ฆ‰, Blazor๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค)๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. "Blazor(์„œ๋ฒ„ ์ธก)"์™€ "Blazor(ํด๋ผ์ด์–ธํŠธ ์ธก)"๋Š” ๋™์ผํ•œ(์ œ ์ƒ๊ฐ์—๋Š”?) Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ "Blazor ๊ตฌ์„ฑ ์š”์†Œ"๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์Œ์„ ์„ค๋ช…ํ•˜๊ณ  "์„œ๋ฒ„ ์ธก Blazor"๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

@myty ๊ฐœ๋…์ ์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ•ญ์ƒ "Blazor ๊ตฌ์„ฑ ์š”์†Œ"(์ฆ‰, Blazor๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค)๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. "Blazor(์„œ๋ฒ„ ์ธก)"์™€ "Blazor(ํด๋ผ์ด์–ธํŠธ ์ธก)"๋Š” ๋™์ผํ•œ(์ œ ์ƒ๊ฐ์—๋Š”?) Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ "Blazor ๊ตฌ์„ฑ ์š”์†Œ"๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์Œ์„ ์„ค๋ช…ํ•˜๊ณ  "์„œ๋ฒ„ ์ธก Blazor"๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

ํ•ญ์ƒ Blazor ๊ตฌ์„ฑ ์š”์†Œ๋ผ๋Š” ์‚ฌ์‹ค์ด ์ €๋ฅผ ์ด๋ฆ„์— ๋งค๋ฃŒ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค. ์žˆ๋Š” ๊ทธ๋Œ€๋กœ ๋งํ•ด๋„ ๋ฉ‹์žˆ๊ฒŒ ๋“ค๋ฆฝ๋‹ˆ๋‹ค. :)

...ํ•˜์ง€๋งŒ ์„œ๋ฒ„ ์ธก๊ณผ ํด๋ผ์ด์–ธํŠธ ์ธก ์‚ฌ์ด์˜ ํ˜ผ๋ž€๋„ ๋ด…๋‹ˆ๋‹ค. ํŠน๋ณ„ํžˆ ๊ทธ๋“ค์„ ๋ถ€๋ฅด์ง€ ์•Š๊ณ ๋Š” ์ด์•ผ๊ธฐ๋ฅผ ํ•˜๊ธฐ ์–ด๋ ต๋‹ค.

์˜ˆ! ๋“œ๋””์–ด :) ๋ธ”๋ ˆ์ด์ €๊ฐ€ ๋ณธ๋ช…์ž…๋‹ˆ๋‹ค.

๋„ˆ๋„ ํƒ€๋‹ˆ?

์˜ˆ

๋‚˜์—๊ฒŒ Blazor = WASM.

๋”ฐ๋ผ์„œ 'Razor Components'(SignarR!)๋Š” ์™„์ „ํžˆ ๋‹ค๋ฅธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฐจ์ด์ ์„ ์„ค๋ช…ํ•˜๋Š” ๊ฒƒ์€ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. Blazor๋Š” WASM์ž…๋‹ˆ๋‹ค.

์ž„ํ˜ธ.

์ด๊ฒƒ์€ ํ™•์‹คํžˆ ์˜ฌ๋ฐ”๋ฅธ ๊ฒฐ์ •์ž…๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด "Razor ๊ตฌ์„ฑ ์š”์†Œ"๋ผ๋Š” ์šฉ์–ด๊ฐ€ ๋„์ž…๋œ ํ›„์—๋„ ๋‚˜์™€ ๋‚ด ๋™๋ฃŒ๋Š” ์—ฌ์ „ํžˆ ์ด๋ฅผ ์„œ๋ฒ„ ์ธก Blazor๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋˜ํ•œ .blazor ํ™•์žฅ์ž๋‚˜ .component์™€ ๊ฐ™์€ ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. MVC์˜ ๋ทฐ๋„ razor ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ .razor๋Š” ์ถ”๊ฐ€์ ์ธ ํ˜ผ๋ž€์„ ์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.

Razor ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ด๋ฆ„์„ ๋‹ค์‹œ Blazor๋กœ ๋ฐ”๊พธ๋Š” ์œ ํ„ด์ด ์ข‹์€ ๊ฒƒ ๊ฐ™์•„์š”.

๋ฉด๋„๊ธฐ ํŒŒ์ผ์„ ๋‚˜ํƒ€๋‚ด๋Š” 2๊ฐœ์˜ ๋‹ค๋ฅธ ํ™•์žฅ์ž๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ํ˜ผ๋ž€์Šค๋Ÿฝ๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌ์„ฑ ์š”์†Œ ํ™•์žฅ์ž๊ฐ€ .razor ๋˜์–ด์„œ๋Š” ์•ˆ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ( .cshtml ๋ฐ .razor )

.blazor ๋˜๋Š” .component ํ™•์žฅ์ด .razor ๋ณด๋‹ค ๋” ๋‚˜์€ ๋Œ€์•ˆ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด ์ด๋ฆ„์„ Blazor Server-Side๋กœ ๋‹ค์‹œ ๋ณ€๊ฒฝํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ƒ๋‹นํžˆ ์†”์งํ•ด์„œ ์•ˆ์‹ฌ์ด ๋ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ž‘์€ lolwut์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋‹ค? Razor Components ๋กœ ์ด๋ฆ„์ด ๋ฐ”๋€Œ๋Š” ๊ฒƒ์„ ์ฒ˜์Œ ๋“ค์—ˆ์„ ๋•Œ.

๊ฐœ์ธ์ ์œผ๋กœ Razor ๋ผ๋Š” ๋‹จ์–ด๋Š” ์ถฉ๋ถ„ํžˆ ์˜ค๋ฒ„๋กœ๋“œ๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฉด๋„์นผ
  • ๋ฉด๋„๋‚ 
  • ๋ฉด๋„๊ธฐ ํŽ˜์ด์ง€
  • Razor ํŽ˜์ด์ง€ ์ปจํŠธ๋กค๋Ÿฌ
  • Razor ํŽ˜์ด์ง€ ๋ชจ๋ธ
  • Razor ํด๋ž˜์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ๋ฉด๋„๊ธฐ ๋ถ€๋ถ„ ๋ณด๊ธฐ
  • Razor View ๊ตฌ์„ฑ ์š”์†Œ
  • :์‹ ๊ทœ: Razor ๊ตฌ์„ฑ ์š”์†Œ:ํ˜ผ๋ž€: //confusing much yet?
  • ๋‹ค์Œ Razor ์ œํ’ˆ๊ตฐ ๊ธฐ๋Šฅ: Razor ๊ตฌ์„ฑ ์š”์†Œ ๋ณด๊ธฐ // just kidding :)

์šฐ๋ฆฌ๋Š” ์ด๋ฏธ ์ƒˆ๋กœ์šด ์‚ฌ๋žŒ์ด ๊ฐ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ๊ณผ ํ•จ๊ป˜ ์ด๋Ÿฌํ•œ ๋ชจ๋“  Razor ๊ธฐ๋Šฅ ์„ ํƒ์ƒ‰ํ•˜๋Š” ๊ฒƒ์„ ์–ด๋ ต๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ดˆ๋ณด์ž์— ๋Œ€ํ•œ ๊ณต๊ฐ์„ ๋Š๋‚„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Œ€๊ทœ๋ชจ ํŒ€์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ณ  ์‚ฌ์šฉํ•  ๋•Œ(์–ด๋–ป๊ฒŒ/์–ธ์ œ/๋ฌด์—‡์„) ์กฐ์ •ํ•  ๋•Œ "์˜ฌ๋ฐ”๋ฅธ" ์šฉ์–ด ์‚ฌ์šฉ์„ ์„ค๋ช…ํ•˜๊ณ  ์œ ์ง€ํ•˜๋ ค๊ณ  ํ•œ๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณด์„ธ์š”.

Blazor๋Š” ์ด๋ฏธ ์‚ฌ์šฉ ์‚ฌ๋ก€์™€ ์—ฐ๊ด€๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ข‹์€ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค. Yo, Razor Sockets ๋„ Razor Components ๋ณด๋‹ค ๋” ๋‚˜์€ ์ด๋ฆ„์ด์—ˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. :์ƒ‰์•ˆ๊ฒฝ:

๋˜ํ•œ .razor ๋ฅผ .blazor ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋„ค์ด๋ฐ์€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
์ผ์„ ๋‹จ์ˆœํ•˜๊ฒŒ ์œ ์ง€ํ•˜์‹ญ์‹œ์˜ค.

-๋ธŒ๋ผ์ด์–ธ :)

Razor ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋‚ด ํ”„๋กœ์ ํŠธ์—์„œ ์ž˜ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ด€์‹ฌ์„ ๊ฐ–๊ณ  ์—ฌ๊ธฐ๊นŒ์ง€ ์™”์Šต๋‹ˆ๋‹ค.
๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋ฌด์Šจ ๋ง์„ ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜์ง€๋งŒ ์ด์ œ ๋ง‰ ์‹œ์ž‘ํ•˜๋Š” ์‚ฌ๋žŒ์€ ์ด๋ฆ„ ๋•Œ๋ฌธ์— ๋‚ด๋ถ€์— ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ํ˜ผ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ชฉํ‘œ๊ฐ€ ๊ณง ์ถœ์‹œ๋  Blazor์˜ ์ž„์‹œ ๋Œ€์ฒดํ’ˆ์œผ๋กœ Razor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ฐฐ์†กํ•˜๋Š” ๊ฒƒ์ด๋ผ๋ฉด ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@Mitiko ์„œ๋ฒ„ ์ธก Blazor๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก Blazor(WebAssembly ๊ธฐ๋ฐ˜)์— ๋Œ€ํ•œ ๊ฒฐ์ •์˜ ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ›„์ž๊ฐ€ ์–ด๋Š ์‹œ์ ์— ์ถœ์‹œ๋œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด ์„œ๋ฒ„ ์ธก Blazor๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๋ชจ๋ธ์€ ์‹ค์ œ๋กœ ํŠน์ • ํ•ญ๋ชฉ์„ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ด๋ฆ„๊ณผ ํ•จ๊ป˜ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์ด ๋” ํ•ฉ๋ฆฌ์ ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ๊ถ๊ทน์ ์œผ๋กœ ํ˜ผ๋ž€์Šค๋Ÿฌ์šด ์ด์œ ์ž…๋‹ˆ๋‹ค. ํ˜ธ์ŠคํŒ…๋˜๋Š” ์œ„์น˜์— ์ƒ๊ด€ํ•˜์ง€ ์•Š๋Š” ๋…ผ๋ฆฌ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ๋ฌด์—‡์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๊นŒ? ๊ทธ๋Ÿฐ ๋‹ค์Œ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์‚ฌ์šฉํ•˜๋Š” "์‰˜"์— ๋”ฐ๋ผ ์ด๋ฆ„์„ ๋งˆ์ˆ ์ฒ˜๋Ÿผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฆ„์ด ๋‘ ๊ฐœ๋ผ๋Š” ๊ฒƒ์€ ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. @poke ์˜ ์š”์ ์€ ์•„๋ž˜ ๋น„๋””์˜ค๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค: @Mitiko

https://www.youtube.com/watch?v=dNQ7MgPZby4

Blazor ํ˜ธ์ŠคํŒ… ํ…œํ”Œ๋ฆฟ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

@ghidello ๊ทธ๋Œ€๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋…๋ฆฝ ์‹คํ–‰ํ˜• ํด๋ผ์ด์–ธํŠธ ์ธก, ASP.NET Core ํ˜ธ์ŠคํŒ… ๋ฐ ์„œ๋ฒ„ ์ธก์˜ ์„ธ ๊ฐ€์ง€ Blazor ํ…œํ”Œ๋ฆฟ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ๋ณด๋‹ˆ ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค. ๋ง์”€ํ•˜์‹  ๋Œ€๋กœ ์ด๋ฆ„์—๋Š” ์˜๋ฏธ์™€ ์ถ”์ง„๋ ฅ์ด ์žˆ์œผ๋ฉฐ ๋‘ ๋ชจ๋ธ ๋ชจ๋‘ ๊ฐ•๋ ฅํ•œ ์ง€์›์„ ๋ฐ›์œผ๋ฉฐ ์•ž์œผ๋กœ ๋‚˜์•„๊ฐ€๊ณ  ์žˆ๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋‹ด๊ฒจ ์žˆ์Šต๋‹ˆ๋‹ค.

IMO์—์„œ๋Š” Razor ๊ตฌ๋ฌธ/์—”์ง„์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ Blazor๋ฅผ ์ฐธ์กฐํ•˜๋„๋ก ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ ์ด๋ฆ„๋„ ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ˜„๋ช…ํ•œ ๋ช…๋ช…์œผ๋กœ ๋” ์‘์ง‘๋ ฅ ์žˆ๋Š” ์›์Šคํ†ฑ ์ƒต ์†”๋ฃจ์…˜์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ? ์ด๋ฆ„๋„ ๋ฐ”๊ฟ”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  .razor ํŒŒ์ผ์€ Blazor ๊ธฐ์ˆ ๊ณผ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ .blazor์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ผ๋ฐ˜์ ์ธ Razor Mvc์—๋„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ์š”์†Œ์™€ ๊ด€๋ จํ•˜์—ฌ ์—ฌ์ „ํžˆ ์•ฝ๊ฐ„ ํ˜ผ๋ž€ ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์„œ๋ฒ„ ์ธก ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ธก Blazor ๋ชจ๋‘์—์„œ ์ž‘๋™ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒฝ์šฐ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ "Blazor ๊ตฌ์„ฑ ์š”์†Œ" ๋˜๋Š” "Razor ๊ตฌ์„ฑ ์š”์†Œ"๋ผ๊ณ  ํ•ฉ๋‹ˆ๊นŒ?

@egil ์œ„์—์„œ Dan Roth๊ฐ€ ๋งํ•œ

์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ์„ Razor ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ฐธ์กฐํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค(์˜ˆ: .razor ํŒŒ์ผ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹Razor ๊ตฌ์„ฑ ์š”์†Œ์ž„).

์ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ์ฐฌ์„ฑ ํˆฌํ‘œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๋ณด๊ธฐ์— RazorComponent ๋Š” Razor ๊ตฌ๋ฌธ๊ณผ C# ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์„ฑ๋œ C# ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค. Blectron (StorageExplorer ๋ฐ๋ชจ์—์„œ์™€ ๊ฐ™์ด), HTML ์ƒ์„ฑ๊ธฐ(์˜ˆ: RazorGenerator ๊ฐ€ .cshtml ๋Œ€ํ•ด ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ์ด๋ฉ”์ผ ๋ณธ๋ฌธ ์ƒ์„ฑ์šฉ)๋ฅผ ๋น„๋กฏํ•œ ๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ์—์„œ RazorComponents ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค .cshtml ์ฝ˜ํ…์ธ ์ž…๋‹ˆ๋‹ค. Blazor ์—๋งŒ ๊ตญํ•œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋Œ€์กฐ์ ์œผ๋กœ Blazor ๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ(WebAssembly ๋ฐ ์„œ๋ฒ„ ์ธก)์„ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์—์„œ RazorComponents ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.

image

๋‚ด๊ฐ€ ๋ณด๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ฃผ๋Š” ๋‹ค์ด์–ด๊ทธ๋žจ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€ ํ™˜์˜

Blazor(ํด๋ผ์ด์–ธํŠธ ์ธก w/WASM) ๋ฐ Blazor(์„œ๋ฒ„ ์ธก w/.NET Core)๋Š” ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค!

ํ˜ธ์ŠคํŒ… ๋ชจ๋ธ์— ๊ด€๊ณ„์—†์ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ Blazor๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋‘ ๊ฐ€์ง€ UI์šฉ Razor ๊ตฌ์„ฑ ์š”์†Œ. ๋‹จ์ˆœํ•˜๊ณ  ๊นจ๋—ํ•˜๋ฉฐ ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ์ฝ”๋ฏธ๋””์–ธ ์ค‘ ํ•œ ๋ช…์ด ๋งํ–ˆ๋“ฏ์ด .... GIT R DONE!

Blazor ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์ธก์˜ ์†Œ๋ฆฌ๋Š” ์ •๋ง ์ข‹์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์ดˆ๋ณด์ž์—๊ฒŒ๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก๊ณผ ์„œ๋ฒ„ ์ธก์˜ ์ฐจ์ด์ ์„ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๋งํ–ˆ๋“ฏ์ด .blazor (๋ฐ "Blazor ๊ตฌ์„ฑ ์š”์†Œ" ์ด๋ฆ„)๋ฅผ ๊ณ ๋ คํ•ด์•ผ ํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. .razor (๋ฐ "Razor ๊ตฌ์„ฑ ์š”์†Œ" ์ด๋ฆ„)์„ ์œ ์ง€ํ•˜๋Š” ๋” ๋งŽ์€ ๊ทผ๊ฑฐ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์ฐพ์„ ์ˆ˜์žˆ๋Š”์ด ์‹œ์ ๊นŒ์ง€์˜ ๊ทผ๊ฑฐ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ .razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ๊ตฌ๋ฌธ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์ง€๋งŒ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ์ปดํŒŒ์ผ๋Ÿฌ์—์„œ ๋‹ค๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ ๋‹ค๋ฅธ ํŒŒ์ผ ํ™•์žฅ๋ช…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ๊ฒฌํ•ด๊ฐ€ ๋„ˆ๋ฌด ๋‹จ์ˆœํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

const string serverSideName = "Blazor (server-side)";
const string clientSideName = "Blazor (client-side)";

string componentModel = "Razor Components";
string ext = ".razor";

if (serverSideName.Contains("Blazor") && clientSideName.Contains("Blazor"))
{
    componentModel = "Blazor Components";
    ext = ".blazor";
} 

Console.WriteLine(componentModel);
Console.WriteLine(ext);

.razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•˜๋ ค๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ด๋ฆ„์€ ์—ฌ์ „ํžˆ โ€‹โ€‹์ •ํ™•ํ•˜๊ณ  ์„ค๋ช…์ ์ž…๋‹ˆ๋‹ค. .razor ํŒŒ์ผ์€ Razor ๊ตฌ๋ฌธ์œผ๋กœ ์ž‘์„ฑ๋œ UI ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค.
  • ์ดํƒˆ์„ ์ค„์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ ํ™•์žฅ์ž๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ ค๋ฉด ์—ฌ๋Ÿฌ ํŒ€๊ณผ ํ”„๋กœ์ ํŠธ์—์„œ ์ƒ๋‹นํ•œ ์–‘์˜ ์กฐ์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด๋ฏธ .razor์— ๋Œ€ํ•ด ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ–ˆ์œผ๋ฏ€๋กœ ์ •๋ง ์ข‹์€ ์ด์œ ๊ฐ€ ์—†๋Š” ํ•œ ๋‹ค์‹œ๋Š” ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
  • ์ œํ’ˆ ์ด๋ฆ„์ด๋‚˜ ์ „๋žต ๋ณ€๊ฒฝ์œผ๋กœ๋ถ€ํ„ฐ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ฒฉ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ์˜ ์ด๋ฆ„์„ ์ข€ ๋” ์ผ๋ฐ˜์ ์œผ๋กœ ์œ ์ง€ํ•˜์—ฌ ์ž ์žฌ์ ์ธ ์ด๋ฆ„ ์„ž๊ธฐ ๋˜๋Š” ํ–ฅํ›„ ํ”„๋กœ์ ํŠธ ๋ฐฉํ–ฅ ๋ณ€๊ฒฝ์˜ ์˜ํ–ฅ์„ ์ค„์ด๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@danroth27 ๋‚˜๋ฅผ ๋ฐฉํ•ดํ•˜๋Š” ๊ฒƒ์€ Razor ๊ตฌ๋ฌธ์ด .cshtml๊ณผ .razor ํŒŒ์ผ ๋ชจ๋‘์— ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ํ™•์žฅ์ด ์–ด๋–ค Razor Page/Component/MVC ๋ณด๊ธฐ์— ๋Œ€ํ•œ ๊ฒƒ์ธ์ง€ ํ˜ผ๋ž€์ด ์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋‘ ๊ฐ€์ง€ ์ ์€ ์ถฉ๋ถ„ํžˆ ๊ณต์ •ํ•ฉ๋‹ˆ๋‹ค.

@danroth27

์ด๋ฆ„์€ ์—ฌ์ „ํžˆ โ€‹โ€‹์ •ํ™•ํ•˜๊ณ  ์„ค๋ช…์ ์ž…๋‹ˆ๋‹ค. .razor ํŒŒ์ผ์€ Razor ๊ตฌ๋ฌธ์œผ๋กœ ์ž‘์„ฑ๋œ UI ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค.

์ด ์ธ์ˆ˜์—์„œ ๋‚˜๋ฅผ ๊ดด๋กญํžˆ๋Š” ๊ฒƒ์€ .razor ํŒŒ์ผ์— ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๊ธฐ, ์ˆ˜๋ช… ์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ ๋˜๋Š” ๋ณ€์ˆ˜ ๋ฐ”์ธ๋”ฉ๊ณผ ๊ฐ™์€ ํ•ญ๋ชฉ์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐœ๋…์€ Blazor์—๋งŒ ํ•ด๋‹น๋˜๋ฉฐ ์™ธ๋ถ€์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Razor ๊ตฌ๋ฌธ์ด์ง€๋งŒ ํด๋ผ์ด์–ธํŠธ ์ธก ๋…ผ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ๊ตฌ์ฒด์ ์ธ ํŠน์ง•์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ ์ˆœ์ „ํžˆ ์„œ๋ฒ„ ์ธก ๋ฐ ์„œ๋ฒ„ ๋ Œ๋”๋ง "Razor ๊ตฌ์„ฑ ์š”์†Œ"์—๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋ฏธ๋ž˜์— ๊ฐ€์ƒ์˜ ์ผ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(์˜ˆ๋ฅผ ๋“ค์–ด ๋ Œ๋” ์กฐ๊ฐ์ด ์„œ๋ฒ„์—์„œ๋„ ๊ฝค ์ž˜ ์ž‘๋™ํ•  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค).

๋”ฐ๋ผ์„œ ํด๋ผ์ด์–ธํŠธ ์ธก ๋™์ž‘์ด ํฌํ•จ๋œ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ๋งŒ ์ž‘๋™ํ•˜๋Š” ํŠน์ • Razor ๋ฒ„์ „์— ๋Œ€ํ•ด ํŒŒ์ผ ํ™•์žฅ์ž .razor ์™€ ์ด๋ฆ„ "Razor ๊ตฌ์„ฑ ์š”์†Œ"๋ฅผ ์ž ๊ธ‰๋‹ˆ๋‹ค.

@ (๋‚˜๋ฅผ ํฌํ•จ) .blazor ๋ฅผ ๋Œ€์‹  .razor ์™œ ๋‹น์‹ ์ด์— ์ถฉ์‹คํ•˜๊ณ ์žํ•˜๋Š” .razor ๊ฐœ๋ณ„์ ์œผ๋กœ. ์ด๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐ ๊ธฐ์ˆ ์ ์ธ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ์ด๊ฒƒ์ด ๋‹น์‹ ๊ณผ ๋‹น์‹ ์˜ ํŒ€ ์„ ํ˜ธ ์‚ฌํ•ญ์ž…๋‹ˆ๊นŒ?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

@danroth27 ์ด ์—ฌ๋Ÿฌ ํŒ€๊ณผ์˜ ์กฐ์ •์—

.xaml ๊ฐ€ ๋ฐ์Šคํฌํ†ฑ ์„ธ๊ณ„์—์„œ ๋ฆฌ์†Œ์Šค์™€ ์ปจํŠธ๋กค ๋ชจ๋‘์— ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹๊ณผ ๊ฐ™์ด Razor๋กœ ์ž‘์„ฑ๋œ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋ณด๋‹ค ์ผ๋ฐ˜์ ์ธ ๊ฒƒ์ด๋ฉด .razor ํ™•์žฅ์ด ์ ํ•ฉํ•จ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„ค์ดํ‹ฐ๋ธŒ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๋ฏธ๋ž˜์— ๊ฐ€๋Šฅํ•˜๋ฉด ๋ง UWP / xaml , ๋ฉด๋„๊ธฐ์„ํ•˜์ง€ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์„ฑํ•œ ์ปจํŠธ๋กค์„ html ์— ๋Œ€ํ•œ ๊ฐ•๋ ฅํ•œ ๋Œ€์•ˆ์ด ๋  ์ˆ˜์žˆ๋Š” ์ปจํŠธ๋กค์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฉด๋„๊ธฐ์˜ ํ•„์ˆ˜ ์Šคํƒ€์ผ๋กœ, ์ „์ž๋ฅผ ํ†ตํ•ดํ•˜์ง€๋งŒ, ์ˆœ์ˆ˜ ๋„ค์ดํ‹ฐ๋ธŒ .xaml's ํ˜„์žฌ์˜ ์„ ์–ธ์  ์ž‘์—… ๋ฐฉ์‹(ํŠนํžˆ C# ์ œ์–ด ํ๋ฆ„์— ๋Œ€ํ•œ razor์˜ ์ง€์›).

๊ทธ๊ฒƒ์€ ์ด๋ก ์  ์ธ ์˜ˆ์ž…๋‹ˆ๋‹ค. ๊ทธ ์‹œ์ ์—์„œ Razor ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ Blazor ์ปจํ…์ŠคํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ React Native์™€ ๊ฐ™์€ ๊ธฐ๋ณธ ์ปจํ…์ŠคํŠธ์— ์žˆ๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋“ฑ...

๋‚˜๋Š” Blazor๋ฅผ Razor Components( .razor )๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด React๊ฐ€ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ์„ฑ์— .jsx/.tsx ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  .jsx/.tsx ์™€ ๊ฐ™์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ€๋Šฅํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. Vue ๋ฐ TKO๊ฐ€ .jsx/.tsx ํŒŒ์ผ์— ๋Œ€ํ•ด ๋นŒ๋“œ ์‹œ์Šคํ…œ์ด ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—…์„ ๊ตฌ์„ฑํ•˜์—ฌ .jsx/.tsx ๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐฉ์‹๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ์œ ์‚ฌํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์˜๊ฒฌ์„ ๋ณด๋‚ด์ฃผ์‹  ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์ธก Blazor๋กœ ๋‹ค์‹œ ์ด๋ฆ„์„ ๋ฐ”๊พธ๋Š” Razor ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!

์œ„์— ๋‚˜์—ด๋œ ์ด์œ ๋กœ .razor ํ™•์žฅ์ž๋ฅผ ๊ทธ๋Œ€๋กœ ๋‘๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด ๊ฒฐ์ •์— ๋Œ€ํ•ด ๋‹ค์–‘ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ฒƒ์„ Blazor์— ๋Œ€ํ•œ ์—ด๋ง์— ๊ฐ์‚ฌํ•˜์ง€๋งŒ ํ˜„์žฌ ํ™•์žฅ์ž๊ฐ€ ์ ์ ˆํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉฐ ํŒŒ์ผ ํ™•์žฅ์ž๋ฅผ ํœ˜์ “๋Š” ๋Œ€์‹  Blazor๋ฅผ ์ถœ์‹œํ•  ์ค€๋น„๋ฅผ ํ•˜๋Š” ๋ฐ ๋…ธ๋ ฅ์„ ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฐ์ •์„ ๋ฐ”ํƒ•์œผ๋กœ ์ด ๋ฌธ์ œ๋ฅผ ์ข…๋ฃŒํ•˜๊ณ  ์ง„ํ–‰ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ ˆ์ด๋ธ” feature-Components๋„ feature-Blazor๋กœ ์ด๋ฆ„์„ ๋ฐ”๊พธ์‹ญ์‹œ์˜ค.

์นœ์• ํ•˜๋Š” ์—ฌ๋Ÿฌ๋ถ„, ์ €๋Š” vs 2019๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” Blazor ๋งˆ์ง€๋ง‰ โ€‹โ€‹๋ฒ„์ „์„ ์„ค์น˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์ฝ”์–ด 3 ํ”„๋ฆฌ๋ทฐ 4๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” Blazor ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ๋ชจ๋“  ํŽ˜์ด์ง€๋Š” .cshtml ๋Œ€์‹  .razor ํ™•์žฅ์ž๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์‹คํ–‰ํ–ˆ์ง€๋งŒ ์ €์—๊ฒŒ ๋กœ๋“œ ์ค‘... Index.razor ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜์ง€ ์•Š๊ณ  ๋„์›€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

@ImadMichaelAyoub ์ฝ˜์†”์— ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ํด๋ผ์ด์–ธํŠธ ์ธก ๋˜๋Š” ์„œ๋ฒ„ ์ธก Blazor๋ฅผ ์‹คํ–‰ ์ค‘์ž…๋‹ˆ๊นŒ?

๋‚˜๋Š” ์ด๊ฒƒ์ด ์•„๋งˆ๋„ ์ด ํ† ๋ก ์„ ์œ„ํ•œ ์ตœ์ ์˜ ์žฅ์†Œ๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ์ œ์•ˆํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์•„๋งˆ๋„ Blazor Gitter ์ฑ„๋„(https://gitter.im/aspnet/Blazor)์— ๊ฐ€์ž…ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๊ณณ์—์„œ ์ €ํฌ๊ฐ€ ๋„์™€๋“œ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ต์žฅ์„ ๋ณด๋‚ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์ธก Blazor๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด wwwroot์—์„œ index.html ํŒŒ์ผ์„ ์‹คํ–‰ํ•˜๊ณ  ํŽ˜์ด์ง€ ํด๋”์˜ index.cshtml๋กœ ์ด๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ €๋Š” Razor์™€ Blazor๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ์—์„œ ์†”๋ฃจ์…˜์„ ๊ฒ€์ƒ‰ํ•  ๋•Œ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ๋” ์ด์ƒ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฉด๋„๊ธฐ๋‚˜ ์˜ค๋ž˜๋œ ๋ฌผ๊ฑด์„ ๋งŽ์ด ์–ป๊ฒŒ ๋˜์–ด ํ˜ผ๋ž€์ด ๋” ๊ฐ€์ค‘๋ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ตœ์‹  ์ด๋ฆ„์„ ๊ฒ€์ƒ‰ํ•˜๊ณ  ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ์ƒˆ ์ด๋ฆ„(์‹ฌ์ง€์–ด .blazor๊นŒ์ง€)์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐ ์ ๊ทน ์ฐฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ .razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ๊ตฌ๋ฌธ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์ง€๋งŒ ๊ตฌ์„ฑ ์š”์†Œ๋Š” Razor ์ปดํŒŒ์ผ๋Ÿฌ์—์„œ ๋‹ค๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ ๋‹ค๋ฅธ ํŒŒ์ผ ํ™•์žฅ๋ช…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ "๋™์ผํ•œ .razor ํ™•์žฅ์ž๋ฅผ ์œ ์ง€ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ณ„ํš๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋„ .razor์™€ ๋‹ค๋ฅธ ํ™•์žฅ์ž๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค."๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ?

"์œ„๋Œ€ํ•œ ๊ธฐ์ˆ ์—๋Š” ์ด๋ฆ„์˜ ํ˜ผ๋ž€์ด ๋”ฐ๋ฅธ๋‹ค"

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰