Part 6-4-4. ASP.NET Core 둘러보기 : Hello Razor Pages

공부/인프런 - Rookiss

Part 6-4-4. ASP.NET Core 둘러보기 : Hello Razor Pages

셩잇님 2024. 8. 27. 12:25

🔖 ASP.NET Core 둘러보기

지난 시간에는 .NET CORE의 MVC 프로젝트의 Views 폴더 산하에 있는 Index.cshtml을 직접 작성해보는 시간을 가졌다. 이를 작성하며 골뱅이(@)를 통해 컨트롤러와 모델에 있는 내용을 뷰에 치환하는 것을 알았으며, 레이저 뷰 가져오기를 임포트 통해 이를 처리해야 하는 것 까지 알아보았다. 이번 시간에는 MVC를 모두 마치고 일전에 MVC를 HelloEmpty 프로젝트에 이식한 것과 같이 Razor Pages를 빈 Empty 폴더에 이식하는 작업을 한다. 이어서 학습하도록 하자. 😀

🧩 Hello Razor Page

먼저 기존에 MVC 프로젝트를 따라하기 위해 만들었던 Controller와 Model 폴더는 모두 삭제하여 스크립트를 지워주도록 한다. Razor 프로젝트는 Pages 폴더 내부에서 스크립트를 관리하기 때문에 이와 동일하게 작업을 하기 위해 HelloEmpty 프로젝트에 새롭게 Pages 폴더를 만들어 주도록 한다.

Razor 프로젝트는 Pages 밑에 _ViewImports.cshtml 파일이 존재하므로, MVC 프로젝트에 생성해주었던 해당 파일을 마찬가지로 Pages 폴더 밑으로 이동시켜주도록 하자. 이후 Razor 프로젝트의 Index.cshtml 파일을 보면 그 밑에 C#으로 Indes.cshtml.cs 파일이 있는 것을 볼 수 있다.

이 무슨 혼종인가? cshtml 파일 밑에 .cs 파일이 또 있다니.. 아무튼 해당 Index 파일을 Empty 프로젝트에 생성해주기 위해 추가 - 새항목을 통해 파일을 만들어 주자.

VS 2022 기준으로 Razor Page - 비어 있음을 통해 만들어주면 된다. 나는 이미 파일을 만들었기 때문에 파일명 뒤에 1이 붙어있지만, 일반적으로는 Index를 파일명을 통해 파일이 생성된다.

일전에 MVC 프로젝트는 모델, 뷰, 컨트롤러 폴더를 통해 이를 모두 나누어 처리하였지만, Razor 페이지는 이를 모두 나누어서 처리하지 않는다. 따라서 MVC 프로젝트는 MVC 형태를 띄지만, Razor 프로젝트는 MVVM 형태를 띈다.

// MVC
// M (Model) - 데이터 (원자재)
// V (View) - UI (인테리어)
// C (Controller) - Controller (액션)

// Razor Pages
// M
// V
// MVVM (Model-View-ViewModel)

따라서 index.cshtml 파일이 자식으로 index.cshtml.cs를 가지는 것을 볼 수 있다. 즉 모델과 뷰만 분리한 형태인 셈인 것이다.

Index.cshtml.cs & Index.cshtml

using HelloEmpty.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace HelloEmpty.Pages
{
    public class IndexModel : PageModel
    {
        // 모델 바인딩 참가 암시
        [BindProperty]
        public HelloMessage HelloMsg { get; set; }
        public string Noti { get; set; }

        public void OnGet()
        {
            this.HelloMsg = new HelloMessage()
            {
                Message = "Hello, Razor Pages!"
            };
        }

        public void OnPost()
        {
            this.Noti = "Message Changed!";
        }
    }
}

index.cshtml.cs 파일을 열어 다음과 같이 작성해주자. 해당 내용은 일전에 MVC 패턴에서 사용했던 내용과 별 다를 것이 없어서 별도의 설명은 생략한다.

@page

@model HelloEmpty.Pages.IndexModel

<html>
	<head>
		<title>Hello Razor Pages!</title>
	</head>
	<body>
		<h1>@Model.HelloMsg.Message</h1>
		<ht />
		<h2>@Model.Noti</h2>
		<form method="post">
			<label asp-for="HelloMsg.Message">Enter Message</label>
			<br />
			<input type="text" asp-for="HelloMsg.Message" />
			<br />
			<button type="submit">Submit</button>
		</form>
	</body>
</html>

MVC 패턴의 프로젝트와는 다르게 asp-controller와 asp-model도 작성하지 않는다는 것을 알 수 있다. 기존의 MVC 패턴을 통한 index.cshtml는 반드시 1:1로 대응한다는 것을 보장하지 않기 때문에 asp-controller와 asp-model을 작성하여 이를 명시해주었지만, MVVM 모델은 이를 지워도 무방하다. 그렇다면 왜 지워도 무방한 것일까? 이 부분이 지워져도 동작한다는 것은 결국 MVVM 모델의 페이지는 클래스와 서로 1:1로 매핑이 되어서 사용하기 때문이다. 따라서 이전과 같이 폼(form)안의 asp-controller가 누구이고, asp-model이 누구인지 파악할 필요가 없어서 더욱 사용하기 편하다. 이것이 MVC 패턴가 MVVM 모델의 차이점이다.

마지막으로 HelloEmpty의 Progrm.cs를 수정하도록 하자.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// MVC 실행 시
// builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/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();

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

app.Run();

기존에 MVC 프로젝트 형태의 구성요소는 주석으로 제거하고, Razor Page의 구성요소를 호출하기 위한 형태로 변경해주도록 하자. 이후 실행하면 Razor Page로 변경한 웹 사이트가 정상적으로 열리는 것을 볼 수 있다.

의문점

그렇다면 Razor Page는 라우팅 규칙이 어떻게 이루어질까? MVC는 일전의 아래 코드와 같이Controller는 Home, Action은 Index로 설정해주어 동작하는 것을 대략적으로 유추할 수 있었다.

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

기본 Razor 프로젝트를 시작 프로젝트로 설정하여 실행해보도록 하자.

위와 같이 Hello Razor의 기본 형태와 홈, 프라이버시가 있는 것을 알 수 있다. Privacy는 /Privacy의 형태로 구별되어 있는데, Razor 프로젝트의 Pages 폴더를 살펴보면 Parvacy.cshtml 파일이 있는 것을 볼 수 있다. 따라서 기본적으로 아무것도 입력하지 않았을 때에는 Home 화면으로 가고, 특정 페이지로 가고 싶을 경우 해당 프로젝트의 Page 안에 있는 내용을 확인하고 이를 읽고 웹사이트를 통해 보여주는 것을 알 수 있다.

'공부 > 인프런 - Rookiss' 카테고리의 다른 글

Part 6-4-6. ASP.NET Core 둘러보기 : Hello Blazor Server (0)	2024.08.29
Part 6-4-5. ASP.NET Core 둘러보기 : Hello WebAPI (1)	2024.08.28
Part 6-4-3. ASP.NET Core 둘러보기 : Hello MVC #2 (0)	2024.08.26
Part 6-4-2. ASP.NET Core 둘러보기 : Hello MVC #1 (0)	2024.08.24
Part 6-4-1. ASP.NET Core 둘러보기 : 환경설정 (0)	2024.08.24

현재글Part 6-4-4. ASP.NET Core 둘러보기 : Hello Razor Pages

셩잇님의 잡동사니