이 게시글들은
js 개발자를 위한 초스피드 .NET, Blazor를 다루는 기술(실무)
이라는 책을 작성하기 위해 JS 개발자였던 제가 Blazor와 .NET을 학습해 나가는 과정을 차근차근 정리해 가는 팁 들입니다.
특히나 이전 slog에서 다루지 못했던 실제 실무에서 사용했던 기술들이나 제가 개인적으로 연구해낸 기술들을 정리해 나갑니다.
최종목표는 개발자 홀로 IaaS 부터 SaaS까지 직접 만들어볼 수 있도록 내용을 구성할 계획입니다.
DB Helper를 달기 위해 DB 만들기
[ 환경 셋팅 ]
DBMS : Download | DBeaver Community
시작전 Base가 되는 github 파일을 받아오자
git clone GitHub - MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps: Sample repo for Interact with Data for Blazor Web Apps Learn Module BlazingPizza
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package System.Net.Http.Json
위 세 가지 패키지를 다운 받아주어야 한다.
우리는 Sqlite 기반의 매우 간단한 DB를 만들 계획이다.
간단하게 Visual Studio에서 NuGet 패키지를 검색해서 설치해도 되고
Visual Studio 콘솔창에 설치할 패키지를 입력해도 설치가 된다.
최종적으로 패키지 관리나 혹은 csproj 파일에서 위와같이 패키지가 보이면 성공이다.
[ DB 데이터 모델 정의 ]
[ DB Context 정의 ]
using Microsoft.EntityFrameworkCore;
namespace BlazingPizza.Data
{
public class PizzaStoreContext : DbContext
{
public PizzaStoreContext(DbContextOptions options) : base(options)
{
}
public DbSet<PizzaSpecial> Specials { get; set; }
}
}
Data/PizzaStoreContext.cs 파일 생성
C#에서 DB Context는 Entity Framework API의 중요한 클래스로, 도메인 또는 엔터티 클래스와 데이터베이스 사이의 다리 역할을 합니다. 이는 데이터를 객체로 처리하는 데 필요한 모든 작업을 수행합니다
예를 들어, DbContext 인스턴스는 다음과 같은 일반적인 작업 단위를 수행합니다
또한, DbContext는 데이터베이스 연결 문자열을 사용하여 모델 속성을 데이터베이스에 연결하도록 허용합니다.
이렇게 하면 컨트롤러에서 데이터를 처리하기 위해 데이터베이스를 참조하려고 할 때 DbContext를 참조할 수 있습니다.
따라서 DbContext는 데이터베이스 작업(데이터 가져오기, 저장, 검색 등)을 수행하는 데 필요한 모든 것을 처리하는 중심 역할을 합니다.
[ DB Controller 정의 ]
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using BlazingPizza.Data;
namespace BlazingPizza.Controllers
{
[Route("specials")]
[ApiController]
public class SpecialsController : Controller
{
private readonly PizzaStoreContext _db;
public SpecialsController(PizzaStoreContext db)
{
_db = db;
}
[HttpGet]
public async Task<ActionResult<List<PizzaSpecial>>> GetSpecials()
{
return (await _db.Specials.ToListAsync()).OrderByDescending(s => s.BasePrice).ToList();
}
}
}
/Controllers/SpecialsController.cs
C#에서 DB Controller는 데이터베이스와 상호작용하는 데 사용되는 클래스입니다1. 이 클래스는 데이터베이스 엔터티에 대한 CRUD (생성, 읽기, 업데이트, 삭제) 작업을 수행합니다2.
예를 들어, ASP.NET MVC 프로젝트에서는 Controller가 사용자의 요청을 처리하고, 모델에서 데이터를 가져와 뷰에 전달하는 역할을 합니다3. 이 경우, DB Controller는 특정 데이터베이스 테이블(예: Kittens)과 관련된 작업을 수행하는 메서드를 포함할 수 있습니다.
[ DB 초기 데이터 정의 ]
namespace BlazingPizza.Data
{
public class SeedData
{
public static void Initialize(PizzaStoreContext db)
{
var specials = new PizzaSpecial[]
{
new PizzaSpecial()
{
Name = "Basic Cheese Pizza",
Description = "It's cheesy and delicious. Why wouldn't you want one?",
BasePrice = 9.99m,
ImageUrl = "img/pizzas/cheese.jpg",
},
new PizzaSpecial()
{
Id = 2,
Name = "The Baconatorizor",
Description = "It has EVERY kind of bacon",
BasePrice = 11.99m,
ImageUrl = "img/pizzas/bacon.jpg",
},
new PizzaSpecial()
{
Id = 3,
Name = "Classic pepperoni",
Description = "It's the pizza you grew up with, but Blazing hot!",
BasePrice = 10.50m,
ImageUrl = "img/pizzas/pepperoni.jpg",
},
new PizzaSpecial()
{
Id = 4,
Name = "Buffalo chicken",
Description = "Spicy chicken, hot sauce and bleu cheese, guaranteed to warm you up",
BasePrice = 12.75m,
ImageUrl = "img/pizzas/meaty.jpg",
},
new PizzaSpecial()
{
Id = 5,
Name = "Mushroom Lovers",
Description = "It has mushrooms. Isn't that obvious?",
BasePrice = 11.00m,
ImageUrl = "img/pizzas/mushroom.jpg",
},
new PizzaSpecial()
{
Id = 7,
Name = "Veggie Delight",
Description = "It's like salad, but on a pizza",
BasePrice = 11.50m,
ImageUrl = "img/pizzas/salad.jpg",
},
new PizzaSpecial()
{
Id = 8,
Name = "Margherita",
Description = "Traditional Italian pizza with tomatoes and basil",
BasePrice = 9.99m,
ImageUrl = "img/pizzas/margherita.jpg",
},
};
db.Specials.AddRange(specials);
db.SaveChanges();
}
}
}
/Data/SeedData.cs
초기 데이터를 셋팅해준다
[ DB 생성 && 초기 데이터 삽입 ]
...
// PizzaStoreContext Init and DB make
builder.Services.AddHttpClient();
builder.Services.AddSqlite<PizzaStoreContext>("Data Source=pizza.db");
...
// Path Initialize
app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
// DB Seed Data Initialize
var scopeFactory = app.Services.GetRequiredService<IServiceScopeFactory>();
using (var scope = scopeFactory.CreateScope())
{
var db = scope.ServiceProvider.GetRequiredService<PizzaStoreContext>();
if(db.Database.EnsureCreated())
{
SeedData.Initialize(db);
}
}
app.Run();
Program.cs 파일을 위와같이 수정해주어서 프로그램 생성과 함께 sqlite 기반의 db가 생성될 수 있게 만들자.
[ 데이터를 가지고 오는 페이지 만들기 ]
@page "/"
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
<div class="main">
<h1>Blazing Pizzas</h1>
<ul class="pizza-cards">
@if (specials != null)
{
@foreach (var special in specials)
{
<li style="background-image: url('@special.ImageUrl')">
<div class="pizza-info">
<span class="title">@special.Name</span>
@special.Description
<span class="price">@special.GetFormattedBasePrice()</span>
</div>
</li>
}
}
</ul>
</div>
@code {
List<PizzaSpecial> specials = new();
protected override async Task OnInitializedAsync()
{
specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
}
}
마지막으로 데이터가 정상적으로 입력이 되었는지를 JSON 형태로 데이터를 받는 페이지도 만들어보자
이대로 ctrl + f5로 DB에 접근하여 데이터를 확인할 수 있다.
혹은 dbeaver를 이용해 sqlite를 접근해서 데이터를 보는 방법도 있다.
