์ด ๋ฌธ์„œ์˜ ์›๋ณธ์€ ์™ธ๋ถ€ ์œ„ํ‚ค์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.
๊ฐœ๋ฐœ ์–ธ์–ด
์ตœ์ดˆ ๋ฆด๋ฆฌ์ฆˆ
2018๋…„
์ข…๋ฅ˜
๋ผ์ด์„ ์Šค
๊ฐœ๋ฐœ
์†Œ์Šค ์ฝ”๋“œ
1. ๊ฐœ์š”2. ์˜ˆ์‹œ3. ์—๋””์…˜
3.1. Blazor Server3.2. Blazor WebAssembly3.3. Blazor PWA3.4. Blazor Hybrid
4. ์ง€์›ํ•˜๋Š” ํ”Œ๋žซํผ

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[ํŽธ์ง‘]

ํ˜„์žฌ ๊ธฐํš๋‹จ๊ณ„์— ์žˆ์œผ๋ฉฐ, PWA[4] ์„ ์ง€์›ํ•˜๋Š” ์—๋””์…˜.

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 ์˜ ์•ฝ์ž๋กœ, ํ‘œ์ค€ ์›น ํ™˜๊ฒฝ์—์„œ ๋™์ž‘ํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ(๋ฐ์Šคํฌํƒ‘ ์•ฑ, ๋ชจ๋ฐ”์ผ ์•ฑ ๋“ฑ)๊ณผ ์œ ์‚ฌํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•œ๋‹ค๋Š” ๊ฒƒ์ด ํŠน์ง•. ๋”ฐ๋ผ์„œ ๋”ฐ๋กœ ์„ค์น˜ ๊ณผ์ •์ด ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์ฒ˜์Œ ์ ‘์†ํ•œ ์ดํ›„์—๋Š” ์˜คํ”„๋ผ์ธ ์ƒํƒœ์—์„œ๋„ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
[5] HTML, CSS ๋“ฑ