Blazor
๋จ์ผ ํ๋ก๊ทธ๋๋ฐ ๋ชจ๋ธ์์ ์๋ฒ์ชฝ ๋ ๋๋ง ๋ฐ ํด๋ผ์ด์ธํธ ๋ํํ ์์
์ ๋ชจ๋ ์ง์ํ๋ .NET ์น ํ๋์์ํฌ
- Razor ํด๋์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋๋ NuGet ํจํค์ง๋ก ๊ณต์ ๋ฐ ๋ฐฐํฌ๋ ์ ์์ต๋๋ค.
- ํด๋์ค๋ ์ผ๋ฐ์ ์ผ๋ก
.razor
ํ์ผ ํ์ฅ์๋ฅผ ๊ฐ์ง Razor ํ๊ทธ ํ์ด์ง ํ์์ผ๋ก ์์ฑ
- Razor๋ HTML, CSS, C# ์ฝ๋๋ฅผ ๊ฒฐํฉํ ๊ตฌ๋ฌธ
<PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
Blazor Web Apps
๋จ์ผ ์๋ฃจ์
์์ ์๋ฒ์ชฝ ๋ ๋๋ง ๋ฐ ์ ์ฒด ํด๋ผ์ด์ธํธ์ชฝ ๋ํํ ์์
์ ํฌํจํ๋ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ํคํ
์ฒ๋ฅผ ์ ๊ณตํ๋ฉฐ, ์๋ฒ์ชฝ ํด๋ผ์ด์ธํธ์ชฝ ๋ ๋๋ง ๋ชจ๋ ๊ฐ์ ์ ํํ๊ณ ๋์ผํ ํ์ด์ง์์ ํผํฉํ ์๋ ์์
- ์๋ฒ์์ UI ๋ ๋๋ง์ด ๋น ๋ฅด๊ฒ ์ํ๋๋ฏ๋ก ํ์ด์ง๊ฐ ๋น ๋ฅด๊ฒ ๋ก๋๋จ
- ๋ธ๋ผ์ฐ์ ์์ ์ค์๊ฐ ์ฐ๊ฒฐ์ ํตํด ์๋ฒ์์ UI ์ํธ ์์ฉ์ ์ฒ๋ฆฌํ๋ ๋ํํ SSR์ ์ง์
๋ํํ SSR(Interactive SSR)
์ ์ฌ์ฉํ๋ฉด ํด๋ผ์ด์ธํธ ์ฑ์์ ๊ธฐ๋ํ๋ ๊ฒ์ฒ๋ผ ํ๋ถํ ์ฌ์ฉ์ ํ๊ฒฝ์ ์ฌ์ฉํ ์ ์์ง๋ง ์๋ฒ ๋ฆฌ์์ค์ ์ก์ธ์คํ๊ธฐ ์ํด API ์๋ํฌ์ธํธ๋ฅผ ๋ง๋ค ํ์๊ฐ ์๋ค. ๋ํํ ํ์ด์ง์ ํ์ด์ง ์ฝํ ์ธ ๋ ๋ฏธ๋ฆฌ ๋ ๋๋ง๋จ
Blazor Hybrid
์น, ๋ชจ๋ฐ์ผ ๋ฐ ๋ฐ์คํฌํฑ ํ๋ซํผ์ ๋ํ ๋ค์ดํฐ๋ธ ๋ฐ ์น ๊ธฐ์ ์ด ํผํฉ๋ ๋ค์ดํฐ๋ธ ํด๋ผ์ด์ธํธ ์ฑ
- .NET ํ๋ก์ธ์ค์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์คํ
- ๋ก์ปฌ interop ์ฑ๋์ ์ฌ์ฉํ์ฌ ํฌํจ๋ Web View ์ปจํธ๋กค์ ์น UI๋ฅผ ๋ ๋๋ง
- C# ๋ฐ XAML์ ์ฌ์ฉํ์ฌ ๋ค์ดํฐ๋ธ ๋ชจ๋ฐ์ผ ๋ฐ ๋ฐ์คํฌํฑ ์ฑ์ ๋ง๋ค๊ธฐ ์ํ ํ๋ซํผ ๊ฐ ํ๋ ์์ํฌ์ธ .NET MAUI๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๋จ