Hello Blazor Server

🚀 Blazor Server 흐름 이해

📁 프로젝트 구조

Blazor Server 프로젝트를 생성하면 아래와 같은 기본 구조가 생성된다:

- Pages/
  - _Host.cshtml
  - Index.razor
  - Counter.razor
  - FetchData.razor
- Shared/
  - MainLayout.razor
  - NavMenu.razor
- App.razor
- Program.cs
- Startup.cs

---

🔧 Program.cs - 진입점

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}

• Blazor Server도 ASP.NET Core 기반 프로젝트이기 때문에 Main() 함수가 진입점이다.
• 여기서 Startup.cs를 지정하여 애플리케이션의 설정을 이어간다.

---

🧰 Startup.cs - 설정 클래스

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();           // Razor Page 기능 등록
    services.AddServerSideBlazor();     // Blazor Server 기능 등록
    services.AddSingleton<WeatherForecastService>();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...
    app.UseRouting();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();                            // SignalR 연결 허용
        endpoints.MapFallbackToPage("/_Host");               // 첫 진입 시 _Host.cshtml로 연결
    });
}

• MapBlazorHub()는 실시간 기능(서버 <-> 클라이언트 소통)을 위해 SignalR 허용.
• MapFallbackToPage("/_Host")를 통해 첫 진입 페이지를 _Host.cshtml로 지정.

---

🪟 _Host.cshtml - 진입 HTML

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

• <app>은 사용자 정의 태그이며, 내부에서 App.razor를 로딩한다.
• render-mode="ServerPrerendered"는 서버 렌더링 후 브라우저에 HTML을 전달한다.

---

🧩 App.razor - 라우터 설정

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

• 경로에 따라 해당 .razor 컴포넌트를 실행하며, 레이아웃으로 MainLayout을 사용함.

---

🧱 MainLayout.razor - 레이아웃 정의

<div class="sidebar">
    <NavMenu />
</div>
<div class="main">
    <div class="content px-4">
        @Body
    </div>
</div>

• <NavMenu />는 사이드 메뉴를 보여주는 컴포넌트.
• @Body는 해당 라우팅된 페이지의 내용이 들어오는 자리.

---

🧭 NavMenu.razor - 네비게이션 구성

<ul class="nav flex-column">
    <li class="nav-item">
        <NavLink class="nav-link" href="">Home</NavLink>
    </li>
    <li class="nav-item">
        <NavLink class="nav-link" href="counter">Counter</NavLink>
    </li>
    <li class="nav-item">
        <NavLink class="nav-link" href="fetchdata">Fetch data</NavLink>
    </li>
</ul>

• 각 메뉴 항목은 특정 라우트로 연결됨.
  • href="counter" → Counter.razor
  • href="fetchdata" → FetchData.razor

---

🔢 Counter.razor - 기본 기능 예제

@page "/counter"

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

• @page "/counter" → 이 컴포넌트는 /counter 경로에 매핑됨.
• @code 블록은 C# 코드가 들어가는 영역이며, 뷰(View)와 로직(Controller 역할)이 하나의 파일에 통합됨.

---

✅ Blazor Server 정리

항목	설명
프로젝트 구조	Pages, Shared, App.razor 등 포함
진입점	Program.cs → Startup.cs
렌더링 방식	서버 렌더링 (ServerPrerendered)
라우팅 방식	.razor 파일의 @page 지정
UI 구성 방식	.razor 파일 안에 HTML + C# 통합
특징	Controller와 View가 한 파일로 합쳐져 MVVM 느낌

---

🔍 왜 View가 없을까?

Blazor Server는 HTML과 C# 코드를 한곳에 통합하여 View와 Controller를 분리하지 않고도 깔끔한 구성과 코드 구조를 제공한다. 이 덕분에 MVVM (Model-View-ViewModel) 패턴처럼 보이기도 한다.

또한 기존 Razor Page나 MVC보다 동적 UI 처리가 훨씬 쉬우며, SPA(Single Page Application)처럼 부드러운 사용자 경험을 제공한다.

---