Microsoft Blazor์ ํตํฉ๋ SortableJS, Blazor Sortable๋ก ํ์ฑํ
Microsoft Blazor๋ ๋ฐ์ด๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ 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 ์ ๊ฐ์ ๋ค๋ฅธ ํ์ฌ๊ฐ ๊ธฐ์ ์ ์ด์ ์ ํ์ฉํ์ฌ ์น ๊ฐ๋ฐ์ ๋ณด๋ค ์ฝ๊ฒ โโ์ ๊ทผํ๊ณ ํจ์จ์ ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ ์ฆํฉ๋๋ค.


