티스토리 뷰

웹 개발의 표준이 된 MVC

웹 개발에 있어서 MVC(Model-View-Controller)는 이제 보편화된 디자인 패턴이 되었다. 각 담당 영역을 분리하여 생산성과 유지보수성을 현저히 높일 수 있기 때문에 현재 웹 개발에 있어 언어를 막론하고 사실상의 표준으로 군림하고 있다. 이러한 MVC 패턴의 구현체로 대표적인 프레임워크는 Java 진영의 Spring MVC, PHP 진영의 Lavavel, .NET 진영의 ASP.NET MVC가 있다.

ASP.NET 2.0을 사용할 수 밖에 없다면?

현재 ASP.NET MVC는 5까지 발표되었지만 ASP.NET 2.0을 사용할 수 밖에 없는 환경이라면 그림의 떡일 뿐이다.(주로 기존 시스템의 유지보수에 해당한다.) ASP.NET 2.0 환경에서 현대적인 HTML5 기반의 웹 사이트를 개발하기 위한 방법을 소개하고자 한다.

ASP.NET 2.0 환경에서 HTML5 웹 사이트 개발시 고려할 점은?

  • 서버 컨트롤에 의한 DOM 구현 및 접근을 최소화해야 한다. ASP.NET 2.0 자체로 매우 강력한 DOM 구현 기능을 제공하지만 JavaScript의 기능이 강력해진 현재에는 혼란만 일으킬 뿐이다.
  • View가 되는 소스(.aspx)에 서버 코드의 개입을 최소화해야 한다. 이는 MVC 패턴이 적용된 현대의 JSP에도 적용되는 개념이다. 각 화면에 출력되는 데이터는 ViewModel 오브젝트로 따로 정의하며 View에서는 ViewModel을 출력하는 용도로만 서버 코드의 개입을 허용한다.

ViewModel 적용한 예제 작성하기

아래 소개할 ViewModel 적용 예제는 Microsoft Visual Studio Community 2013(5인 이하에 한해 완전 무료)을 기준으로 작성되었다. File -> New Web Site -> .NET Framework 2.0 -> ASP.NET Empty Web Site를 선택하여 새로운 웹 애플리케이션 프로젝트를 생성한 후 아래와 같이 소스 코드를 작성한다. 프로젝트명은 ViewModelExample이다.

/ViewModelExample/Player.cs

using System;
using System.Collections.Generic;
using System.Web;

namespace ViewModelExample
{
    public class Player
    {
        public string Name { get; set; }
        public int No { get; set; }
    }
}
  • 예제는 NBA 1997-1998 시즌의 시카고 불스 팀 주전 멤버의 선수 이름 및 등번호를 출력할 것이다. 이를 위해 Model에 해당하는 Player 클래스를 작성한다.

/ViewModelExample/PlayerViewModel.cs

using System;
using System.Collections.Generic;
using System.Web;

namespace ViewModelExample
{
    public class PlayerViewModel
    {
        public Player MvpPlayer { get; set; }
        public List<Player> AllPlayers { get; set; }
    }
}
  • 화면에 출력될 데이터를 담을 ViewModel 클래스이다. ASP.NET 2.0은 각 .aspx 확장자마다 Code-behind라고 불리우는 .aspx.cs 파일을 옵션으로 제공한다. 이 클래스는 Code-behind 파일에서 사용될 것이다.
  • ASP.NET MVCViewModel에 대응되는 용도로 ViewData, ViewBag이란 클래스를 제공한다.

/ViewModelExample/Player.aspx/Player.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ViewModelExample
{
    public partial class _Default : System.Web.UI.Page
    {
        public PlayerViewModel viewModel = new PlayerViewModel();

        protected void Page_Load(object sender, EventArgs e)
        {
            Player mvpPlayer = new Player();
            mvpPlayer.Name = "Michael Jordan";
            mvpPlayer.No = 23;
            viewModel.MvpPlayer = mvpPlayer;
            viewModel.AllPlayers = new List<Player>();
            viewModel.AllPlayers.Add(mvpPlayer);

            Player player2 = new Player();
            player2.Name = "Scottie Pippen";
            player2.No = 33;
            viewModel.AllPlayers.Add(player2);

            Player player3 = new Player();
            player3.Name = "Dennis Rodman";
            player3.No = 91;
            viewModel.AllPlayers.Add(player3);

            Player player4 = new Player();
            player4.Name = "Luc Longley";
            player4.No = 13;
            viewModel.AllPlayers.Add(player4);

            Player player5 = new Player();
            player5.Name = "Ron Harper";
            player5.No = 9;
            viewModel.AllPlayers.Add(player5);
        }
    }
}
  • 화면 출력을 담당할 Player.aspx라는 이름의 Web Form 파일을 새로 생성한다. 생성과 동시에 앞서 언급한 Player.aspx.cs라는 이름의 Code-behind 파일이 생성되는데 위와 같이 작성한다.
  • 5명 선수의 이름과 등번호를 화면에 출력할 viewModel 오브젝트에 저장하는 역할을 수행한다. 만약 프로덕션 레벨이라면 데이터베이스로부터 데이터를 획득하여 viewModel 오브젝트에 저장하는 로직이 작성될 것이다.

/ViewModelExample/Player.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Player.aspx.cs" Inherits="ViewModelExample._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ViewModel Example</title>
</head>
<body>
    <h1>MvpPlayerName</h1>
    <h4><%= viewModel.MvpPlayer.Name %></h4>
    <h1>MvpPlayerNo</h1>
    <h4><%= viewModel.MvpPlayer.No %></h4>
    <h1>AllPlayers</h1>
    <table>
        <% for (int i = 0; i < viewModel.AllPlayers.Count; i++) { %>
        <tr>
            <td>
                <%= viewModel.AllPlayers[i].Name %>
            </td>
            <td>
                <%= viewModel.AllPlayers[i].No %>
            </td>
        </tr>
        <% } %>
    </table>
</body>
</html>
  • 첫 줄의 <%@ Page Language="C#" ... %>를 통해 서버 코드를 C#으로 작성하였다는 것을 명시하였다.(VB도 가능하다.)
  • <%= ... %>viewModel 오브젝트의 각 요소를 출력할 수 있다. 배열, 리스트 출력시 <% for ... %>를 사용한다.
  • 위와 같은 ASP.NET 코드는 최종적으로 .cs 코드로 컴파일되어 사용자에게 완전한 .html 파일로 출력된다.(이 과정은 JSPServlet으로 컴파일되는 방식과 유사하다.)
  • 위와 같이 서버 코드의 사용을 ViewModel 오브젝트의 출력으로 제한한다면 현대적인 개념의 JavaScript 프레임워크를 사용하여 얼마든지 HTML5 기반의 코드를 작성할 수 있다.

실행 화면


참고 글

댓글
댓글쓰기 폼