프로그래밍/ASP.NET

ASP.NET MVC: MVC 패턴을 활용한 웹 애플리케이션 개발 가이드

shimdh 2025. 2. 8. 13:46
728x90

ASP.NET MVC는 웹 애플리케이션을 구조화하고 개발하는 데 매우 효과적인 프레임워크입니다. 이 프레임워크는 MVC(Model-View-Controller) 패턴을 기반으로 하여 애플리케이션의 구성 요소를 명확하게 분리함으로써 유지보수성과 확장성을 높입니다. 이번 블로그 포스트에서는 ASP.NET MVC의 핵심 개념인 MVC 패턴, 컨트롤러 작성, 뷰 작성, 그리고 모델 바인딩에 대해 자세히 알아보고, 각 부분을 어떻게 통합하여 웹 애플리케이션을 개발할 수 있는지 설명하겠습니다. 또한, 실습 예제와 함께 각 개념을 더 깊이 있게 다루어 보겠습니다.


1. MVC 패턴 이해

MVC 패턴은 애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller) 세 가지 주요 구성 요소로 나눕니다. 각 구성 요소는 독립적으로 작동하며, 이는 코드의 재사용성과 테스트 용이성을 높입니다.

1.1 모델 (Model)

모델은 애플리케이션의 데이터와 비즈니스 로직을 관리합니다. 데이터베이스와 상호작용하며, 데이터를 가져오거나 저장하는 역할을 합니다. 모델은 데이터의 상태를 관리하고, 비즈니스 규칙을 적용하는 데 중점을 둡니다.

예제:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

위 예제에서 Product 클래스는 제품의 ID, 이름, 가격을 나타내는 모델입니다. 이 모델은 데이터베이스에서 제품 정보를 가져오거나 저장하는 데 사용될 수 있습니다.

1.2 뷰 (View)

뷰는 사용자 인터페이스(UI)를 담당합니다. 모델에서 전달된 데이터를 시각적으로 표현하며, 사용자와 상호작용할 수 있는 요소를 제공합니다. 뷰는 HTML, CSS, JavaScript를 사용하여 사용자에게 정보를 표시합니다.

예제:

@model IEnumerable<Product>

<h1>제품 목록</h1>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - @product.Price 원</li>
    }
</ul>

위 예제는 제품 목록을 표시하는 뷰입니다. @model 지시어를 사용하여 뷰에 전달된 데이터의 타입을 지정하고, @foreach 루프를 통해 각 제품의 이름과 가격을 리스트로 출력합니다.

1.3 컨트롤러 (Controller)

컨트롤러는 사용자 요청을 처리하고, 모델과 뷰 간의 상호작용을 조정합니다. 사용자의 입력을 받아 적절한 모델을 호출하고, 그 결과를 뷰로 전달합니다. 컨트롤러는 애플리케이션의 비즈니스 로직을 처리하는 데 중점을 둡니다.

예제:

public class ProductsController : Controller
{
    public ActionResult Index()
    {
        var products = ProductRepository.GetAllProducts();
        return View(products);
    }
}

위 예제에서 ProductsControllerIndex 액션 메서드를 통해 모든 제품 목록을 가져와 뷰로 전달합니다. 이렇게 하면 뷰에서 제품 목록을 표시할 수 있습니다.


2. 컨트롤러 작성

컨트롤러는 MVC 패턴에서 중재자 역할을 합니다. 사용자 요청을 처리하고, 모델과 뷰를 연결하는 중요한 부분입니다. 컨트롤러를 작성할 때는 액션 메서드, 라우팅, 파라미터 처리 등을 고려해야 합니다.

2.1 기본 컨트롤러 클래스 생성

모든 컨트롤러는 Controller 클래스를 상속받아야 합니다. 아래는 간단한 컨트롤러 예제입니다.

예제:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult About()
    {
        ViewBag.Message = "이 페이지는 About 페이지입니다.";
        return View();
    }
}

위 예제에서 HomeControllerIndexAbout 두 개의 액션 메서드를 가지고 있습니다. Index 메서드는 기본 뷰를 반환하고, About 메서드는 ViewBag을 사용하여 뷰에 메시지를 전달합니다.

2.2 액션 메서드와 라우팅

액션 메서드는 특정 URL 요청에 대한 응답으로 실행됩니다. 라우팅은 URL 패턴을 컨트롤러의 액션 메서드에 매핑합니다. 기본 라우팅 규칙은 RouteConfig.cs 파일에서 설정됩니다.

예제:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

위 예제는 기본 라우팅 규칙을 정의합니다. {controller}는 컨트롤러 이름, {action}은 액션 메서드 이름, {id}는 선택적 파라미터로 대체됩니다.

2.3 파라미터 전송 및 처리

컨트롤러는 클라이언트로부터 전송된 파라미터를 쉽게 처리할 수 있습니다. 아래 예제는 사용자 이름을 받아 인사말을 생성하는 액션 메서드입니다.

예제:

public ActionResult Greet(string name)
{
    ViewBag.GreetingMessage = $"안녕하세요, {name}님!";
    return View();
}

위 예제에서 사용자가 /Home/Greet?name=John이라는 URL로 접근하면 "안녕하세요, John님!"이라는 인사말이 담긴 메시지가 생성되어 뷰로 전달됩니다.


3. 뷰 작성

뷰는 사용자에게 데이터를 시각적으로 표현하는 역할을 합니다. ASP.NET MVC에서는 Razor 구문을 사용하여 동적으로 HTML을 생성할 수 있습니다. 뷰를 작성할 때는 부분 뷰, 레이아웃, 데이터 바인딩 등을 고려해야 합니다.

3.1 Razor 구문

Razor는 C# 코드를 HTML 마크업 내에 통합할 수 있도록 도와줍니다. 이를 통해 동적으로 콘텐츠를 생성할 수 있습니다.

예제:

@model Product

<h1>@Model.Name</h1>
<p>가격: @Model.Price 원</p>

위 예제는 Product 모델의 이름과 가격을 출력하는 뷰입니다. @model 지시어를 사용하여 뷰에 전달된 데이터의 타입을 지정하고, @Model을 통해 모델의 속성에 접근합니다.

3.2 부분 뷰와 레이아웃

부분 뷰는 재사용 가능한 UI 조각이며, 레이아웃은 여러 페이지에 걸쳐 공통적으로 사용되는 디자인 요소를 정의합니다.

예제:

<!-- _ProductDetails.cshtml -->
@model Product

<div class="product-details">
    <h2>@Model.Name</h2>
    <p>가격: @Model.Price 원</p>
</div>

위 예제는 제품 상세 정보를 표시하는 부분 뷰입니다. 이 부분 뷰는 다른 뷰에서 재사용할 수 있습니다.

레이아웃 예제:

<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @RenderSection("Styles", required: false)
</head>
<body>
    <header>사이트 헤더</header>

    <div class="container">
        @RenderBody()
    </div>

    <footer>사이트 푸터</footer>

    @RenderSection("Scripts", required: false)
</body>
</html>

위 예제는 사이트의 공통 레이아웃을 정의합니다. @RenderBody()는 개별 뷰의 내용을 삽입하는 위치를 나타냅니다.


4. 모델 바인딩

모델 바인딩은 클라이언트로부터 전송된 데이터를 서버의 모델 객체에 자동으로 매핑하는 과정입니다. 이를 통해 개발자는 복잡한 데이터 추출 및 변환 작업을 줄일 수 있습니다.

4.1 기본 모델 바인딩

모델 바인딩은 폼 데이터, 쿼리 문자열, 경로 변수 등 다양한 데이터 소스를 지원합니다.

예제:

public class UserModel
{
    public string Name { get; set; }
    public string Email { get; set; }
}

public ActionResult Register(UserModel user)
{
    // user.Name과 user.Email이 자동으로 채워짐
}

위 예제에서 Register 액션 메서드는 UserModel 객체를 매개변수로 받습니다. 사용자가 폼을 통해 이름과 이메일을 입력하면, 이 데이터는 자동으로 UserModel 객체에 매핑됩니다.

4.2 커스텀 모델 바인더

특정 형식의 데이터를 처리하기 위해 커스텀 모델 바인더를 구현할 수 있습니다.

예제:

public class CustomDateBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (value != null && DateTime.TryParseExact(value.AttemptedValue,
            "dd-MM-yyyy", CultureInfo.InvariantCulture,
            DateTimeStyles.None, out var date))
        {
            return date;
        }
        return null;
    }
}

위 예제는 "dd-MM-yyyy" 형식의 날짜를 처리하는 커스텀 모델 바인더입니다. 이 바인더는 컨트롤러에서 다음과 같이 사용할 수 있습니다.

[HttpPost]
public ActionResult Create([ModelBinder(typeof(CustomDateBinder))] DateTime birthdate)
{
    // 생년월일 처리가 가능합니다.
}

5. 결론

ASP.NET MVC는 MVC 패턴을 통해 웹 애플리케이션을 체계적으로 개발할 수 있는 강력한 프레임워크입니다. 모델, 뷰, 컨트롤러를 명확히 분리함으로써 코드의 재사용성과 유지보수성을 높일 수 있으며, 모델 바인딩을 통해 데이터 처리를 간소화할 수 있습니다. 이 가이드를 통해 ASP.NET MVC의 기본 개념을 이해하고, 실제 프로젝트에 적용해 보시기 바랍니다.

728x90