🌊 Blazor WebAssembly: 브라우저가 곧 런타임!

먼저 Blazor WebAssembly(줄여서 WASM)부터 살펴볼게. 이 녀석은 정말 혁신적이야! 🚀

WebAssembly는 뭐냐고? 간단히 말하면, 브라우저에서 네이티브에 가까운 속도로 실행되는 바이너리 코드 형식이야. 원래는 C, C++, Rust 같은 언어로 작성된 코드를 웹에서 돌리기 위해 만들어졌는데, .NET 팀이 여기에 C#을 얹은 거지!

Blazor WASM의 작동 원리를 쉽게 설명하면 이래:

dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run

MyBlazorApp/
├── Pages/              # 페이지 컴포넌트들
│   ├── Index.razor     # 홈 페이지
│   ├── Counter.razor   # 카운터 예제
│   └── FetchData.razor # 데이터 페칭 예제
├── Shared/             # 공유 컴포넌트
│   ├── MainLayout.razor
│   └── NavMenu.razor
├── wwwroot/            # 정적 파일들
│   ├── css/
│   ├── index.html      # 진입점 HTML
│   └── favicon.ico
├── App.razor           # 루트 컴포넌트
├── Program.cs          # 애플리케이션 진입점
└── _Imports.razor      # 전역 using 선언

@page "/todo"

<h3>나의 할 일 목록 📝</h3>

<div>
    <input @bind="newTodo" placeholder="새로운 할 일 입력" />
    <button @onclick="AddTodo">추가</button>
</div>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <span style="@(todo.IsDone ? "text-decoration: line-through;" : "")">
                @todo.Title
            </span>
            <button @onclick="() => RemoveTodo(todo)">삭제</button>
        </li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
    private string newTodo = "";

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = "";
        }
    }

    private void RemoveTodo(TodoItem todo)
    {
        todos.Remove(todo);
    }

    private class TodoItem
    {
        public string Title { get; set; } = "";
        public bool IsDone { get; set; }
    }
}

🎨 Blazor WASM의 고급 기능들

기본을 넘어서 좀 더 깊이 들어가볼까? Blazor WASM에는 정말 멋진 기능들이 많아!

1. JavaScript Interop (JS 상호운용)

아무리 C#이 좋아도, 가끔은 JavaScript 라이브러리를 써야 할 때가 있지. 걱정 마! Blazor는 JS와 완벽하게 통신할 수 있어:

@inject IJSRuntime JS

<button @onclick="ShowAlert">알림 띄우기</button>

@code {
    private async Task ShowAlert()
    {
        await JS.InvokeVoidAsync("alert", "안녕하세요! Blazor에서 왔어요! 👋");
    }
    
    // JavaScript 함수 호출하고 결과 받기
    private async Task<string> GetUserAgent()
    {
        return await JS.InvokeAsync<string>("eval", "navigator.userAgent");
    }
}

반대로 JavaScript에서 C# 메서드를 호출할 수도 있어! wwwroot/index.html에 이런 스크립트를 추가하고:

<script>
    window.callDotNetMethod = (dotNetHelper) => {
        dotNetHelper.invokeMethodAsync('UpdateMessage', '자바스크립트에서 안녕!');
    };
</script>

C# 코드에서는 이렇게 받아:

@implements IDisposable

<p>@message</p>

@code {
    private string message = "초기 메시지";
    private DotNetObjectReference<MyComponent>? objRef;

    protected override void OnInitialized()
    {
        objRef = DotNetObjectReference.Create(this);
    }

    [JSInvokable]
    public void UpdateMessage(string newMessage)
    {
        message = newMessage;
        StateHasChanged(); // UI 업데이트
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

// App.razor
<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="@lazyLoadedAssemblies"
        OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new();

    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/admin")
        {
            var assemblies = await LazyLoadAssembly(new[] { "AdminModule.dll" });
            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

<PropertyGroup>
    <RunAOTCompilation>true</RunAOTCompilation>
</PropertyGroup>

<Virtualize Items="@allItems" Context="item">
    <div>@item.Name</div>
</Virtualize>

⚡ Blazor Server: 실시간 연결의 마법

자, 이제 Blazor Server를 알아볼 차례야! 이 녀석은 WebAssembly와는 완전히 다른 접근 방식을 취해.

Blazor Server의 핵심 아이디어는 간단해: 모든 UI 로직과 상태를 서버에서 관리하고, 브라우저는 그냥 "화면"만 보여주는 거야. 브라우저와 서버는 SignalR이라는 실시간 통신 기술로 연결돼 있어.

작동 방식을 살펴보자:

dotnet new blazorserver -o MyBlazorServerApp
cd MyBlazorServerApp
dotnet run

MyBlazorServerApp/
├── Pages/              # 페이지 컴포넌트들
├── Shared/             # 공유 컴포넌트
├── Data/               # 데이터 서비스들 (Server만의 특징!)
│   └── WeatherForecastService.cs
├── wwwroot/            # 정적 파일들
├── App.razor           # 루트 컴포넌트
├── Program.cs          # 애플리케이션 설정
└── _Imports.razor      # 전역 using

var builder = WebApplication.CreateBuilder(args);

// Blazor Server 서비스 추가
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// 싱글톤 서비스 등록 (모든 사용자가 공유)
builder.Services.AddSingleton<WeatherForecastService>();

// 스코프 서비스 등록 (각 사용자 세션마다 인스턴스)
builder.Services.AddScoped<UserService>();

var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub(); // SignalR 허브 매핑!
app.MapFallbackToPage("/_Host");

app.Run();

🎯 실전 예제: 실시간 채팅 앱 만들기

Blazor Server의 진가는 실시간 애플리케이션을 만들 때 드러나! 간단한 채팅 앱을 만들어볼까?

먼저 채팅 서비스를 만들어:

// Services/ChatService.cs
public class ChatService
{
    private readonly List<ChatMessage> messages = new();
    public event Action? OnMessagesChanged;

    public List<ChatMessage> GetMessages() => messages;

    public async Task SendMessage(string user, string message)
    {
        messages.Add(new ChatMessage
        {
            User = user,
            Message = message,
            Timestamp = DateTime.Now
        });

        // 모든 구독자에게 알림
        OnMessagesChanged?.Invoke();
        await Task.CompletedTask;
    }
}

public class ChatMessage
{
    public string User { get; set; } = "";
    public string Message { get; set; } = "";
    public DateTime Timestamp { get; set; }
}

Program.cs에 싱글톤으로 등록:

builder.Services.AddSingleton<ChatService>();

이제 채팅 컴포넌트를 만들어:

@page "/chat"
@inject ChatService ChatService
@implements IDisposable

<h3>실시간 채팅방 💬</h3>

<div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto;">
    @foreach (var msg in messages)
    {
        <div style="margin-bottom: 10px;">
            <strong>@msg.User</strong> 
            <span style="color: #999; font-size: 0.8em;">
                @msg.Timestamp.ToString("HH:mm:ss")
            </span>
            <br/>
            @msg.Message
        </div>
    }
</div>

<div style="margin-top: 10px;">
    <input @bind="username" placeholder="이름" style="width: 100px;" />
    <input @bind="newMessage" placeholder="메시지 입력" 
           @onkeyup="HandleKeyUp" style="width: 300px;" />
    <button @onclick="SendMessage">전송</button>
</div>

@code {
    private List<ChatMessage> messages = new();
    private string username = "익명";
    private string newMessage = "";

    protected override void OnInitialized()
    {
        messages = ChatService.GetMessages();
        ChatService.OnMessagesChanged += UpdateMessages;
    }

    private async Task SendMessage()
    {
        if (!string.IsNullOrWhiteSpace(newMessage))
        {
            await ChatService.SendMessage(username, newMessage);
            newMessage = "";
        }
    }

    private async Task HandleKeyUp(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await SendMessage();
        }
    }

    private void UpdateMessages()
    {
        messages = ChatService.GetMessages();
        InvokeAsync(StateHasChanged); // UI 업데이트!
    }

    public void Dispose()
    {
        ChatService.OnMessagesChanged -= UpdateMessages;
    }
}

짠! 🎉 이제 여러 브라우저 탭을 열어서 테스트해봐. 한 탭에서 메시지를 보내면 다른 모든 탭에 실시간으로 나타날 거야! SignalR이 자동으로 모든 연결된 클라이언트에게 업데이트를 푸시하거든. 완전 마법 같지? ✨

// _Host.cshtml에 추가
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        reconnectionOptions: {
            maxRetries: 10,
            retryIntervalMilliseconds: 2000
        }
    });
</script>

🔄 WebAssembly vs Server: 어떤 걸 선택해야 할까?

자, 이제 가장 중요한 질문이야. "내 프로젝트에는 뭘 써야 하지?" 🤔

정답은... "상황에 따라 다르다"야! (개발자들이 제일 싫어하는 답변이지? ㅋㅋ) 하지만 걱정 마, 명확한 가이드라인을 줄게!

🎨 컴포넌트 디자인 패턴과 베스트 프랙티스

이제 실전에서 정말 중요한 부분으로 넘어가볼게! Blazor 컴포넌트를 어떻게 설계하고 구조화해야 유지보수가 쉽고 재사용 가능한 코드를 만들 수 있을까? 🤔

1. 컴포넌트 파라미터와 이벤트 콜백

컴포넌트 간 데이터를 주고받는 건 정말 중요해. Blazor에서는 이렇게 해:

// ChildComponent.razor
<div>
    <h4>@Title</h4>
    <button @onclick="HandleClick">클릭!</button>
</div>

@code {
    // 부모로부터 받는 파라미터
    [Parameter]
    public string Title { get; set; } = "";

    // 부모에게 이벤트 전달
    [Parameter]
    public EventCallback<string> OnButtonClicked { get; set; }

    private async Task HandleClick()
    {
        await OnButtonClicked.InvokeAsync($"{Title} 버튼이 클릭됨!");
    }
}

부모 컴포넌트에서는 이렇게 사용해:

// ParentComponent.razor
<ChildComponent Title="첫 번째" OnButtonClicked="HandleChildClick" />
<ChildComponent Title="두 번째" OnButtonClicked="HandleChildClick" />

<p>메시지: @message</p>

@code {
    private string message = "";

    private void HandleChildClick(string msg)
    {
        message = msg;
    }
}

// 최상위 컴포넌트
<CascadingValue Value="currentUser">
    <MainLayout>
        @Body
    </MainLayout>
</CascadingValue>

@code {
    private User currentUser = new User { Name = "홍길동" };
}

// 깊은 곳의 자식 컴포넌트
@code {
    [CascadingParameter]
    private User CurrentUser { get; set; } = null!;

    // 이제 CurrentUser를 바로 사용 가능!
}

2. 상태 관리 패턴

앱이 커지면 상태 관리가 복잡해져. 여러 컴포넌트가 같은 데이터를 공유해야 할 때가 많거든. 이럴 땐 상태 관리 서비스를 만들어:

// Services/AppState.cs
public class AppState
{
    private string currentUser = "";
    private int notificationCount = 0;

    public string CurrentUser
    {
        get => currentUser;
        set
        {
            currentUser = value;
            NotifyStateChanged();
        }
    }

    public int NotificationCount
    {
        get => notificationCount;
        set
        {
            notificationCount = value;
            NotifyStateChanged();
        }
    }

    public event Action? OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

Program.cs에 등록:

builder.Services.AddScoped<AppState>(); // WASM
// 또는
builder.Services.AddSingleton<AppState>(); // Server

컴포넌트에서 사용:

@inject AppState AppState
@implements IDisposable

<p>현재 사용자: @AppState.CurrentUser</p>
<p>알림: @AppState.NotificationCount개</p>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}

dotnet add package Fluxor.Blazor.Web

// Store/CounterState.cs
public record CounterState
{
    public int Count { get; init; }
}

public class CounterFeature : Feature<CounterState>
{
    public override string GetName() => "Counter";
    protected override CounterState GetInitialState() => new() { Count = 0 };
}

// Store/CounterActions.cs
public class IncrementCounterAction { }
public class DecrementCounterAction { }

// Store/CounterReducers.cs
public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState OnIncrement(CounterState state, IncrementCounterAction action)
        => state with { Count = state.Count + 1 };

    [ReducerMethod]
    public static CounterState OnDecrement(CounterState state, DecrementCounterAction action)
        => state with { Count = state.Count - 1 };
}

@inherits FluxorComponent
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<p>카운트: @CounterState.Value.Count</p>
<button @onclick="() => Dispatcher.Dispatch(new IncrementCounterAction())">+</button>
<button @onclick="() => Dispatcher.Dispatch(new DecrementCounterAction())">-</button>

3. 폼 처리와 유효성 검사

Blazor의 폼 처리는 정말 강력해! EditForm 컴포넌트와 데이터 어노테이션을 활용하면 쉽게 유효성 검사를 구현할 수 있어:

// Models/UserRegistration.cs
using System.ComponentModel.DataAnnotations;

public class UserRegistration
{
    [Required(ErrorMessage = "이름은 필수입니다.")]
    [StringLength(50, MinimumLength = 2, ErrorMessage = "이름은 2-50자여야 합니다.")]
    public string Name { get; set; } = "";

    [Required(ErrorMessage = "이메일은 필수입니다.")]
    [EmailAddress(ErrorMessage = "올바른 이메일 형식이 아닙니다.")]
    public string Email { get; set; } = "";

    [Required(ErrorMessage = "비밀번호는 필수입니다.")]
    [StringLength(100, MinimumLength = 8, ErrorMessage = "비밀번호는 최소 8자 이상이어야 합니다.")]
    [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$", 
        ErrorMessage = "비밀번호는 대소문자와 숫자를 포함해야 합니다.")]
    public string Password { get; set; } = "";

    [Compare(nameof(Password), ErrorMessage = "비밀번호가 일치하지 않습니다.")]
    public string ConfirmPassword { get; set; } = "";

    [Range(18, 100, ErrorMessage = "나이는 18-100 사이여야 합니다.")]
    public int Age { get; set; }
}

폼 컴포넌트:

@page "/register"

<h3>회원가입 📝</h3>

<EditForm Model="registration" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>이름:</label>
        <InputText @bind-Value="registration.Name" />
        <ValidationMessage For="() => registration.Name" />
    </div>

    <div>
        <label>이메일:</label>
        <InputText @bind-Value="registration.Email" type="email" />
        <ValidationMessage For="() => registration.Email" />
    </div>

    <div>
        <label>비밀번호:</label>
        <InputText @bind-Value="registration.Password" type="password" />
        <ValidationMessage For="() => registration.Password" />
    </div>

    <div>
        <label>비밀번호 확인:</label>
        <InputText @bind-Value="registration.ConfirmPassword" type="password" />
        <ValidationMessage For="() => registration.ConfirmPassword" />
    </div>

    <div>
        <label>나이:</label>
        <InputNumber @bind-Value="registration.Age" />
        <ValidationMessage For="() => registration.Age" />
    </div>

    <button type="submit">가입하기</button>
</EditForm>

@if (isSuccess)
{
    <div style="color: green; margin-top: 20px;">
        ✅ 회원가입이 완료되었습니다!
    </div>
}

@code {
    private UserRegistration registration = new();
    private bool isSuccess = false;

    private async Task HandleValidSubmit()
    {
        // 여기서 API 호출이나 데이터베이스 저장
        await Task.Delay(1000); // 시뮬레이션
        isSuccess = true;
    }
}

이렇게 하면 사용자가 입력하는 즉시 유효성 검사가 실행되고, 에러 메시지가 표시돼. 완전 편하지? 😊

🔌 API 통신과 HTTP 클라이언트

실제 애플리케이션에서는 백엔드 API와 통신해야 하는 경우가 대부분이지. Blazor에서 HTTP 요청을 처리하는 방법을 알아보자! 🌐

HttpClient 설정

먼저 Program.cs에서 HttpClient를 등록해야 해:

// Blazor WASM
builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// 또는 Named HttpClient (여러 API 사용시)
builder.Services.AddHttpClient("MyAPI", client => 
{
    client.BaseAddress = new Uri("https://api.example.com");
    client.DefaultRequestHeaders.Add("Accept", "application/json");
});

// Blazor Server
builder.Services.AddHttpClient();

API 서비스 만들기

API 호출 로직을 서비스로 분리하는 게 좋아. 재사용성도 높아지고 테스트하기도 쉬워지거든:

// Services/WeatherService.cs
public class WeatherService
{
    private readonly HttpClient http;
    private readonly ILogger<WeatherService> logger;

    public WeatherService(HttpClient http, ILogger<WeatherService> logger)
    {
        this.http = http;
        this.logger = logger;
    }

    public async Task<List<WeatherForecast>?> GetForecastAsync()
    {
        try
        {
            var response = await http.GetFromJsonAsync<List<WeatherForecast>>(
                "api/weather/forecast");
            return response;
        }
        catch (HttpRequestException ex)
        {
            logger.LogError(ex, "날씨 데이터를 가져오는데 실패했습니다.");
            return null;
        }
    }

    public async Task<bool> CreateForecastAsync(WeatherForecast forecast)
    {
        try
        {
            var response = await http.PostAsJsonAsync("api/weather/forecast", forecast);
            return response.IsSuccessStatusCode;
        }
        catch (HttpRequestException ex)
        {
            logger.LogError(ex, "날씨 데이터 생성에 실패했습니다.");
            return false;
        }
    }

    public async Task<bool> UpdateForecastAsync(int id, WeatherForecast forecast)
    {
        try
        {
            var response = await http.PutAsJsonAsync($"api/weather/forecast/{id}", forecast);
            return response.IsSuccessStatusCode;
        }
        catch (HttpRequestException ex)
        {
            logger.LogError(ex, "날씨 데이터 수정에 실패했습니다.");
            return false;
        }
    }

    public async Task<bool> DeleteForecastAsync(int id)
    {
        try
        {
            var response = await http.DeleteAsync($"api/weather/forecast/{id}");
            return response.IsSuccessStatusCode;
        }
        catch (HttpRequestException ex)
        {
            logger.LogError(ex, "날씨 데이터 삭제에 실패했습니다.");
            return false;
        }
    }
}

public class WeatherForecast
{
    public int Id { get; set; }
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string? Summary { get; set; }
}

Program.cs에 등록:

builder.Services.AddScoped<WeatherService>();

컴포넌트에서 사용:

@page "/weather"
@inject WeatherService WeatherService

<h3>날씨 예보 🌤️</h3>

@if (isLoading)
{
    <p>로딩 중... ⏳</p>
}
else if (forecasts == null)
{
    <p>데이터를 불러오는데 실패했습니다. 😢</p>
}
else
{
    <table>
        <thead>
            <tr>
                <th>날짜</th>
                <th>온도 (°C)</th>
                <th>요약</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private List<WeatherForecast>? forecasts;
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await WeatherService.GetForecastAsync();
        isLoading = false;
    }
}

dotnet add package Microsoft.Extensions.Http.Polly

builder.Services.AddHttpClient<WeatherService>()
    .AddTransientHttpErrorPolicy(policy => 
        policy.WaitAndRetryAsync(3, retryAttempt => 
            TimeSpan.FromSeconds(Math.Pow(2, retryAttempt))))
    .AddTransientHttpErrorPolicy(policy => 
        policy.CircuitBreakerAsync(5, TimeSpan.FromSeconds(30)));

인증과 권한 부여

실제 앱에서는 인증이 필수지. Blazor는 ASP.NET Core의 인증 시스템을 그대로 사용할 수 있어:

// Program.cs에 인증 추가
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

// CustomAuthStateProvider.cs
public class CustomAuthStateProvider : AuthenticationStateProvider
{
    private readonly HttpClient http;
    private readonly ILocalStorageService localStorage;

    public CustomAuthStateProvider(HttpClient http, ILocalStorageService localStorage)
    {
        this.http = http;
        this.localStorage = localStorage;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var token = await localStorage.GetItemAsync<string>("authToken");

        if (string.IsNullOrEmpty(token))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        http.DefaultRequestHeaders.Authorization = 
            new AuthenticationHeaderValue("Bearer", token);

        var claims = ParseClaimsFromJwt(token);
        var identity = new ClaimsIdentity(claims, "jwt");
        var user = new ClaimsPrincipal(identity);

        return new AuthenticationState(user);
    }

    public void NotifyUserAuthentication(string token)
    {
        var claims = ParseClaimsFromJwt(token);
        var identity = new ClaimsIdentity(claims, "jwt");
        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(
            Task.FromResult(new AuthenticationState(user)));
    }

    public void NotifyUserLogout()
    {
        var identity = new ClaimsIdentity();
        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(
            Task.FromResult(new AuthenticationState(user)));
    }

    private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
    {
        var payload = jwt.Split('.')[1];
        var jsonBytes = ParseBase64WithoutPadding(payload);
        var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);
        return keyValuePairs!.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString()!));
    }

    private byte[] ParseBase64WithoutPadding(string base64)
    {
        switch (base64.Length % 4)
        {
            case 2: base64 += "=="; break;
            case 3: base64 += "="; break;
        }
        return Convert.FromBase64String(base64);
    }
}

컴포넌트에서 인증 상태 사용:

@page "/profile"
@attribute [Authorize] // 로그인한 사용자만 접근 가능!

<AuthorizeView>
    <Authorized>
        <h3>안녕하세요, @context.User.Identity?.Name님! 👋</h3>
        <p>이메일: @context.User.FindFirst("email")?.Value</p>
    </Authorized>
    <NotAuthorized>
        <p>로그인이 필요합니다.</p>
    </NotAuthorized>
</AuthorizeView>

<AuthorizeView Roles="Admin">
    <Authorized>
        <button>관리자 기능</button>
    </Authorized>
</AuthorizeView>

🎨 UI 라이브러리와 컴포넌트 생태계

Blazor의 큰 장점 중 하나는 풍부한 UI 컴포넌트 라이브러리 생태계야! 처음부터 모든 걸 만들 필요 없이, 검증된 라이브러리들을 활용할 수 있어. 🎉

인기 있는 Blazor UI 라이브러리들:

dotnet add package MudBlazor

builder.Services.AddMudServices();

@using MudBlazor

<MudButton Variant="Variant.Filled" Color="Color.Primary">
    클릭하세요!
</MudButton>

<MudTextField @bind-Value="name" Label="이름" Variant="Variant.Outlined" />

<MudDataGrid Items="@items" Filterable="true" SortMode="SortMode.Multiple">
    <Columns>
        <PropertyColumn Property="x => x.Name" Title="이름" />
        <PropertyColumn Property="x => x.Age" Title="나이" />
    </Columns>
</MudDataGrid>

dotnet add package Radzen.Blazor

<RadzenButton Text="클릭" ButtonStyle="ButtonStyle.Primary" />

<RadzenDataGrid Data="@orders" TItem="Order">
    <Columns>
        <RadzenDataGridColumn TItem="Order" Property="OrderID" Title="주문번호" />
        <RadzenDataGridColumn TItem="Order" Property="CustomerName" Title="고객명" />
    </Columns>
</RadzenDataGrid>

<RadzenChart>
    <RadzenLineSeries Data="@revenue" CategoryProperty="Month" ValueProperty="Amount" />
</RadzenChart>

dotnet add package Blazorise.Bootstrap5
dotnet add package Blazorise.Icons.FontAwesome

builder.Services
    .AddBlazorise(options => { options.Immediate = true; })
    .AddBootstrap5Providers()
    .AddFontAwesomeIcons();

<Button Color="Color.Primary">버튼</Button>

<Field>
    <FieldLabel>이메일</FieldLabel>
    <TextEdit @bind-Text="@email" Role="TextRole.Email" />
</Field>

<Modal @ref="modalRef">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>제목</ModalTitle>
        </ModalHeader>
        <ModalBody>
            내용이 여기에...
        </ModalBody>
    </ModalContent>
</Modal>

dotnet new razorclasslib -o MyComponents

// MyComponents/LoadingSpinner.razor
<div class="spinner-container">
    <div class="spinner"></div>
    @if (!string.IsNullOrEmpty(Message))
    {
        <p>@Message</p>
    }
</div>

@code {
    [Parameter]
    public string Message { get; set; } = "로딩 중...";
}

// 프로젝트 참조 추가
dotnet add reference ../MyComponents/MyComponents.csproj

// _Imports.razor에 추가
@using MyComponents

// 컴포넌트 사용
<LoadingSpinner Message="데이터를 불러오는 중..." />

🚀 성능 최적화와 프로덕션 배포

개발은 끝났어! 이제 실제 사용자들에게 배포할 차례야. 하지만 그 전에 성능 최적화를 해야 해. 🏎️

1. 렌더링 최적화

Blazor는 기본적으로 똑똑하게 렌더링하지만, 우리가 더 최적화할 수 있어:

// ShouldRender 오버라이드
@code {
    private int count = 0;
    private string message = "";

    protected override bool ShouldRender()
    {
        // 특정 조건에서만 렌더링
        return count % 2 == 0;
    }

    // 또는 @key 디렉티브 사용
}

// 리스트 렌더링시 @key 사용
@foreach (var item in items)
{
    <div @key="item.Id">
        @item.Name
    </div>
}

2. 코드 분할과 지연 로딩

큰 애플리케이션은 처음부터 모든 걸 로드하지 말고, 필요할 때 로드하도록 해:

// App.razor
<Router AppAssembly="@typeof(App).Assembly"
        OnNavigateAsync="@OnNavigateAsync">
    <Navigating>
        <p>페이지를 불러오는 중...</p>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new();

    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path.Contains("admin") && 
            !lazyLoadedAssemblies.Any(a => a.GetName().Name == "AdminModule"))
        {
            var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                new[] { "AdminModule.dll" });
            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

3. 이미지 최적화

이미지는 웹 앱에서 가장 큰 용량을 차지해. 최적화가 필수야:

// 반응형 이미지 사용
<img src="image-small.jpg" 
     srcset="image-small.jpg 480w, 
             image-medium.jpg 800w, 
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 
            (max-width: 1000px) 800px, 
            1200px"
     alt="설명" />

// 지연 로딩
<img src="image.jpg" loading="lazy" alt="설명" />

dotnet publish -c Release

<base href="/repository-name/" />

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup .NET
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '8.0.x'
    
    - name: Publish
      run: dotnet publish -c Release -o release
    
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: release/wwwroot

# Azure CLI로 배포
az staticwebapp create \
    --name my-blazor-app \
    --resource-group my-resource-group \
    --source https://github.com/username/repo \
    --location "East Asia" \
    --branch main \
    --app-location "/" \
    --output-location "wwwroot"

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
WORKDIR /src
COPY ["MyBlazorServer.csproj", "./"]
RUN dotnet restore "MyBlazorServer.csproj"
COPY . .
RUN dotnet build "MyBlazorServer.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "MyBlazorServer.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "MyBlazorServer.dll"]

docker build -t my-blazor-server .
docker run -d -p 8080:80 --name blazor-app my-blazor-server

az webapp up --name my-blazor-server --resource-group my-rg --runtime "DOTNETCORE:8.0"