기존 애플리케이션의 기본 기능은 정상적으로 동작하지만, UI 표현과 URL 구조를 더 직관적으로 개선할 필요가 있습니다. 예를 들어, 날짜 필드에서 불필요한 시간 정보를 숨기거나 필드명을 한국어로 변경하고, 상세 페이지로 이동하는 링크의 URL 구조를 깔끔하게 정리하는 방법을 살펴봅니다.

엔티티 모델에 데이터 주석 추가

모델 클래스에 데이터 주석(Data Annotations)을 적용하면 UI 표시 방식과 데이터 유효성 검사를 제어할 수 있습니다. Models/Product.cs 파일을 열고 다음과 같이 특성을 추가합니다. System.ComponentModel.DataAnnotations 네임스페이스를 임포트해야 합니다.

using System;
using System.ComponentModel.DataAnnotations;

namespace RazorMvcStore.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Title { get; set; }
        
        [Display(Name = "출시일")]
        [DataType(DataType.Date)]
        public DateTime LaunchDate { get; set; }
        
        public string Manufacturer { get; set; }
        public decimal Cost { get; set; }
    }
}

[Display(Name = "출시일")] 특성은 UI에 표시될 레이블 이름을 지정합니다. 또한 [DataType(DataType.Date)] 특성은 해당 필드가 날짜 형식임을 명시하여, 렌더링 시 시간 정보(00:00:00)가 표시되지 않고 날짜만 출력되도록 합니다.

태그 헬퍼를 활용한 링크 생성

Pages/Products/Index.cshtml 파일에서 목록을 렌더링하는 부분을 확인해 봅니다. 서버 측 코드에서 HTML 요소를 동적으로 생성할 때 태그 헬퍼(Tag Helpers)를 사용하면 라우팅을 쉽게 처리할 수 있습니다.

<tbody>
@foreach (var product in Model.Products) {
    <tr>
        <td>@Html.DisplayFor(model => product.Title)</td>
        <td>@Html.DisplayFor(model => product.LaunchDate)</td>
        <td>@Html.DisplayFor(model => product.Manufacturer)</td>
        <td>@Html.DisplayFor(model => product.Cost)</td>
        <td>
            <a asp-page="./Edit" asp-route-id="@product.Id">수정</a> |
            <a asp-page="./Details" asp-route-id="@product.Id">상세</a> |
            <a asp-page="./Delete" asp-route-id="@product.Id">삭제</a>
        </td>
    </tr>
}
</tbody>

asp-page와 asp-route-id 태그 헬퍼는 Razor 페이지의 상대적 라우트와 ID 값을 기반으로 href 속성을 자동으로 생성합니다. 브라우저에서 페이지 소스를 확인하면 생성된 링크가 쿼리 문자열(예: /Products/Details?id=1) 형태로 되어 있는 것을 볼 수 있습니다.

라우트 템플릿을 통한 URL 구조 개선

쿼리 문자열 대신 ID를 URL 경로 세그먼트로 포함하여 더 깔끔한 RESTful URL을 만들려면 라우트 템플릿을 수정해야 합니다. Edit.cshtml, Details.cshtml, Delete.cshtml 파일의 첫 번째 페이지 지시문을 다음과 같이 변경합니다.

@page "{id:int?}"

이렇게 수정하면 URL에 ID가 경로의 일부로 포함됩니다(예: /Products/Details/1). 만약 {id:int}처럼 물음표를 빼고 필수 매개변수로 설정하면, ID 없이 요청 시 HTTP 404 오류가 발생하거나 빈 페이지가 반환됩니다. ID를 선택적 매개변수로 두어 기본 목록 페이지로도 작동하게 하려면 반드시 {id:int?}를 사용해야 합니다.