Blazor

Blazor

Tags
C#
Frontend
Mobile
Published
Author

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๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋นŒ๋“œ๋จ