MudBlazor ์†Œ๊ฐœ

์•ž์ „์— MudBlazor์— ๋Œ€ํ•œ ์†Œ๊ฐœ๋ฅผ ๊ฐ„๋žตํžˆ ํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

MudBlazor๋Š” Blazor์šฉ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ GitHub์—์„œ 2.1K์˜ ์ค€์ˆ˜ํ•œ ์ง€์ง€๋ฅผ ๋ฐ›๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์ด๋ฉฐ
Awesome Blazor์—์„œ Ant Design Blazor, MatBlazor, Blazorise์™€ ํ•จ๊ป˜ ์ƒ์œ„ ์œ„์น˜์— ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค. MudBlazor์˜ ์žฅ์ ์€, ๊ธฐ์กด ์‘์šฉ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋จธ๊ฐ€ CSS๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ˆ™๋‹ฌ๋˜์–ด ์žˆ์ง€ ์•Š์•„๋„ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ด ์ค€๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€ ์ข…์†์„ฑ์ด ๊ฐ„๊ฒฐํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ์„ ์ œ๊ณตํ•ด ๋น ๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

image

๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Œ€์‹œ๋ณด๋“œ ํ…œํ”Œ๋ฆฟ๋„ ์ œ๊ณตํ•ด์ค˜ ๋น ๋ฅด๊ฒŒ ๋Œ€์‹œ๋ณด๋“œ ํ˜•ํƒœ์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Material ๋””์ž์ธ์„ ์ฑ„ํƒํ•˜๊ณ  ์žˆ์–ด์„œ ํ˜„๋Œ€์ ์œผ๋กœ ๊น”๋”ํ•œ ๋Š๋‚Œ์˜ ํ™”๋ฉด ๊ตฌ์„ฑ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ข€ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜์˜ ๋งํฌ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (MudBlazor๋กœ ๊ตฌ์ถ•๋œ MudBlazor ์‚ฌ์ดํŠธ ์ž…๋‹ˆ๋‹ค.)

๊ทธ๋ฆฌ๊ณ  TryMudBlazor๋ฅผ ํ†ตํ•ด ์˜จ๋ผ์ธ์œผ๋กœ MudBlazor์˜ ๊ธฐ๋Šฅ์„ ์ฝ”๋”ฉ์œผ๋กœ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

9๊ฐœ์˜ ์ข‹์•„์š”

@dimohy React + MUI ํ”„๋กœ์ ํŠธ๋ฅผ 6๊ฐœ์›” ์ •๋„ ๊ฒฝํ—˜ํ•˜๊ณ  ๋‚˜์„œ MUI์˜ ๋ธ”๋ ˆ์ด์ € ๋ฒ„์ „์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” MudBlazor๋ฅผ ์ ‘ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ์š”!
(๋‘˜ ๊ฐ„์˜ ๊ด€๊ณ„๋Š” ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค :sweat_smile:)

์•„์ง ๋ช‡์ผ ์•ˆ๋์ง€๋งŒ ๋„ˆ๋ฌด ๋ง˜์—๋“ค๊ณ  ์ข‹๋„ค์š” :smile:
๋Šฆ์—ˆ์ง€๋งŒ ์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

3๊ฐœ์˜ ์ข‹์•„์š”

MudBlazor ๊ธ€์„ ๋‹ค์‹œ ์†Œํ™˜ํ•ฉ๋‹ˆ๋‹ค ^^

MudBlazor๋Š” ์ •๋ง ์“ธ๋งŒํ•ฉ๋‹ˆ๋‹ค! MudBlazor๊ฐ€ ์ด๋Ÿฐ ๊ฒƒ์ด๊ตฌ๋‚˜ ๋Š๋ผ๋Š” ๊ฐ€์žฅ ๋น ๋ฅธ ๋ฐฉ๋ฒ•์€ MudBlazor Docs๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํŠน๋ณ„ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹Œ ์ด์ƒ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ทธ๋Œ€๋กœ ์ด์šฉํ•ด๋„ ์•กํ‹ฐ๋ธŒํ•œ ์˜ˆ์œ ํ™”๋ฉด ๊ตฌ์„ฑ์ด ๋ฉ๋‹ˆ๋‹ค.

์ €๋Š” ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ๋ฌธ์„œ์— ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ชฉ์ ์œผ๋กœ ์—ฃ์ง€ ๋ธŒ๋ผ์šฐ์ €์˜ ์•ฑ์œผ๋กœ ์„ค์น˜ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

image

์ดํ›„ ํ…Œ์Šคํฌ๋ฐ”์— ์ด์˜๊ฒŒ ์œ„์น˜ํ•ฉ๋‹ˆ๋‹ค.

image

๋ฌธ์„œ๋Š” Blazor Webassembly๋กœ ์ œ๊ณต๋˜๋ฏ€๋กœ ์ตœ์ดˆ ์ดˆ๊ธฐ ์‹œ๊ฐ„์ด ์กฐ๊ธˆ ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ ์ปดํ“จํ„ฐ์—์„œ ๋Œ€๋žต 3์ดˆ ์ •๋„์— ํ™”๋ฉด์ด ํ‘œ์‹œ๋˜๋ฏ€๋กœ ๊ดœ์ฐฎ์€ ์ˆ˜์ค€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ดํ›„ ์ ‘๊ทผํ•˜๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€๋Š” ๋ฐ”๋กœ๋ฐ”๋กœ ๋œจ๊ฑฐ๋“ ์š”.

MudBlazor๋Š” ์ •๋ง ์•Œ์ฐฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. Components ๋ชฉ๋ก์—์„œ ํ•˜๋‚˜์”ฉ ํด๋ฆญํ•ด์„œ ๋ฐ”๋กœ ๊ทธ ๋™์ž‘์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

API๋„ ์ž˜ ์ •๋ฆฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์˜ˆ์ œ ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ๋ณด๋ฉด ๋Œ€๋ถ€๋ถ„ ์ด ๋ฌธ์„œ๋งŒ ์žˆ์œผ๋ฉด ํ•ด๊ฒฐ์ด ๋ฉ๋‹ˆ๋‹ค.

MudBlazor๋Š” ๋˜ํ•œ ํ…Œ๋งˆ ์‹œ์Šคํ…œ์ด ์žˆ์–ด์„œ ๋งŒ๋“œ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ…Œ๋งˆ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ณ ์š”,

๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ Stack์ด๋‚˜ Grid๋“ฑ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๋ฏ€๋กœ WPF์— ์ต์ˆ™ํ•œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ์‰ฝ๊ฒŒ MudBlazor๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ ๊ฐœ์ธ์ ์ธ ๊ฒฝํ—˜์œผ๋กœ๋Š” ๋‹ค๋ฅธ ์œ ๋ช…ํ•œ Ant Design Blazor๋‚˜ MatBlazor, Blazorise (Blazorise ์œ ์ €๋„ ์ƒ๋‹นํžˆ ๋งŽ์Šต๋‹ˆ๋‹ค)์— ๋น„ํ•ด ๊น”๋”ํ•˜๊ณ  ๋น ๋ฅธ ๋™์ž‘์„ฑ์„ ๋ณด์ž…๋‹ˆ๋‹ค.

ํ›Œ๋ฅญํ•œ Validation ์‹œ์Šคํ…œ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์„œ ์ƒ๋‹นํžˆ ์งง์€ ์ฝ”๋“œ๋กœ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Drag&Drop์˜ ๋™์ž‘์€ ์ƒ๋‹นํžˆ ๋ฏธ๋ คํ•ฉ๋‹ˆ๋‹ค. ์™ ๊ฐ„ํ•œ ํ™˜๊ฒฝ๋ณด๋‹ค ์ข‹๊ตฐ์š”.

ํŒŒ์ผ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ ๋˜ํ•œ ์ปดํฌ๋„ŒํŠธ๋กœ ์ œ๊ณต์ด ๋˜์–ด ์žฅ์น˜๋ฅผ ์ง์ ‘ ์ œ์–ดํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์•„๋‹Œ ์ด์ƒ ๋Œ€๋ถ€๋ถ„์˜ ์„œ๋น„์Šค ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š”๋ฐ ๋ฌด๋ฆฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

Blazor๋กœ ์„œ๋น„์Šค ๊ฐœ๋ฐœ ๊ณ„ํš์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด MudBlazor๋ฅผ ๊ฐ•๋ ฅํžˆ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค ^^

7๊ฐœ์˜ ์ข‹์•„์š”

@dimohy ์ €๋„ MudBlazor ๊ฐœ๋ฐœ ์‚ฌ๋ก€๊ฐ€ ์žˆ๋Š”๋ฐ ์•„์ฃผ ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค. :smile:

(React MUI๋ฅผ ์‚ฌ์šฉํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ์œผ์‹  ๋ถ„๋“ค์€ ํ›จ์”ฌ ๋” ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค.)

5๊ฐœ์˜ ์ข‹์•„์š”