2024๋…„ 1์›” 17์ผยท1๋ถ„ ์ฝ๊ธฐ

Microsoft Blazor์™€ ํ†ตํ•ฉ๋œ SortableJS, Blazor Sortable๋กœ ํ™œ์„ฑํ™”

Microsoft Blazor๋Š” ๋›ฐ์–ด๋‚œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ SortableJS๋ฅผ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์œผ๋กœ ํ†ตํ•ฉํ•˜์—ฌ ์˜คํ”ˆ ์†Œ์Šค Blazor Sortable๋กœ ๊ฐœํŽธํ•จ์œผ๋กœ์จ ํฐ โ€‹โ€‹๋„์•ฝ์„ ์ด๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.

Microsoft Blazor์™€ ํ†ตํ•ฉ๋œ SortableJS, Blazor Sortable๋กœ ํ™œ์„ฑํ™”

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜๋ ค๋Š” ์ค‘์š”ํ•œ ์›€์ง์ž„์œผ๋กœ ๊ฑฐ๋Œ€ ๊ธฐ์ˆ  ๊ธฐ์—…์ธ Microsoft๋Š” ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ drag-and-drop ๋ชฉ๋ก ์ƒ์„ฑ์„ ๋‹ด๋‹นํ•˜๋Š” ์œ ๋ช…ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ SortableJS ์˜ ๊ธฐ๋Šฅ์„ ๊ฐ•๋ ฅํ•œ Blazor ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋นŒ๋”์— ๋ฏผ์ฒฉํ•˜๊ฒŒ ์—ฐ๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ƒˆ๋กœ ๋ณ€ํ˜•๋œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์ ์ ˆํ•˜๊ฒŒ Blazor Sortable ๋กœ ์ง€์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

1์›” 12์ผ์— ๋‹ฌ์„ฑ๋œ ์ด ์ด์ •ํ‘œ๋Š” Blazor Sortable GitHub์˜ ์˜คํ”ˆ ์†Œ์Šค ์ €์žฅ์†Œ๋กœ ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ด ์ƒˆ๋กœ ๋ฐœ๊ฒฌ๋œ ๋„๊ตฌ์˜ ์›์‹œ ์ž ์žฌ๋ ฅ์„ ํ™œ์šฉํ•˜์—ฌ ์›น ๊ฐœ๋ฐœ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฏผ์ฃผํ™”๋œ ํ”Œ๋žซํผ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ •๋ ฌ ๊ฐ€๋Šฅํ•œ ๋ชฉ๋ก์˜ ์†Œ์Šค ์ฝ”๋“œ ๋ฐ ๊ด€๋ จ ๋ฐ๋ชจ๋Š” Blazor Sortable Git ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์‹  ๋ธŒ๋ผ์šฐ์ € ๋ฐ ํ„ฐ์น˜ ์žฅ์น˜, CSS ์• ๋‹ˆ๋ฉ”์ด์…˜, ์ž๋™ ์Šคํฌ๋กค ๋ฐ ์œ ๋™์  ์• ๋‹ˆ๋ฉ”์ด์…˜์— ๋Œ€ํ•œ ๊ด‘๋ฒ”์œ„ํ•œ ์ง€์›์„ ์ž๋ž‘ํ•˜๋Š” SortableJS ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒ์„ฑ ๋ถ„์•ผ์—์„œ ์ธ๊ธฐ๊ฐ€ ๋†’์€ ์ œํ’ˆ์ž…๋‹ˆ๋‹ค. Blazor Sortable ๋ฐฐ์ง€๋กœ ์žฌํƒ„์ƒํ–ˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  SortableJS ์— ๋Œ€ํ•œ ์ดˆ๊ธฐ ์ถฉ์„ฑ๋„๋Š” ์—ฌ์ „ํžˆ ์—„์ฒญ๋‚œ ๊ฐ€์น˜๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Blazor Sortable ํ™œ์šฉํ•˜๋ ค๋ฉด ๊ฐœ๋ฐœ์ž๋Š” Shared/SortableList.razor, Shared/SortableList.razor.css ๋ฐ Shared/SortableList.razor.js ํŒŒ์ผ์ด ์—„๊ฒฉํžˆ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

SortableList๋Š” ๋‹ค์–‘ํ•œ ํ•ญ๋ชฉ์˜ ๋ชฉ๋ก์„ ์ฐจ์ง€ํ•˜๋Š” ๋งŒ๋Šฅ ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ฐœ๋ฐœ์ž๋Š” SortableItemTemplate ์‚ฌ์šฉํ•˜์—ฌ ์ •๋ ฌ ๊ฐ€๋Šฅํ•œ ๋ชฉ๋ก์— ์žˆ๋Š” ๊ฐ ํ•ญ๋ชฉ์˜ ๋ณ€ํ™˜์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. Blazor ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ๋Š” ์•„์ง SortableJS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์•˜์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  Blazor Sortable ์ฆ‰์‹œ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋„๋ก ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๊ฐœ๋ฐœ์ž์˜ ํ’€ ์š”์ฒญ์€ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

SortableJS ์˜ ๋šœ๋ ทํ•œ ์žฅ์ ์€ JQuery๋‚˜ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์„ค์น˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋™์ผํ•œ ๋ชฉ๋ก ๋‚ด์—์„œ ํ•œ ๋ชฉ๋ก์—์„œ ๋‹ค๋ฅธ ๋ชฉ๋ก์œผ๋กœ ์œ ์—ฐํ•˜๊ฒŒ ๋“œ๋ž˜๊ทธํ•  ์ˆ˜ ์žˆ๊ณ  ํ•ญ๋ชฉ์ด ์ „ํ™˜๋  ๋•Œ CSS ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ ์ง€ํ•˜๋ฉฐ ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ด‰์ง„ํ•ฉ๋‹ˆ๋‹ค. Angular TypeScript ๊ธฐ๋ฐ˜ ์›น ํ”„๋ ˆ์ž„์›Œํฌ, Vue JavaScript ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ JQuery ํฌํ•จํ•œ ๊ธฐ์ˆ ์„ ๋ฐฑ์—…ํ•ฉ๋‹ˆ๋‹ค. ์ด ํ™•์žฅ์€ ์ฝ”๋”ฉ์˜ ํ•„์š”์„ฑ์„ ์™„์ „ํžˆ ์ œ๊ฑฐํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒ์„ฑ์„ ๊ฐ„์†Œํ™”ํ•˜๋Š” AppMaster ์™€ ๊ฐ™์€ no-code ํ”Œ๋žซํผ๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

Blazor ๊ฐœ๋ฐœ์ž๊ฐ€ ์ „์ฒด ์Šคํƒ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด .NET ๋ฐ C#์„ ํ™œ์šฉํ•˜์—ฌ JavaScript์— ๋Œ€ํ•œ ์ข…์†์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋Š” ํ†ต๋กœ ์—ญํ• ์„ ํ•œ๋‹ค๋Š” ์ ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ์ด๋‹ˆ์…”ํ‹ฐ๋ธŒ๋Š” Microsoft์™€ ๊ฐ™์€ ํšŒ์‚ฌ ๋ฐ low-code ๋ฐ no-code ํ”Œ๋žซํผ์„ ์ง€์›ํ•˜๋Š” AppMaster ์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ํšŒ์‚ฌ๊ฐ€ ๊ธฐ์ˆ ์˜ ์ด์ ์„ ํ™œ์šฉํ•˜์—ฌ ์›น ๊ฐœ๋ฐœ์„ ๋ณด๋‹ค ์‰ฝ๊ฒŒ โ€‹โ€‹์ ‘๊ทผํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์ž…์ฆํ•ฉ๋‹ˆ๋‹ค.

Easy to start
Create something amazing

Experiment with AppMaster with free plan.
When you will be ready you can choose the proper subscription.

Get Started
Microsoft Blazor์™€ ํ†ตํ•ฉ๋œ SortableJS, Blazor Sortable๋กœ ํ™œ์„ฑํ™” | AppMaster