์ด ๋ฌธ์์ ์๋ณธ์ ์ธ๋ถ ์ํค์์ ๊ฐ์ ธ์์ต๋๋ค.
๊ฐ๋ฐ ์ธ์ด | |
์ต์ด ๋ฆด๋ฆฌ์ฆ | 2018๋
|
์ข
๋ฅ | |
๋ผ์ด์ ์ค | |
๊ฐ๋ฐ | |
์์ค ์ฝ๋ |
1. ๊ฐ์[ํธ์ง]
๋ง์ดํฌ๋ก์ํํธ์์ ๊ฐ๋ฐํ ์คํ์์ค ์น ๊ฐ๋ฐ ํ๋ ์์ํฌ. ์ ์ฌํ ๋ค๋ฅธ ์น ๊ฐ๋ฐ ํ๋ ์์ํฌ (React, Angular, Vue ๋ฑ)์์ ์ฐจ์ด์ ์ค ์ ์ผ ํฐ ๋ถ๋ถ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋ .NET Core ๊ธฐ๋ฐ์ C#์ผ๋ก ์์ฑํ ์ ์๋ค๋ ๊ฒ์ด๋ค.(๋จ์ ์ผ๋ก๋ XAML๋ฅผ ์ฌ์ฉํ์ง ์๊ณ HTML๊ณผ CSS๊ฐ ๋ฐ๋ก ํ์ํ๋ค๋ ์ ์ด๋ค.)์ด๋ฅผ ์ํด ์ต์ ์น ํ์ค ์ค ํ๋์ธ WebAssembly๋ฅผ ์ฑํํ์ผ๋ฉฐ, ๋ฐ๋ผ์ C#์ผ๋ก ์์ฑ๋ ํด๋ผ์ด์ธํธ ์ชฝ์ ๋ก์ง ์ฝ๋๋ค์ ์ ๋ถ .NET Standard Assembly ํ์ผ๋ก ์ปดํ์ผ๋ ํ WebAssembly ๋ฐํ์ ์์์ ์คํ๋๋ค.[1]
2. ์์[ํธ์ง]
// Pages/Counter.razor
@page "/counter"
<h2>์นด์ดํฐ ์์</h2>
<p>ํด๋ฆญ ํ์: @count</p>
<p>์ต๋ ํด๋ฆญ๊ฐ๋ฅ ํ์: @MaxCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">ํด๋ฆญ</button>
@code {
private int count = 0;
[Parameter]
public int MaxCount { get; set; } = 10;
private void IncrementCount()
{
if (count < MaxCount)
{
count++;
}
else
{
Console.WriteLine("์ต๋ ํด๋ฆญํ์์ ๋๋ฌํ์์ต๋๋ค!");
}
}
}// Pages/Index.razor
@page "/"
<h1>๋ธ๋ ์ด์ ๋ฅผ ์ด์ฉํ ์น์ฌ์ดํธ</h1>
<p>Hello, World!</p>
<Counter MaxCount="50" />3. ์๋์ [ํธ์ง]
3.1. Blazor Server[ํธ์ง]
ASP.NET Core ์๋ฒ์ Razor ์์ง์ ์ด์ฉํ ์๋์
์ผ๋ก, ์๋ฒ์์ ๋๋ถ๋ถ์ ๋ ๋๋ง๊ณผ ํ๋ก์ธ์ฑ์ด ์ด๋ฃจ์ด์ง๋ ๊ฒ์ด ํน์ง์ด๋ค. ๋ฐ๋ผ์ ํด๋ผ์ด์ธํธ์ ๋ถ๋ด์ด ์ ์ผ๋ฉฐ, ์๋ฒ์ชฝ์์ ์ด๋ฃจ์ด์ง๋ ์
๋ฐ์ดํธ๋ค์ ํด๋ผ์ด์ธํธ ์ชฝ์์ SignalR ์ ์ด์ฉํด ์์ ๋ฐ๋๋ค.
3.2. Blazor WebAssembly[ํธ์ง]
SPA[2] ๋ฅผ ๊ตฌํํ๋ ์๋์
์ผ๋ก, Blazor Server ์๋์
๊ณผ ๋ฐ๋๋ก SPA ์ ํน์ง๋ต๊ฒ ํด๋ผ์ด์ธํธ์์ ๋๋ถ๋ถ์ ๋ ๋๋ง์ด ์ด๋ฃจ์ด์ง๋ค. ๋ฐ๋ผ์ ์๋ฒ์ ๋ถ๋ด์ ๊ฐ์ํ์ง๋ง ํด๋ผ์ด์ธํธ์ ๋ถ๋ด์ด ๋์์ง๋ ๋์์ ํด๋ผ์ด์ธํธ๊ฐ ์ฒ์ ๋ด๋ ค๋ฐ๋ ํ์ผ์ ์ฉ๋๋ ์ฆ๊ฐํ๋ค.[3] ํ์ง๋ง ์๋ฒ๋ฅผ ๊ฑฐ์น์ง ์๊ณ ํด๋ผ์ด์ธํธ์์ ๋ชจ๋ ๋ก์ง์ด ์คํ๋๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ธ ์๋์ฐ ์ดํ๋ฆฌ์ผ์ด์
์ ์คํ๋ ๋ฐ์์๋์ ํ๋ถํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.
3.3. Blazor PWA[ํธ์ง]
3.4. Blazor Hybrid[ํธ์ง]
Blazor PWA ์๋์
๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ํ์ฌ ๊ธฐํ๋จ๊ณ์ ์๋ ์๋์
. ํ๋ซํผ์ ์ข
์์ ์ด์ง๋ง ๊ธฐ์กด ์น ๊ธฐ์ [5]์ ์ด์ฉํด ๋ ๋๋ง์ ํ๋ค.
4. ์ง์ํ๋ ํ๋ซํผ[ํธ์ง]
[1] ์ด๋ Blazor WebAssembly ์๋์
๋ง ํด๋น๋๋ค.
[2] Single-Page Application ์ ์ฝ์๋ก, ์น์๋ฒ์์ ๋ชจ๋ HTML ํ์ด์ง๋ฅผ ์์ฑํ๋ ์ ํต์ ์ธ ๋ฐฉ์์ด ์๋๋ผ ํด๋ผ์ด์ธํธ ์ชฝ์์ JavaScript๋ WebAssembly๋ฅผ ํตํด HTMLํ์ด์ง๋ฅผ ์์ฑํ๋ฉฐ ์๋ฒ์ชฝ์์๋ ์ต์ํ์ ๋ฆฌ์์ค๋ง ๋ฐํํ๋ ํํ์ ์น์ดํ๋ฆฌ์ผ์ด์
์ ๋งํ๋ค. ์ด ๊ฐ๋
์ ์ฑํํ ํ๋ ์์ํฌ๋ก๋ ๋ํ์ ์ผ๋ก React, Angular, Vue ๋ฑ์ด ์๋ค.
[3] ๋ณดํต ์๋ฉ๊ฐ์์ ์์ญ๋ฉ๊ฐ์ ๋ฌํ๋ ํ์ผ์ ๋ด๋ ค๋ฐ๊ฒ ๋์ง๋ง, ์ฒ์ ํ๋ฒ๋ง ๋ฐ์ผ๋ฉด ๋๋ค. ์ด๋ ๊ณผ๊ฑฐ ํ๋์๋ ์ค๋ฒ๋ผ์ดํธ ๋ฑ์ RIA๋ก ์ ์๋ ์ดํ๋ฆฌ์ผ์ด์
์ ํน์ง๊ณผ ๋์ผํ๋ค.
[4] Progressive Web Application ์ ์ฝ์๋ก, ํ์ค ์น ํ๊ฒฝ์์ ๋์ํ์ง๋ง ๋ค๋ฅธ ๋ค์ดํฐ๋ธ ์ฑ(๋ฐ์คํฌํ ์ฑ, ๋ชจ๋ฐ์ผ ์ฑ ๋ฑ)๊ณผ ์ ์ฌํ ๊ฒฝํ์ ์ ๊ณตํ๋ค๋ ๊ฒ์ด ํน์ง. ๋ฐ๋ผ์ ๋ฐ๋ก ์ค์น ๊ณผ์ ์ด ์กด์ฌํ์ง ์์ผ๋ฉฐ, ์ฒ์ ์ ์ํ ์ดํ์๋ ์คํ๋ผ์ธ ์ํ์์๋ ์๋น์ค๋ฅผ ์ด์ฉํ ์ ์๋ค.