C# Blazor WebAssembly 프로젝트 구성 요소 설명

 

 

 

1. 프로젝트 구성 파일 : Program.cs

애플리케이션의 진입점으로, 앱이 시작할 때 실행되는 코드가 들어 있음.
여기서 DI(Dependency Injection)를 설정하거나 HttpClient와 같은 서비스를 등록.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();

역할

• Add<App>:  <App> 컴포넌트를 HTML의 #app 요소에 렌더링.
• HttpClient 등록:  API 호출을 위해 사용.

 

수정 포인트: API 기본 주소 변경: HttpClient의 BaseAddress를 API 서버 주소로 설정.

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://your-api-server.com") });

 

---

 

2. wwwroot 폴더

역할: Blazor WebAssembly의 정적 파일들이 위치하는 곳. 브라우저에 배포되는 리소스들.

index.html:

• 앱의 루트 HTML 파일로, Blazor WebAssembly 앱을 호스팅.
• <div id="app"></div>: Blazor 앱이 렌더링되는 위치.
• <script src="_framework/blazor.webassembly.js"></script>: Blazor WebAssembly 런타임 로드.
  appsettings.json (필요 시 추가 가능): 앱의 설정 정보를 저장. API URL, 환경설정 등을 JSON 형식으로 관리.

- 수정 포인트: index.html: 앱의 HTML 레이아웃, 메타 정보, 제목 수정.

 

<title>My Blazor App</title>

---

3. Pages 폴더

역할: 앱의 라우팅된 페이지들. 샘플 프로젝트에 몇 가지 기본 페이지가 포함되어 있어.

Index.razor:

루트 페이지 (/)로 렌더링.
"Hello, world!" 메시지와 함께 기본적인 설명 제공.

수정 포인트:
초기 페이지를 커스터마이징.
razor

<h1>환영합니다!</h1>
<p>이 앱은 Blazor WebAssembly로 만들어졌습니다.</p>
Counter.razor:

간단한 카운터 예제 페이지 (/counter).
상태 관리와 이벤트 바인딩의 기본 예시.
razor

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

@code {
    private int currentCount = 0;

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

수정 포인트:

이 페이지를 참고하여 사용자 지정 컴포넌트와 상태 관리를 추가.
FetchData.razor:

데이터 가져오기 페이지 (/fetchdata).
WeatherForecast라는 샘플 데이터를 HttpClient로 가져옴.
razor

@inject HttpClient Http

<h1>Weather forecast</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table>
        ...
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

수정 포인트:

데이터를 API에서 가져오는 코드로 수정:
csharp
코드 복사

forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("https://api.example.com/weather");

 

---

 

4. Shared 폴더

 

역할:앱 전체에서 공유되는 컴포넌트와 레이아웃 파일이 위치.

MainLayout.razor:

앱의 기본 레이아웃 정의. 페이지마다 반복되는 구조를 설정.

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

 

수정 포인트: 네비게이션 메뉴 추가, 앱 레이아웃 커스터마이징.

<div class="sidebar">
    <NavMenu />
</div>
NavMenu.razor:

 

네비게이션 메뉴를 정의. 기본 라우팅 링크 포함.

<NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
<NavLink href="/counter">Counter</NavLink>
<NavLink href="/fetchdata">Fetch data</NavLink>

 

수정 포인트:

사용자 정의 페이지 링크 추가.

<NavLink href="/custompage">Custom Page</NavLink>

 

 

---

5. Data 폴더

 

역할: 샘플 데이터 모델과 서비스 클래스 포함.

WeatherForecast.cs: 날씨 데이터를 나타내는 샘플 모델 클래스.

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public string? Summary { get; set; }
}

WeatherForecastService.cs: 샘플 데이터를 반환하는 서비스 클래스.

public class WeatherForecastService
{
    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Randohttp://m.Shared.Next(-20, 55),
            Summary = Summaries[Randohttp://m.Shared.Next(Summaries.Length)]
        }).ToArray());
    }
}

수정 포인트: WeatherForecast를 실제 API 데이터를 반환하도록 수정.

 

---

6. App.razor

역할:
- Blazor 앱의 루트 컴포넌트로, 라우팅 설정 포함.
- <Router> 태그를 사용해 URL과 페이지를 연결.

샘플 내용:

<Router AppAssembly="@typeof(App).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>

수정 포인트: 페이지 추가 후 라우팅 확인 필요.

 

---

7. 주요 수정 및 확장 작업

API 통신:
HttpClient 기본 주소를 설정하고 실제 API와 연결.

 

레이아웃 커스터마이징:
MainLayout.razor와 NavMenu.razor를 수정하여 네비게이션 메뉴와 레이아웃을 사용자 정의.

새 페이지 추가: Pages 폴더에 새로운 .razor 파일을 만들어 필요한 기능 구현.

상태 관리:
Blazor Server가 아닌 WebAssembly에서 상태 관리를 위해 StateContainer 또는 LocalStorage를 활용.