자습서: ASP.NET Core에서 Pages 시작 Razor

작성자: Rick Anderson

ASP.NET Core Razor Pages 웹앱을 빌드하는 작업의 기본 사항을 설명하는 자습서 시리즈 중 첫 번째입니다.

컨트롤러 및 보기에 익숙한 개발자를 대상으로 한 고급 소개는 Razor Pages 소개를 참조하세요. 비디오 소개는 초보자를 위한 Entity Framework Core를 참조하세요.

ASP.NET Core 개발을 처음 접하며 요구 사항에 가장 적합한 ASP.NET Core 웹 UI 솔루션을 잘 모르는 경우 ASP.NET Core UI 선택을 참조하세요.

이 자습서의 끝부분에는 동영상 데이터베이스를 관리하는 Razor Pages 웹앱이 있습니다.

필수 조건

Visual Studio

• ASP.NET 및 웹 개발 워크로드가 있는 Visual Studio 2022

  

Visual Studio Code

• Visual Studio Code
• Visual Studio Code용 C#(최신 버전)
• .NET 8.0 SDK

Visual Studio Code 지침은 .NET CLI를 사용하여 프로젝트 작성과 같은 ASP.NET Core 개발 기능을 사용합니다. macOS, Linux 또는 Windows와 모든 코드 편집기에서 이러한 지침을 따를 수 있습니다. Visual Studio Code 이외의 항목을 사용하는 경우 사소한 변경이 필요할 수 있습니다.

Mac용 Visual Studio

• Mac용 Visual Studio 2022(최신 버전)

  Important

  Microsoft는 Mac용 Visual Studio의 사용 중지를 발표했습니다. Mac용 Visual Studio는 2024년 8월 31일부터 더 이상 지원되지 않습니다. 대안은 다음과 같습니다.

  • C# 개발 키트 및 관련 확장(예: .NET MAUIUnity)이 있는 Visual Studio Code.
  • Mac의 VM에서 Windows에서 실행되는 Visual Studio IDE입니다.
  • 클라우드의 VM에서 Windows에서 실행되는 Visual Studio IDE입니다.

  자세한 내용은 Mac용 Visual Studio 사용 중지 공지를 참조하세요.

Razor Pages 웹앱 만들기

Visual Studio

• Visual Studio를 시작하고 새 프로젝트를 선택합니다.

• 새 프로젝트 만들기 대화 상자에서 ASP.NET Core Web App(Razor페이지)다음을> 선택합니다.

• 새 프로젝트 구성 대화 상자에서 프로젝트 이름으로 RazorPagesMovie를 입력합니다. 대문자 표시를 포함하여 프로젝트 이름을 RazorPagesMovie로 지정해야 예제 코드를 복사해 붙여넣을 때 네임스페이스가 일치합니다.

• 다음을 선택합니다.

• 추가 정보 대화 상자에서 다음을 수행합니다.

  • .NET 8.0(장기 지원)을 선택합니다.
  • 확인: 최상위 문을 사용 안 함이 선택 취소되어 있습니다.

• 만들기를 실행합니다.

  

  다음 시작 프로젝트를 만듭니다.

  

프로젝트를 만드는 다른 방법은 Visual Studio에서 새 프로젝트 만들기를 참조하세요.

Visual Studio Code

이 자습서에서는 VS Code를 잘 알고 있다고 가정합니다. 자세한 내용은 VS Code 시작을 참조하세요.

• 터미널 메뉴에서 새 터미널을 선택하여 통합 터미널을 엽니다.

• 프로젝트가 포함될 디렉터리(cd)로 변경합니다.

• 다음 명령을 실행합니다.

  dotnet new webapp -o RazorPagesMovie
  code -r RazorPagesMovie
  

  dotnet new 명령은 RazorPagesMovie 폴더에서 새 Razor Pages 프로젝트를 만듭니다.

  code 명령은 Visual Studio Code의 현재 인스턴스에서 RazorPagesMovie 폴더를 엽니다.

Visual Studio Code에서 다음을 묻는 대화 상자를 표시할 수 있습니다. 이 폴더에 있는 파일의 작성자를 신뢰합니까?

• 부모 폴더의 모든 파일을 신뢰하는 경우 부모 폴더에 있는 모든 파일의 작성자 트러스트를 선택합니다.
• 예, 프로젝트 폴더에 .NET에서 생성된 파일이 있으므로 작성 자를 신뢰합니다.
• Visual Studio Code에서 프로젝트를 빌드하고 디버그할 자산을 추가하도록 요청하면 예를 선택합니다. Visual Studio Code에서 빌드 및 디버그 자산을 추가하도록 제공하지 않는 경우 명령 팔레트 보기를>선택하고 검색 상자에 ".NET"를 입력합니다. 명령 목록에서 명령을 선택합니다 .NET: Generate Assets for Build and Debug .

Visual Studio Code는 .vscode 생성된 파일과 tasks.json 파일이 있는 폴더를 launch.json 추가합니다.

Mac용 Visual Studio

• Mac용 Visual Studio 2022에서 파일>새 프로젝트...를 선택합니다.

• 새 프로젝트의 템플릿 선택 대화 상자에서 다음을 수행합니다.

  • 웹 및 콘솔>앱>웹 애플리케이션을 선택합니다.
  • 계속을 선택합니다.

• 새 웹 애플리케이션 구성 대화 상자에서 다음을 수행합니다.

  • 확인: 대상 프레임워크가 .NET 8.0 이상으로 설정됩니다.
  • 확인: 인증이 인증 없음으로 설정되어 있습니다.
  • 확인: 최상위 문을 사용 안 함이 선택 취소되어 있습니다.
  • 계속을 선택합니다.

• 새 웹 애플리케이션 구성 대화 상자에서 다음을 수행합니다.

  • Project name에 RazorPagesMovie를 입력합니다. 대문자 표시를 포함하여 프로젝트 이름을 RazorPagesMovie로 지정해야 예제 코드를 복사해 붙여넣을 때 네임스페이스가 일치합니다.
  • 만들기를 실행합니다.

앱 실행

Visual Studio

솔루션 탐색기 PagesMovie를 선택한Razor 다음 Ctrl+F5 키를 눌러 디버거 없이 앱을 실행합니다.

프로젝트가 SSL을 사용하도록 아직 구성되지 않은 경우 Visual Studio에 다음 대화 상자가 표시됩니다.

IIS Express SSL 인증서를 신뢰하는 경우 예를 선택합니다.

다음 대화 상자가 표시됩니다.

개발 인증서를 신뢰하는 데 동의하는 경우 예를 선택합니다.

Firefox 브라우저를 신뢰하는 방법에 대한 자세한 내용은 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 인증서 오류를 참조하세요.

Visual Studio:

• Kestrel 서버를 시작하는 앱을 실행합니다.
• https://localhost:<port>에서 앱 UI를 표시하는 기본 브라우저를 시작합니다. <port>는 앱을 만들 때 할당되는 임의 포트입니다.

브라우저 창을 닫습니다.

Visual Studio Code

• 다음 명령을 실행하여 HTTPS 개발 인증서를 신뢰합니다.

  dotnet dev-certs https --trust
  

  앞의 명령은 Linux에서 작동하지 않습니다. 인증서 신뢰에 대해서는 Linux 배포 설명서를 참조하세요.

  위의 명령은 이전에 인증서를 신뢰할 수 없었던 경우 다음 대화 상자를 표시합니다.

  

• 개발 인증서를 신뢰하는 데 동의하는 경우 예를 선택합니다.

  자세한 내용은 ASP.NET Core HTTPS 개발 인증서 신뢰를 참조하세요.

Firefox 브라우저를 신뢰하는 방법에 대한 자세한 내용은 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 인증서 오류를 참조하세요.

Visual Studio Code에서 Ctrl+F5(Windows) 또는 ⌘+F5(macOS)를 눌러 디버깅하지 않고 앱을 실행합니다.

디버거 선택 프롬프트에서 .NET 5+ 및 .NET Core를 선택합니다.

다음 URL https://localhost:<port>로 시작된 기본 브라우저입니다. 여기서 <port>는 임의로 생성된 포트 번호입니다.

브라우저 창을 닫습니다.

Visual Studio Code의 실행 메뉴에서 디버깅 중지를 선택하거나 Shift+F5 키를 눌러 앱을 중지합니다.

Mac용 Visual Studio

디버그>디버깅 시작을 선택하여 앱을 시작합니다.

Mac용 Visual Studio에서 브라우저를 시작하고 https://localhost:<port>로 이동합니다. 여기서 <port>는 프로젝트 생성 시 임의로 할당된 포트 번호이며, Properties/launchSettings.json에 설정되어 있습니다.

브라우저 창을 닫습니다.

프로젝트 파일 검토

다음 섹션에는 작업할 주요 프로젝트 폴더 및 파일에 대한 개요가 포함되어 있습니다.

페이지 폴더

Razor Pages 및 지원 파일이 들어 있습니다. 각 Razor 페이지는 파일 쌍입니다.

• Razor 구문을 사용하는 C# 코드가 있는 HTML 태그를 포함하는 .cshtml파일입니다.
• .cshtml.cs 페이지 이벤트를 처리하는 C# 코드가 있는 파일입니다.

지원 파일에는 밑줄로 시작하는 이름이 있습니다. 예를 들어 파일은 _Layout.cshtml 모든 페이지에 공통적인 UI 요소를 구성합니다. _Layout.cshtml 페이지 맨 위에 있는 탐색 메뉴를 설정하고 페이지 맨 아래에 저작권 표시를 설정합니다. 자세한 내용은 ASP.NET Core의 레이아웃을 참조하세요.

wwwroot 폴더

HTML 파일, JavaScript 파일, CSS 파일과 같은 정적 자산을 포함합니다. 자세한 내용은 ASP.NET Core의 정적 파일을 참조하세요.

appsettings.json

연결 문자열과 같은 구성 데이터를 포함합니다. 자세한 내용은 ASP.NET Core의 구성을 참조하세요.

Program.cs

다음 코드가 포함되어 있습니다.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

이 파일의 다음 코드 줄은 미리 구성된 기본값으로 WebApplicationBuilder를 만들고, DI(종속성 주입) 컨테이너에 Razor 페이지 지원을 추가하고, 앱을 빌드합니다.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

개발자 예외 페이지는 기본적으로 사용하도록 설정되어 있으며 예외에 대한 유용한 정보를 제공합니다. 개발자 예외 페이지가 중요한 정보를 누출할 수 있으므로 개발 모드에서 프로덕션 앱을 실행해서는 안 됩니다.

앱이 개발 모드에서 실행되지 않을 경우 다음 코드는 예외 엔드포인트를 /Error로 설정하고 HTTP HSTS(Strict Transport Security Protocol)를 사용하도록 설정합니다.

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

예를 들어 위의 코드는 앱이 프로덕션 또는 테스트 모드에 있을 때 실행됩니다. 자세한 내용은 ASP.NET Core에서 여러 환경 사용을 참조하세요.

다음 코드는 다양한 미들웨어를 사용하도록 설정합니다.

• app.UseHttpsRedirection(); : HTTP 요청을 HTTPS로 리디렉션합니다.
• app.UseStaticFiles(); : HTML, CSS, 이미지, JavaScript와 같은 정적 파일이 제공되도록 설정합니다. 자세한 내용은 ASP.NET Core의 정적 파일을 참조하세요.
• app.UseRouting(); : 경로 일치를 미들웨어 파이프라인에 추가합니다. 자세한 내용은 ASP.NET Core의 라우팅을 참조하세요.
• app.MapRazorPages(); : Razor Pages에 대한 엔드포인트 라우팅을 구성합니다.
• app.UseAuthorization(); : 사용자에게 보안 리소스에 액세스할 수 있는 권한을 부여합니다. 이 앱은 권한 부여를 사용하지 않으므로 이 줄을 제거할 수 있습니다.
• app.Run();: 앱을 실행합니다.

완료된 샘플 문제 해결

해결할 수 없는 문제가 발생한 경우 완료된 프로젝트와 코드를 비교합니다. 완료된 프로젝트를 보거나 다운로드합니다(다운로드 방법).

다음 단계

다음: 모델 추가