Radzen 라이브러리 설정

요즘 배우지도 않은 웹 공부를 하고 있는데 (본인은 전공이 시스템 계열이다),

주력 언어가 C# 이다보니 새로운 언어를 배울 필요 없이 C#으로 웹의 프론트, 백엔드 모두 개발 할 수 있는 개발 툴을 찾다가 Blazor 를 알게 되었다.

 

기본적인 내용 좀 공부하고 이제 좀 복잡한 UI 를 만들어야 하는데, 직접 만들고 싶지 않아서 (필자는 시스템 (백엔드) 전공이다)

무료 UI 툴을 찾다가 Radzen (https://www.radzen.com/blazor-components/) 이라는 툴을 알게 되었고, 기본적인 포팅법을 기록해두려고 한다.

 

참고로 필자는 Blazor Webassembly 프로젝트를 생성하였다.

 

1.  Visual Studio의 Nuget에서 Radzen을 검색해서 Client 프로젝트에 설치

 

2. Client 프로젝트의 _Imports.razor 파일에 아래의 네임스페이스 추가

@using Radzen;
@using Radzen.Blazor;

 

 

3. Client 프로젝트의 wwwroot/index.html 파일에 아래 내용을 추가 (css는 head 사이에, js는 body 사이에)

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

 

 

 

4. Client 프로젝트의 Shared/MainLayout.razor 에 아래 내용을 추가

    <RadzenDialog />
    <RadzenNotification />
    <RadzenContextMenu />
    <RadzenTooltip />

 

 

5. 마지막으로 Client 프로젝트의 Program.cs 에 아래처럼 의존성 주입

builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

 

 

이렇게 하면 Radzen을 사용하기 위한 기본적인 모든 설정이 끝나고 빌드하고 사용하면 적용된 모습을 볼 수 있다.

다음에는 세부적인 Radzen 컴포넌트 사용법에 대해 살펴보기로 하자.