ASP.NET Core에서 Razor 클래스 라이브러리 프로젝트를 사용하여 재사용 가능한 UI 만들기

아티클
12/06/2023

RCL(Razor 클래스 라이브러리)에 Razor 뷰, 페이지, 컨트롤러, 페이지 모델, Razor 구성 요소, 뷰 구성 요소 및 데이터 모델을 기본적으로 빌드할 수 있습니다. RCL은 패키지되고 재사용될 수 있습니다. 애플리케이션은 RCL 포함할 수 있고 RCL이 포함하는 보기 및 페이지를 재정의할 수 있습니다. 뷰, 부분 뷰 또는 Razor Page가 웹앱과 RCL 둘 다에 있는 경우 웹앱에서 Razor 태그(.cshtml 파일)가 우선 적용됩니다.

Razor 클래스 라이브러리의 빌드 프로세스에 npm 및 webpack을 통합하는 방법에 대한 자세한 내용은 Razor 클래스 라이브러리에 대한 클라이언트 웹 자산 빌드를 참조하세요.

Visual Studio에서 새 프로젝트 만들기를 선택합니다.
Razor 클래스 라이브러리>다음을 선택합니다.
라이브러리 이름을 지정하고(예: “RazorClassLib”), 만들기를 선택합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.
페이지 및/또는 보기를 포함하는 라이브러리가 필요한 경우 지원 페이지 및 보기를 선택합니다. 기본적으로 Razor 구성 요소만 지원됩니다. 만들기를 실행합니다.

RCL(Razor 클래스 라이브러리) 템플릿은 기본적으로 Razor 구성 요소 개발로 설정됩니다. 페이지 및 뷰 지원 옵션은 페이지와 뷰를 지원합니다. RCL 지원에 Blazor대한 자세한 내용은 RCL(클래스 라이브러리)에서 ASP.NET Core Razor 구성 요소 사용>을 참조하세요.

명령줄에서 dotnet new razorclasslib을 실행합니다. 예시:

dotnet new razorclasslib -o RazorUIClassLib

RCL(Razor 클래스 라이브러리) 템플릿은 기본적으로 Razor 구성 요소 개발로 설정됩니다. 페이지 및 뷰 지원을 제공하려면 --support-pages-and-views 옵션을 전달합니다(dotnet new razorclasslib --support-pages-and-views).

자세한 내용은 dotnet new를 참조합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.

RCL에 Razor 파일을 추가합니다.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. ~/Areas/Pages가 아닌 ~/Pages의 콘텐츠를 공개하는 RCL을 만들려면 아래의 RCL 페이지 레이아웃을 참조하세요.

RCL 콘텐츠 참조

RCL은 다음에서 참조할 수 있습니다.

NuGet 패키지 NuGet 패키지 만들기, dotnet 추가 패키지 및 NuGet 패키지 만들기 및 게시를 참조합니다.
{ProjectName}.csproj. dotnet-add reference를 참조합니다.

보기, 부분 보기 및 페이지 재정의

뷰, 부분 뷰 또는 Razor Page가 웹앱과 RCL 둘 다에 있는 경우 웹앱에서 Razor 태그(.cshtml 파일)가 우선 적용됩니다. 예를 들어 WebApp1/Areas/MyFeature/Pages/Page1.cshtml을 WebApp1에 추가하면 WebApp1의 Page1이 RCL의 Page1보다 우선 적용됩니다.

샘플 다운로드에서 WebApp1/Areas/MyFeature2를 WebApp1/Areas/MyFeature로 이름을 바꿔 우선 순위를 테스트합니다.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 부분 뷰를 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml에 복사합니다. 새 위치를 나타내기 위해 태그를 업데이트합니다. 해당 부분의 앱 버전이 사용되고 있는지 확인하려면 앱을 빌드하고 실행합니다.

RCL이 Razor Pages를 사용하는 경우, 호스팅 앱에서 Razor Pages 서비스 및 엔드포인트를 사용하도록 설정합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL 페이지 레이아웃

웹앱의 Pages 폴더에 있는 것처럼 RCL 콘텐츠를 참조하려면 다음 파일 구조로 이루어진 RCL 프로젝트를 만듭니다.

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

RazorUIClassLib/Pages/Shared에는 _Header.cshtml 및 _Footer.cshtml이라는 두 개의 부분 파일이 포함되어 있다고 가정합니다. <partial> 태그를 _Layout.cshtml 파일에 추가할 수 있습니다.

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

_ViewStart.cshtml 파일을 RCL 프로젝트의 Pages 폴더에 추가하여 호스트 웹앱의 _Layout.cshtml 파일을 사용합니다.

@{
    Layout = "_Layout";
}

정적 자산을 사용하여 RCL 만들기

RCL 또는 RCL의 사용 앱에서 참조할 수 있는 도우미 정적 자산이 RCL에 필요할 수도 있습니다. ASP.NET Core에서는 사용 앱이 사용할 수 있는 정적 자산을 포함하는 RCL을 만들 수 있습니다.

도우미 자산을 RCL의 일부로 포함하려면 클래스 라이브러리에 wwwroot 폴더를 만들고 필요한 모든 파일을 해당 폴더에 포함합니다.

RCL을 패키지하면 wwwroot 폴더에 있는 모든 도우미 자산이 패키지에 자동으로 포함됩니다.

NuGet.exe 버전 nuget pack 대신 dotnet pack 명령을 사용합니다.

빌드 프로세스에 클라이언트 웹 자산 추가

클라이언트 웹 자산을 빌드 파이프라인에 통합하는 것은 매우 중요합니다. 자세한 내용은 클래스 라이브러리에 대한 클라이언트 웹 자산 빌드를 참조하세요Razor.

정적 자산 제외

정적 자산을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가합니다. 항목을 세미콜론(;)으로 구분합니다.

다음 예제에서 wwwroot 폴더에 있는 lib.css 스타일시트는 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

TypeScript 통합

RCL에 TypeScript 파일을 포함하려면 다음을 수행합니다.

프로젝트에서 Microsoft.TypeScript.MSBuild NuGet 패키지를 참조합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.
TypeScript 파일(.ts)을 wwwroot 폴더 외부에 배치합니다. 예를 들어 파일을 Client 폴더에 배치합니다.
wwwroot 폴더의 TypeScript 빌드 출력을 구성합니다. 프로젝트 파일의 PropertyGroup 내부에 TypescriptOutDir 속성을 설정합니다.
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```
프로젝트 파일의 PropertyGroup 내부에 다음 대상을 추가하여 TypeScript 대상을 PrepareForBuildDependsOn 대상의 종속성으로 포함합니다.
```
<PrepareForBuildDependsOn>
  CompileTypeScript;
  GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
</PrepareForBuildDependsOn>
```

참조된 RCL의 콘텐츠 사용

RCL의 wwwroot 폴더에 포함된 파일은 접두사 _content/{PACKAGE ID}/ 아래의 RCL 또는 사용 앱에 노출됩니다. 예를 들어 어셈블리 이름이 Razor.Class.Lib이고 프로젝트 파일에 <PackageId>가 지정되지 않은 라이브러리는 _content/Razor.Class.Lib/에서 정적 콘텐츠에 대한 경로가 발생합니다. NuGet 패키지를 생성할 때 어셈블리 이름이 패키지 ID(라이브러리 프로젝트 파일의 <PackageId>)와 같지 않으면 {PACKAGE ID}의 프로젝트 파일에 지정된 대로 패키지 ID를 사용합니다.

사용 앱은 <script>, <style>, <img> 및 기타 HTML 태그를 사용하여 라이브러리에서 제공하는 정적 자산을 참조합니다. 다음에서 사용 앱에 대해 정적 파일 지원이 사용하도록 설정되어 있어야 합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

빌드 출력(dotnet run)에서 사용 앱을 실행하는 경우, 개발 환경에서는 정적 웹 자산이 기본적으로 사용됩니다. 빌드 출력에서 실행할 때 다른 환경의 자산을 지원하려면 호스트 빌더의 Program.cs에서 UseStaticWebAssets를 호출합니다.

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

게시된 출력(dotnet publish)에서 앱을 실행하는 경우 UseStaticWebAssets를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 앱이 실행되는 경우와 관련해서 다음 사항을 확인합니다.

RCL의 자산은 원래 폴더에 유지됩니다. 자산이 사용 앱으로 이동되지 않습니다.
RCL wwwroot 폴더 내의 모든 변경 내용은 RCL을 다시 빌드한 후 사용 앱에 반영됩니다. 사용 앱을 다시 빌드할 필요는 없습니다.

RCL을 빌드하면 정적 웹 자산 위치를 설명하는 매니페스트가 생성됩니다. 사용 앱은 런타임에 매니페스트를 읽어 참조된 프로젝트와 패키지의 자산을 사용합니다. RCL에 새 자산이 추가된 경우 RCL을 다시 빌드해서 매니페스트를 업데이트해야 사용 앱이 새 자산에 액세스할 수 있습니다.

게시

앱을 게시하면 참조된 모든 프로젝트와 패키지의 도우미 자산이 _content/{PACKAGE ID}/ 아래에 있는 게시된 앱의 wwwroot 폴더에 복사됩니다. NuGet 패키지를 생성할 때 어셈블리 이름이 패키지 ID(라이브러리 프로젝트 파일의 <PackageId>)와 같지 않으면 게시된 자산의 wwwroot 폴더를 검사할 때 {PACKAGE ID}의 프로젝트 파일에 지정된 대로 패키지 ID를 사용합니다.

추가 리소스

Razor UI를 포함하는 클래스 라이브러리 만들기

Visual Studio
.NET Core CLI

Visual Studio에서 새 프로젝트 만들기를 선택합니다.
Razor 클래스 라이브러리>다음을 선택합니다.
라이브러리 이름을 지정하고(예: “RazorClassLib”), 만들기를 선택합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.
뷰를 지원해야 하는 경우 페이지 및 뷰 지원을 선택합니다. 기본적으로 Razor Pages만 지원됩니다. 만들기를 실행합니다.

RCL(Razor 클래스 라이브러리) 템플릿은 기본적으로 Razor 구성 요소 개발로 설정됩니다. 페이지 및 뷰 지원 옵션은 페이지와 뷰를 지원합니다.

명령줄에서 dotnet new razorclasslib을 실행합니다. 예시:

dotnet new razorclasslib -o RazorUIClassLib

자세한 내용은 dotnet new를 참조합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.

RCL에 Razor 파일을 추가합니다.

RCL 콘텐츠 참조

RCL은 다음에서 참조할 수 있습니다.

NuGet 패키지 NuGet 패키지 만들기, dotnet 추가 패키지 및 NuGet 패키지 만들기 및 게시를 참조합니다.
{ProjectName}.csproj. dotnet-add reference를 참조합니다.

보기, 부분 보기 및 페이지 재정의

샘플 다운로드에서 WebApp1/Areas/MyFeature2를 WebApp1/Areas/MyFeature로 이름을 바꿔 우선 순위를 테스트합니다.

RCL이 Razor Pages를 사용하는 경우, 호스팅 앱에서 Razor Pages 서비스 및 엔드포인트를 사용하도록 설정합니다.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL 페이지 레이아웃

웹앱의 Pages 폴더에 있는 것처럼 RCL 콘텐츠를 참조하려면 다음 파일 구조로 이루어진 RCL 프로젝트를 만듭니다.

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

_ViewStart.cshtml 파일을 RCL 프로젝트의 Pages 폴더에 추가하여 호스트 웹앱의 _Layout.cshtml 파일을 사용합니다.

@{
    Layout = "_Layout";
}

정적 자산을 사용하여 RCL 만들기

도우미 자산을 RCL의 일부로 포함하려면 클래스 라이브러리에 wwwroot 폴더를 만들고 필요한 모든 파일을 해당 폴더에 포함합니다.

RCL을 패키지하면 wwwroot 폴더에 있는 모든 도우미 자산이 패키지에 자동으로 포함됩니다.

NuGet.exe 버전 nuget pack 대신 dotnet pack 명령을 사용합니다.

정적 자산 제외

정적 자산을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가합니다. 항목을 세미콜론(;)으로 구분합니다.

다음 예제에서 wwwroot 폴더에 있는 lib.css 스타일시트는 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

TypeScript 통합

RCL에 TypeScript 파일을 포함하려면 다음을 수행합니다.

프로젝트에서 Microsoft.TypeScript.MSBuild NuGet 패키지를 참조합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.
TypeScript 파일(.ts)을 wwwroot 폴더 외부에 배치합니다. 예를 들어 파일을 Client 폴더에 배치합니다.
wwwroot 폴더의 TypeScript 빌드 출력을 구성합니다. 프로젝트 파일의 PropertyGroup 내부에 TypescriptOutDir 속성을 설정합니다.
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```
프로젝트 파일의 PropertyGroup 내부에 다음 대상을 추가하여 TypeScript 대상을 PrepareForBuildDependsOn 대상의 종속성으로 포함합니다.
```
<PrepareForBuildDependsOn>
  CompileTypeScript;
  GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
</PrepareForBuildDependsOn>
```

참조된 RCL의 콘텐츠 사용

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

참고: .NET 6에는 호출 builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets만 필요합니다. 자세한 내용은 해당 GitHub 이슈를 참조하세요.

게시된 출력(dotnet publish)에서 앱을 실행하는 경우 UseStaticWebAssets를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 앱이 실행되는 경우와 관련해서 다음 사항을 확인합니다.

RCL의 자산은 원래 폴더에 유지됩니다. 자산이 사용 앱으로 이동되지 않습니다.
RCL wwwroot 폴더 내의 모든 변경 내용은 RCL을 다시 빌드한 후 사용 앱에 반영됩니다. 사용 앱을 다시 빌드할 필요는 없습니다.

게시

추가 리소스

샘플 코드 보기 및 다운로드(다운로드 방법)

Razor UI를 포함하는 클래스 라이브러리 만들기

Visual Studio
.NET Core CLI

Visual Studio에서 새 프로젝트 만들기를 선택합니다.
Razor 클래스 라이브러리>다음을 선택합니다.
라이브러리 이름을 지정하고(예: "RazorClassLib"), 만들기>다음을 선택합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.
대상 프레임워크를 선택합니다. 뷰를 지원하려면 ☑ 페이지 및 뷰 지원을 선택합니다. 기본적으로 Razor 구성 요소만 지원됩니다. 만들기를 실행합니다.

RCL(Razor 클래스 라이브러리) 템플릿은 기본적으로 Razor 구성 요소 개발로 설정됩니다. 페이지 및 뷰 지원 옵션은 페이지와 뷰를 지원합니다.

명령줄에서 dotnet new razorclasslib을 실행합니다. 예시:

dotnet new razorclasslib -o RazorUIClassLib

자세한 내용은 dotnet new를 참조합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.

RCL에 Razor 파일을 추가합니다.

ASP.NET Core 템플릿은 RCL 콘텐츠가 Areas 폴더에 있다고 가정합니다. ~/Areas/Pages가 아닌 ~/Pages의 콘텐츠를 공개하는 RCL을 만들려면 RCL 페이지 레이아웃을 참조하세요.

RCL 콘텐츠 참조

RCL은 다음에서 참조할 수 있습니다.

NuGet 패키지 NuGet 패키지 만들기, dotnet 추가 패키지 및 NuGet 패키지 만들기 및 게시를 참조합니다.
{ProjectName}.csproj. dotnet-add reference를 참조합니다.

보기, 부분 보기 및 페이지 재정의

샘플 다운로드에서 WebApp1/Areas/MyFeature2를 WebApp1/Areas/MyFeature로 이름을 바꿔 우선 순위를 테스트합니다.

RCL 페이지 레이아웃

웹앱의 Pages 폴더에 있는 것처럼 RCL 콘텐츠를 참조하려면 다음 파일 구조로 이루어진 RCL 프로젝트를 만듭니다.

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

_ViewStart.cshtml 파일을 RCL 프로젝트의 Pages 폴더에 추가하여 호스트 웹앱의 _Layout.cshtml 파일을 사용합니다.

@{
    Layout = "_Layout";
}

정적 자산을 사용하여 RCL 만들기

도우미 자산을 RCL의 일부로 포함하려면 클래스 라이브러리에 wwwroot 폴더를 만들고 필요한 모든 파일을 해당 폴더에 포함합니다.

RCL을 패키지하면 wwwroot 폴더에 있는 모든 도우미 자산이 패키지에 자동으로 포함됩니다.

NuGet.exe 버전 nuget pack 대신 dotnet pack 명령을 사용합니다.

정적 자산 제외

정적 자산을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가합니다. 항목을 세미콜론(;)으로 구분합니다.

다음 예제에서 wwwroot 폴더에 있는 lib.css 스타일시트는 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

TypeScript 통합

RCL에 TypeScript 파일을 포함하려면 다음을 수행합니다.

프로젝트에서 Microsoft.TypeScript.MSBuild NuGet 패키지를 참조합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.
TypeScript 파일(.ts)을 wwwroot 폴더 외부에 배치합니다. 예를 들어 파일을 Client 폴더에 배치합니다.
wwwroot 폴더의 TypeScript 빌드 출력을 구성합니다. 프로젝트 파일의 PropertyGroup 내부에 TypescriptOutDir 속성을 설정합니다.
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

프로젝트 파일의 PropertyGroup 내부에 다음 대상을 추가하여 TypeScript 대상을 ResolveCurrentProjectStaticWebAssets 대상의 종속성으로 포함합니다.

<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

참조된 RCL의 콘텐츠 사용

사용 앱은 <script>, <style>, <img> 및 기타 HTML 태그를 사용하여 라이브러리에서 제공하는 정적 자산을 참조합니다. Startup.Configure에서 사용 앱에 대해 정적 파일 지원이 사용하도록 설정되어 있어야 합니다.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

빌드 출력(dotnet run)에서 사용 앱을 실행하는 경우, 개발 환경에서는 정적 웹 자산이 기본적으로 사용됩니다. 빌드 출력에서 실행할 때 다른 환경의 자산을 지원하려면 호스트 빌더의 Program.cs에서 UseStaticWebAssets를 호출합니다.

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

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.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

게시된 출력(dotnet publish)에서 앱을 실행하는 경우 UseStaticWebAssets를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 앱이 실행되는 경우와 관련해서 다음 사항을 확인합니다.

RCL의 자산은 원래 폴더에 유지됩니다. 자산이 사용 앱으로 이동되지 않습니다.
RCL wwwroot 폴더 내의 모든 변경 내용은 RCL을 다시 빌드한 후 사용 앱에 반영됩니다. 사용 앱을 다시 빌드할 필요는 없습니다.

게시

추가 리소스

RCL(Razor 클래스 라이브러리)에서 ASP.NET Core Razor 구성 요소 사용

샘플 코드 보기 및 다운로드(다운로드 방법)

Razor UI를 포함하는 클래스 라이브러리 만들기

Visual Studio
.NET Core CLI

Visual Studio 파일 메뉴에서 새로 만들기>프로젝트를 선택합니다.
새 ASP.NET Core 웹 애플리케이션을 선택합니다.
라이브러리 이름 지정을 지정하고(예: “RazorClassLib”), 확인을 선택합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.
ASP.NET Core 2.1 이상이 선택됐는지 확인합니다.
Razor 클래스 라이브러리>확인을 선택합니다.

RCL에는 다음과 같은 프로젝트 파일이 있습니다.

<Project Sdk="Microsoft.NET.Sdk.Razor">

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

명령줄에서 dotnet new razorclasslib을 실행합니다. 예시:

dotnet new razorclasslib -o RazorUIClassLib

자세한 내용은 dotnet new를 참조합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.

RCL에 Razor 파일을 추가합니다.

RCL 콘텐츠 참조

RCL은 다음에서 참조할 수 있습니다.

NuGet 패키지 NuGet 패키지 만들기, dotnet 추가 패키지 및 NuGet 패키지 만들기 및 게시를 참조합니다.
{ProjectName}.csproj. dotnet-add reference를 참조합니다.

연습: RCL 프로젝트 만들기 및 Pages 프로젝트에서 사용 Razor

전체 프로젝트를 다운로드하여 만들지 않고 테스트할 수 있습니다. 샘플 다운로드에는 프로젝트를 쉽게 테스트하게 하는 링크와 추가 코드가 포함됩니다. 샘플 다운로드 대 단계별 지침에 대한 주석을 사용하여 이 GitHub 문제에서 사용자 의견을 그대로 둘 수 있습니다.

다운로드 앱 테스트

완료된 앱을 다운로드하지 않고 연습 프로젝트를 만들려는 경우 다음 섹션으로 건너 뜁니다.

Visual Studio
.NET Core CLI

Visual Studio에서 .sln 파일을 엽니다. 앱을 실행합니다.

디렉터리의 명령 프롬프트에서 cli RCL 및 웹앱을 빌드합니다.

dotnet build

디렉터리로 WebApp1 이동하고 앱을 실행합니다.

dotnet run

WebApp1 테스트의 지침 준수

RCL 만들기

이 섹션에서는 RCL을 만듭니다. Razor 파일이 RCL에 추가됩니다.

Visual Studio
.NET Core CLI

RCL 프로젝트를 만듭니다.

Visual Studio 파일 메뉴에서 새로 만들기>프로젝트를 선택합니다.
새 ASP.NET Core 웹 애플리케이션을 선택합니다.
앱 이름을 RazorUIClassLib로 지정하고 확인을 선택합니다.
ASP.NET Core 2.1 이상이 선택됐는지 확인합니다.
Razor 클래스 라이브러리>확인을 선택합니다.
RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml이라는 Razor 부분 뷰 파일을 추가합니다.

명령줄에서 다음을 실행하세요.

dotnet new razorclasslib -o RazorUIClassLib
dotnet new page -n _Message -np -o RazorUIClassLib/Areas/MyFeature/Pages/Shared
dotnet new viewstart -o RazorUIClassLib/Areas/MyFeature/Pages

이전 명령은

RazorUIClassLib RCL을 만듭니다.
Razor _Message 페이지를 만들어 RCL에 추가합니다. -np 매개 변수는 PageModel가 없는 페이지를 만듭니다.
_ViewStart.cshtml 파일을 만들어 RCL에 추가합니다.

파일은 _ViewStart.cshtml Pages 프로젝트의 레이아웃 Razor 을 사용하는 데 필요합니다(다음 섹션에 추가됨).

프로젝트에 Razor 파일 및 폴더 추가

태그 RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 를 다음 코드로 바꿉다.

<h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>

태그 RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml 를 다음 코드로 바꿉다.
```
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>
<p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>

<partial name="_Message" />
```
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers은 부분 보기(<partial name="_Message" />)를 사용해야 합니다. 지시문을 포함하는 @addTagHelper 대신 파일을 추가할 _ViewImports.cshtml 수 있습니다. 예시:
```
dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages
```
_ViewImports.cshtml에 대한 자세한 내용은 공유 지시문 가져오기를 참조하세요.
컴파일러 오류가 없는지 확인하려면 클래스 라이브러리를 빌드하십시오.
```
dotnet build RazorUIClassLib
```

빌드 출력에 RazorUIClassLib.dll 및 RazorUIClassLib.Views.dll이 포함됩니다. RazorUIClassLib.Views.dll에 컴파일된 Razor 콘텐츠가 포함됩니다.

Razor Pages 프로젝트에서 Razor UI 라이브러리 사용

Visual Studio
.NET Core CLI

Razor Pages 웹앱을 만듭니다.

솔루션 탐색기에서 솔루션을 마우스 오른쪽 단추로 클릭하고 추가>새 프로젝트를 선택합니다.
새 ASP.NET Core 웹 애플리케이션을 선택합니다.
WebApp1 앱 이름을 지정합니다.
ASP.NET Core 2.1 이상이 선택됐는지 확인합니다.
웹 애플리케이션>확인을 선택합니다.
솔루션 탐색기에서 WebApp1를 마우스 오른쪽 단추로 클릭하고 스타트업 프로젝트로 설정을 선택합니다.
솔루션 탐색기에서 WebApp1를 마우스 오른쪽 단추로 클릭하고 빌드 종속성>프로젝트 종속성을 선택합니다.
RazorUIClassLib를 WebApp1의 종속성으로 확인합니다.
솔루션 탐색기에서 WebApp1를 마우스 오른쪽 단추로 클릭하고 추가>참조를 선택합니다.
참조 관리자 대화 상자에서 RazorUIClassLib>확인을 선택합니다.

앱을 실행합니다.

Razor Pages 앱과 RCL을 포함하는 Razor Pages 웹앱 및 솔루션 파일을 만듭니다.

dotnet new webapp -o WebApp1
dotnet new sln
dotnet sln add WebApp1
dotnet sln add RazorUIClassLib
dotnet add WebApp1 reference RazorUIClassLib

웹앱을 빌드하고 실행합니다.

cd WebApp1
dotnet run

WebApp1 테스트

/MyFeature/Page1로 이동하여 Razor UI 클래스 라이브러리가 사용 중인지 확인합니다.

보기, 부분 보기 및 페이지 재정의

샘플 다운로드에서 WebApp1/Areas/MyFeature2를 WebApp1/Areas/MyFeature로 이름을 바꿔 우선 순위를 테스트합니다.

RCL 페이지 레이아웃

웹앱의 Pages 폴더에 있는 것처럼 RCL 콘텐츠를 참조하려면 다음 파일 구조로 이루어진 RCL 프로젝트를 만듭니다.

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

샘플 코드 보기 및 다운로드(다운로드 방법)

Razor UI를 포함하는 클래스 라이브러리 만들기

Visual Studio
.NET Core CLI

Visual Studio에서 새 프로젝트 만들기를 선택합니다.
Razor 클래스 라이브러리>다음을 선택합니다.
라이브러리 이름을 지정하고(예: “RazorClassLib”), 만들기를 선택합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.
뷰를 지원해야 하는 경우 페이지 및 뷰 지원을 선택합니다. 기본적으로 Razor Pages만 지원됩니다. 만들기를 실행합니다.

RCL(Razor 클래스 라이브러리) 템플릿은 기본적으로 Razor 구성 요소 개발로 설정됩니다. 페이지 및 뷰 지원 옵션은 페이지와 뷰를 지원합니다.

명령줄에서 dotnet new razorclasslib을 실행합니다. 예시:

dotnet new razorclasslib -o RazorUIClassLib

자세한 내용은 dotnet new를 참조합니다. 생성된 보기 라이브러리와 파일 이름 충돌을 방지하려면 라이브러리 이름이 .Views로 끝나지 않도록 합니다.

RCL에 Razor 파일을 추가합니다.

RCL 콘텐츠 참조

RCL은 다음에서 참조할 수 있습니다.

NuGet 패키지 NuGet 패키지 만들기, dotnet 추가 패키지 및 NuGet 패키지 만들기 및 게시를 참조합니다.
{ProjectName}.csproj. dotnet-add reference를 참조합니다.

보기, 부분 보기 및 페이지 재정의

샘플 다운로드에서 WebApp1/Areas/MyFeature2를 WebApp1/Areas/MyFeature로 이름을 바꿔 우선 순위를 테스트합니다.

RCL이 Razor Pages를 사용하는 경우, 호스팅 앱에서 Razor Pages 서비스 및 엔드포인트를 사용하도록 설정합니다.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

RCL 페이지 레이아웃

웹앱의 Pages 폴더에 있는 것처럼 RCL 콘텐츠를 참조하려면 다음 파일 구조로 이루어진 RCL 프로젝트를 만듭니다.

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

_ViewStart.cshtml 파일을 RCL 프로젝트의 Pages 폴더에 추가하여 호스트 웹앱의 _Layout.cshtml 파일을 사용합니다.

@{
    Layout = "_Layout";
}

정적 자산을 사용하여 RCL 만들기

도우미 자산을 RCL의 일부로 포함하려면 클래스 라이브러리에 wwwroot 폴더를 만들고 필요한 모든 파일을 해당 폴더에 포함합니다.

RCL을 패키지하면 wwwroot 폴더에 있는 모든 도우미 자산이 패키지에 자동으로 포함됩니다.

NuGet.exe 버전 nuget pack 대신 dotnet pack 명령을 사용합니다.

정적 자산 제외

정적 자산을 제외하려면 프로젝트 파일의 $(DefaultItemExcludes) 속성 그룹에 원하는 제외 경로를 추가합니다. 항목을 세미콜론(;)으로 구분합니다.

다음 예제에서 wwwroot 폴더에 있는 lib.css 스타일시트는 정적 자산으로 간주되지 않아 게시된 RCL에 포함되지 않습니다.

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

TypeScript 통합

RCL에 TypeScript 파일을 포함하려면 다음을 수행합니다.

프로젝트에서 Microsoft.TypeScript.MSBuild NuGet 패키지를 참조합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.
TypeScript 파일(.ts)을 wwwroot 폴더 외부에 배치합니다. 예를 들어 파일을 Client 폴더에 배치합니다.
wwwroot 폴더의 TypeScript 빌드 출력을 구성합니다. 프로젝트 파일의 PropertyGroup 내부에 TypescriptOutDir 속성을 설정합니다.
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

프로젝트 파일의 PropertyGroup 내부에 다음 대상을 추가하여 TypeScript 대상을 ResolveCurrentProjectStaticWebAssets 대상의 종속성으로 포함합니다.

<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

참조된 RCL의 콘텐츠 사용

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

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.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

게시된 출력(dotnet publish)에서 앱을 실행하는 경우 UseStaticWebAssets를 호출할 필요가 없습니다.

다중 프로젝트 개발 흐름

사용 앱이 실행되는 경우와 관련해서 다음 사항을 확인합니다.

RCL의 자산은 원래 폴더에 유지됩니다. 자산이 사용 앱으로 이동되지 않습니다.
RCL wwwroot 폴더 내의 모든 변경 내용은 RCL을 다시 빌드한 후 사용 앱에 반영됩니다. 사용 앱을 다시 빌드할 필요는 없습니다.

ASP.NET Core에서 Razor 클래스 라이브러리 프로젝트를 사용하여 재사용 가능한 UI 만들기

Razor UI를 포함하는 클래스 라이브러리 만들기

RCL 콘텐츠 참조

보기, 부분 보기 및 페이지 재정의

RCL 페이지 레이아웃

정적 자산을 사용하여 RCL 만들기

빌드 프로세스에 클라이언트 웹 자산 추가

정적 자산 제외

TypeScript 통합

참조된 RCL의 콘텐츠 사용

다중 프로젝트 개발 흐름

게시

추가 리소스

Razor UI를 포함하는 클래스 라이브러리 만들기

RCL 콘텐츠 참조

보기, 부분 보기 및 페이지 재정의

RCL 페이지 레이아웃

정적 자산을 사용하여 RCL 만들기

정적 자산 제외

TypeScript 통합

참조된 RCL의 콘텐츠 사용

다중 프로젝트 개발 흐름

게시

추가 리소스

Razor UI를 포함하는 클래스 라이브러리 만들기

RCL 콘텐츠 참조

보기, 부분 보기 및 페이지 재정의

RCL 페이지 레이아웃

정적 자산을 사용하여 RCL 만들기

정적 자산 제외

TypeScript 통합

참조된 RCL의 콘텐츠 사용

다중 프로젝트 개발 흐름

게시

추가 리소스

Razor UI를 포함하는 클래스 라이브러리 만들기

RCL 콘텐츠 참조

연습: RCL 프로젝트 만들기 및 Pages 프로젝트에서 사용 Razor

다운로드 앱 테스트

RCL 만들기

프로젝트에 Razor 파일 및 폴더 추가

Razor Pages 프로젝트에서 Razor UI 라이브러리 사용

WebApp1 테스트

보기, 부분 보기 및 페이지 재정의

RCL 페이지 레이아웃

Razor UI를 포함하는 클래스 라이브러리 만들기

RCL 콘텐츠 참조

보기, 부분 보기 및 페이지 재정의

RCL 페이지 레이아웃

정적 자산을 사용하여 RCL 만들기

정적 자산 제외

TypeScript 통합

참조된 RCL의 콘텐츠 사용

다중 프로젝트 개발 흐름

게시

추가 리소스

피드백

추가 리소스