์ฒ์์ Blazor 0.5.0์์ Blazor ์๋ฒ ์ธก ํธ์คํ ๋ชจ๋ธ์ ๋์ ํ ๋ค์ ๋์ค์ .NET Core 3.0์์ ์ ๊ณตํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ํด๋ผ์ด์ธํธ ์ธก Blazor์ ์๋ฒ ์ธก Blazor๋ฅผ ๊ตฌ๋ณํ๊ธฐ ์ํด ์๋ฒ ์ธก ๋ชจ๋ธ์ Razor Components๋ผ๋ ์ ์ด๋ฆ์ ์ง์ ํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๊ฒ์ ํผ๋์ ์ผ๊ธฐํ๋ ๊ฒ์ผ๋ก ๋ฐํ์ก์ต๋๋ค.
์ด ํผ๋์ ํด๊ฒฐํ๊ธฐ ์ํด ๋ค๋ฅธ ํธ์คํ ๋ชจ๋ธ์ ์ฌ์ฉํ๋ Blazor๋ก ์ ํ๋ฆฌ์ผ์ด์ ๋ชจ๋ธ ์ ์ฐธ์กฐํ๋ ๊ฒ์ผ๋ก ๋ค์ ์ ํํ ๊ฒ์ ๋๋ค. Blazor ์ฑ์ .NET Core์ ์๋ฒ ๋๋ WebAssembly๊ฐ ์๋ ํด๋ผ์ด์ธํธ์์ ํธ์คํ ๋ ์ ์์ต๋๋ค. ์๋ฒ ์ชฝ Blazor ์ง์์ .NET Core 3.0๊ณผ ํจ๊ป ์ ๊ณต๋๋ฉฐ ํด๋ผ์ด์ธํธ ์ชฝ ์ง์์ WebAssembly ์ง์์ด ์ค๋น๋๋ ์ฆ์ ์ ๊ณต๋ฉ๋๋ค.
๊ตฌํ ์ธ๋ถ ์ ๋ณด:
services.AddRazorComponents()
์ด๋ฆ ๋ฐ๊พธ๊ธฐ -> services.AddServerSideBlazor()
routes.MapComponentHub<TComponent>()
์ด๋ฆ ๋ฐ๊พธ๊ธฐ -> routes.MapBlazorHub<TComponent>()
์น์ธ๋ ๊ฒฐ์ ์ ๋๊น? ์ฐ๋ฆฌ๋ ์ฌ์ ํ ํฌํํ ์ ์์ต๋๊น?
์ ๋ ๊ฐ์ธ์ ์ผ๋ก ์ด๋ฆ ๋ณ๊ฒฝ์ ๋ฐ๋ํฉ๋๋ค. 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 ํธ์คํ ํ ํ๋ฆฟ์ ์ด๋ป์ต๋๊น? ํด๋ผ์ด์ธํธ ์ธก ๋ชจ๋ธ์ ๊ฒฝ์ฐ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ฐ๋ผ์ ํธ์คํ ๋ ํ ํ๋ฆฟ์ด ๊ณ์ ์กด์ฌํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๋๋ ๋ํ ์ด ์ด๋ฆ์ "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 ์ด๋ฆ์ ์ด์ :
Razor ๊ตฌ์ฑ ์์ ์ด๋ฆ์ ์ฅ์ :
๊ทธ๋ฆฌ๊ณ ํ์ฅ๊ณผ ๊ด๋ จํ์ฌ 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 ๋ผ๋ ๋จ์ด๋ ์ถฉ๋ถํ ์ค๋ฒ๋ก๋๋์๋ค๊ณ ์๊ฐํฉ๋๋ค.
//confusing much yet?
// just kidding :)
์ฐ๋ฆฌ๋ ์ด๋ฏธ ์๋ก์ด ์ฌ๋์ด ๊ฐ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํ๋ ๊ฒ๊ณผ ํจ๊ป ์ด๋ฌํ ๋ชจ๋ Razor ๊ธฐ๋ฅ ์ ํ์ํ๋ ๊ฒ์ ์ด๋ ต๊ฒ ๋ง๋ค์์ต๋๋ค.
์ด๋ณด์์ ๋ํ ๊ณต๊ฐ์ ๋๋ ๋ฟ๋ง ์๋๋ผ ๋๊ท๋ชจ ํ์ ๋ํด ์ค๋ช ํ๊ณ ์ฌ์ฉํ ๋(์ด๋ป๊ฒ/์ธ์ /๋ฌด์์) ์กฐ์ ํ ๋ "์ฌ๋ฐ๋ฅธ" ์ฉ์ด ์ฌ์ฉ์ ์ค๋ช ํ๊ณ ์ ์งํ๋ ค๊ณ ํ๋ค๊ณ ์์ํด ๋ณด์ธ์.
Blazor๋ ์ด๋ฏธ ์ฌ์ฉ ์ฌ๋ก์ ์ฐ๊ด๋๊ธฐ ๋๋ฌธ์ ์ข์ ์ด๋ฆ์ ๋๋ค. Yo, Razor Sockets ๋ Razor Components ๋ณด๋ค ๋ ๋์ ์ด๋ฆ์ด์์ ๊ฒ์ ๋๋ค. :์์๊ฒฝ:
๋ํ .razor
๋ฅผ .blazor
๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋ค์ด๋ฐ์ ์ด๋ ต์ต๋๋ค.
์ผ์ ๋จ์ํ๊ฒ ์ ์งํ์ญ์์ค.
-๋ธ๋ผ์ด์ธ :)
Razor ๊ตฌ์ฑ ์์๊ฐ ๋ด ํ๋ก์ ํธ์์ ์ ์๋ํ๊ธฐ ๋๋ฌธ์ ๊ด์ฌ์ ๊ฐ๊ณ ์ฌ๊ธฐ๊น์ง ์์ต๋๋ค.
๋๋ ์ฐ๋ฆฌ๊ฐ ๋ฌด์จ ๋ง์ ํ๋์ง ์ดํดํ์ง๋ง ์ด์ ๋ง ์์ํ๋ ์ฌ๋์ ์ด๋ฆ ๋๋ฌธ์ ๋ด๋ถ์ ๋ฌด์์ด ์๋์ง ํผ๋ํ ์ ์์ต๋๋ค.
๋ชฉํ๊ฐ ๊ณง ์ถ์๋ Blazor์ ์์ ๋์ฒดํ์ผ๋ก Razor ๊ตฌ์ฑ ์์๋ฅผ ๋ฐฐ์กํ๋ ๊ฒ์ด๋ผ๋ฉด ์ด๋ฆ์ ๋ณ๊ฒฝํ๊ณ ์ถ์ง ์์ต๋๋ค.
@Mitiko ์๋ฒ ์ธก Blazor๋ ํด๋ผ์ด์ธํธ ์ธก Blazor(WebAssembly ๊ธฐ๋ฐ)์ ๋ํ ๊ฒฐ์ ์ ์ํฅ์ ๋ฐ์ง ์์ต๋๋ค. ํ์๊ฐ ์ด๋ ์์ ์ ์ถ์๋๋ค๊ณ ๊ฐ์ ํ๋ฉด ์๋ฒ ์ธก Blazor๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ ์์ฉ ํ๋ก๊ทธ๋จ ๋ชจ๋ธ์ ์ค์ ๋ก ํน์ ํญ๋ชฉ์ ๊ณต์ ํ ์ ์์ผ๋ฏ๋ก ์ด๋ฆ๊ณผ ํจ๊ป ์ ๋ ฌํ๋ ๊ฒ์ด ๋ ํฉ๋ฆฌ์ ์ ๋๋ค.
์ด๊ฒ์ด ๊ถ๊ทน์ ์ผ๋ก ํผ๋์ค๋ฌ์ด ์ด์ ์ ๋๋ค. ํธ์คํ ๋๋ ์์น์ ์๊ดํ์ง ์๋ ๋ ผ๋ฆฌ๊ฐ ์๋ ๊ฒฝ์ฐ ์ด๋ฅผ ๋ฌด์์ด๋ผ๊ณ ํฉ๋๊น? ๊ทธ๋ฐ ๋ค์ ํ๋ ์์ํฌ๋ ์ฌ์ฉํ๋ "์"์ ๋ฐ๋ผ ์ด๋ฆ์ ๋ง์ ์ฒ๋ผ ๋ณ๊ฒฝํฉ๋๋ค. ์ด๋ฆ์ด ๋ ๊ฐ๋ผ๋ ๊ฒ์ ์๋ฏธ๊ฐ ์์ต๋๋ค. @poke ์ ์์ ์ ์๋ ๋น๋์ค๋ฅผ ์ฐธ์กฐํ์ญ์์ค: @Mitiko
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
๋ฅผ ์ฌ์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์
ํ๋ ์์ํฌ์
๋๋ค.
๋ด๊ฐ ๋ณด๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ฃผ๋ ๋ค์ด์ด๊ทธ๋จ์ ์ถ๊ฐํ์ต๋๋ค. ๋๊ธ ํ์
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 ํ์ฅ์๋ฅผ ์ ์งํ๋ ค๋ ๋ช ๊ฐ์ง ์ด์ ๊ฐ ์์ต๋๋ค.
@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์ ๋ค๋ฅธ ํ์ฅ์๊ฐ ํ์ํฉ๋๋ค."๋ฅผ ์๋ฏธํฉ๋๊น?
"์๋ํ ๊ธฐ์ ์๋ ์ด๋ฆ์ ํผ๋์ด ๋ฐ๋ฅธ๋ค"
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ ์ด๊ฒ์ด ์ข์ ์์ง์์ด๋ผ๊ณ ์๊ฐํ๋ค. Razor Components์ Blazor์ ๊ด๊ณ์ ๋ํ ํผ๋์ ๋์ด ์์ต๋๋ค. ์ฌ๋๋ค์ ๋ ๋๋ง ๋ฐฉ์์ด ๋ค๋ฅผ ๋ฟ ์๋๋ผ ํ๋ ์์ํฌ๋ ๋ค๋ฅด๋ค๊ณ ์๊ฐํ์ต๋๋ค.
๊ฒ๋ค๊ฐ ์ ๊ฐ์ธ์ ์ธ ์๊ฒฌ์ผ๋ก๋ Blazor๊ฐ ๋ฉ์ง ์ด๋ฆ์ ๋๋ค.