ASP.NET MVC3 준비 운동

마이크로소프트(이하 MS)의 여러 웹 기술 중, 웹 애플리케이션 프레임워크인 ASP.NET MVC는 기존 WebForm과 여러 차이가 있다. 이 글에서는 독자가 C#, HTML, CSS, 자바스크립트를 이미 알고 있다는 전제 하에 Stack Overflow와 유사한 UI를 가진 '질의응답 사이트'를 개발함으로써 ASP.NET MVC3의 여러 특징과 기술을 살펴본다.

허국현 blog.naver.com/empty_wagon｜블로깅을통한 지식의 공유를 좋아하는 그리스도인 개발자다. 대한민국의 Stack Overflow를 꿈꾸며, 오늘도열심히 NullPointr(www.nullpointr.com)를 개발하고 있다.

MS에서 개발한 닷넷프레임워크용 웹 기술로 ASP.NET이 있다. ASP.NET의 상위계층에 구현된 기술인 WebForm은 위지윅그(WYSIWYG) 기반 편집기로 마크업언어와 관련된 동작코드를 분리한 특별한 구조 및 편리한 컨트롤툴로 인해수 많은 개발자에게사랑받고있다. 그러나시간의 흐름에 따라 새로운 프로그래밍기법과 이론이 등장하며 WebForm의 한계가 점차 부각되기 시작했다. 이런 요구가 반영된 새로운 웹 애플리케이션 프레임워크가바로 ASP.NET MVC다.

WebForm과 MVC의차이점
WebForm과 MVC는 ASP.NET의상위계층에서구현됐다는점은같지만기본철학에서큰차이가있다.

● HTTP의특성을받아들이다

무상태(Stateless) 프로토콜인 HTTP는하나의 HTTP 요청이지난요청과관계없이진행된다.

이런단점을극복하고자 WebForm에는여러기술이도입됐으며대표적인것이 ViewState다. ViewState는웹프로그래밍을마치 WinForm에서프로그래밍하는것처럼해주지만엄청난대역폭을요구하는단점이있다. 반면 MVC는이런 HTTP의무상태성을인정하고있다.

● 낮은추상화수준

WebForm의가장큰특징중하나는높은수준의추상화지만추상화로인한많은제약도가지고있다. 한예로자바스크립트라이브러리를이용할때 WebForm이 id, name 등의 HTML 태그를개발자의의도와다르게마음대로변경하는경우가있어원하는동작이이뤄지지않는경우가많다. 그러나 MVC는추상화수준을낮춤으로써 WebForm이안고있는추상화로인한불편을해소했다.

● 설정보다관례(Convention over configuration)

XML 파일에복잡한설정을줄이고, 프레임워크에서정의한관례를따르면별다른설정이필요하지않다.

● 단위테스트하기좋은구조

WebForm은단위테스트의중요성이부각되지않던 2002년에처음등장했기때문에단위테스트시상당히많은불편요소를가지고있다. 반면 MVC는설계초기부터단위테스트의용이성을염두에두고설계됐다.

● 오픈소스프로젝트

MVC는오픈소스프로젝트다. CodePlex 웹사이트(aspnet webstack.codeplex.com)에서 ASP.NET MVC는 git로관리되고있다. 이에따라개발자가직접 MVC 개발에참여할수있으며, 코드가공개돼있는만큼다소부실한 MSDN을이용하기보단코드분석을통해함수의기능을확인하는개발자가많다.

MVC란무엇인가?
ASP.NET MVC를살펴보기전계속언급한 MVC에대한기본개념을살펴보자. MVC는모델, 뷰, 컨트롤러(Model-View-Controller)를의미하며세가지모델은각분리돼복잡한모델링이나수정에보다유연한구조를가지고있는설계패턴이다.

● 모델

프로그램이사용될영역에따라처리할논리들이있는곳이다. 대체로 DB에서데이터를읽고, 쓰는역할을담당한다.

● 뷰

모델의정보를이용해사용자인터페이스를생성한다.

● 컨트롤러

사용자의입력을해석하고처리한다. 이과정에서컨트롤러는뷰와모델을연동하는역할을한다.

MVC 구조를보다쉽게이해할수있도록인터넷서점에서마소한권을검색하는가상시나리오를살펴보자.

1. 사용자가검색창에서 '마이크로소프트웨어'라고입력하고검색버튼을누른다.
2. 컨트롤러는이입력을해석하고마소와관련된책리스트가필요하다는요청을모델에게전달한다.
3. 모델이찾은책리스트를컨트롤러는뷰에전송하고뷰는마소와관련된책리스트를사용자에게보여준다.

ASP.NET MVC3은닷넷프레임워크 4.0 이상에서만동작한다. 따라서비주얼스튜디오 2010이필요하지만무료버전인비주얼스튜디오익스프레스만설치해도별다른제약없이개발할수있다. 비주얼스튜디오 2010이이미설치됐다면 ASP.NET 웹사이트(asp.net/mvc)에서 Standalone Installer를클릭해 ASP.NET MVC3를설치한다.

필자메모 필자를비롯한많은독자들이 Stack Overflow(stackoverflow. com)을참고하지만영문사이트인만큼언어의장벽으로인해어려움을겪는개발자가많다. 이점이아쉬워필자는국내개발자를위한 NullPointr 웹사이트(www.nullpointr.com)를개설했으며, 이번연재는이사이트를개발하면서이용한기술을공유하기위해시작됐다.

설치및프로젝트생성

이제본격적으로 ASP.NET MVC3를살펴보자. 프로젝트생성은도구상자의 [New Project] 또는 [File] -> [New] -> [Project]로열린프로젝트창에서 [Web]을클릭한다. 이후 [ASP.NET MVC3 Web Application]을선택하고프로젝트명으로 'MasoQna'를입력한다.

ASP.NET MVC3를처음접했을때 [New Web Site]로프로젝트생성을시도했던필자의실수를겪지않길바라는마음에서프로젝트생성과정을자세히소개했다.

<그림 1> 프로젝트생성

<그림 1>과같은 'New ASP.NET MVC3 Project' 창에서 Internet Application와 View engine으로 Razor를선택하고, 'Use HTML5 semantic markup'을체크한다. 이밖의설정은기본설정을따른다.

프로젝트생성시여러폴더와파일이함께생성된다. Models, Views, Controllers 폴더에는모델, 뷰, 컨트롤러와관련된파일이담기며, 비주얼스튜디오에의해몇가지기본적인파일이생성됐다. 이외에주목할폴더는 Scripts와 Content다. 여기에는흥미롭게도 jQuery 1.5.1이프로젝트에기본으로추가되있다. 최신버전이필요한경우 <그림 2>처럼 Manage NuGet Packages로최신버전을설치할수있다.

<그림 2> NuGet을이용한 jQuary 설치

라이브러리는우측상단의검색창을이용해찾을수있지만 jQuery의경우상단에노출돼있어별다른검색없이도바로설치할수있다.

프로젝트생성폴더에있는 2개의 Web.config 파일을눈여겨보자(<그림 3> 참조). 프로젝트의최상단에위치한 Web.config 외에도프로젝트빌드설정이저장되고, 사용자가설정을변경할수있는 Web.Debug.config와 Web.release.config가있다. Views 폴더의 Web.config에는뷰와관련된설정이저장된다.

<그림 3> 2개의 Web.config

실행시키기

코드를분석하기전프로그램을실행하면 <그림 4>와같은심플한페이지가열린다.

<그림 4> 프로젝트생성후실행결과

About 페이지의주소는 http://localhost:50592/Home/ About이며 '.aspx'가노출되지않은것을확인할수있다. 주소에서 50592는 ASP.NET 개발서버가정하는값으로개발환경에따라다를수있다.

ASP.NET MVC의코드실행순서
ASP.NET MVC가코드를실행하는간략한순서는다음과같다.

1. Global.asax.cs 파일내 MvcApplication 클래스의 Application_ Start() 함수
2. 해당하는컨트롤러클래스의액션함수
3. View 파일(.cshtml)

컨트롤러클래스의 public 함수를 ASP.NET MVC에서는액션함수라고부른다. 언급한세단계외에도여러단계가더있지만, 실행흐름을보다쉽게설명하기위해생략했다. 지금부터는각단계를보다자세히살펴보자.

Application_Start()
세줄로이뤄진 Application_Start() 함수에서 AreaRegistra tion.RegisterAllAreas()는영역등록을담당한다(<리스트 1> 참조). 여기서 '영역'은작은웹사이트라할수있으며규모가큰웹사이트에회사소개, 고객지원등의작은웹사이트각각이바로영역이다

.

<리스트 1> MvcApplication.Application_Start() 함수 protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); }

RegisterGlobalFilters(GlobalFilters.Filters)는전역으로사용될필터를등록하며, 이필터들은웹페이지를처리하는 Action 함수의실행전후에불러져입력또는결과에여러교정을한다. 기본값은 HandleErrorAttribute로예외가발생했을때로드될페이지를정하는역할을한다. 참고로디버그빌드에서는노란화면이디버깅에유리하므로이기능은비활성화된다.

마지막으로 RegisterRoutes(RoutTables.Routes)는경로설정과관련돼있다. RegisterRoutes()에주소생성규칙을정의하면앞서 About 웹페이지의주소가파일명이아닌 '/Home /About/'처럼나온다. 경로설정은 ASP.NET MVC에서핵심내용중하나이므로다음강좌에서자세히다룰예정이다.

<리스트 2> RegisterRoutes() 함수 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // 경로이름 "{controller}/{action}/{id}", // 매개변수가들어간 URL new { controller = "Home", action = "Index", id = UrlParameter.Optional } // 매개변수기본값 ); }

RegisterRoutes() 함수는 IgnoreRoute와 MapRoute의나열로구성됐다(<리스트 2> 참조). 주소지정은 IgnoreRoute()로 .axd 파일경로를모두제거하고원하는경로를 MapRoute() 함수를이용해지정한다. 기본값은 '{controller}/{action}/{id}'로컨트롤러의이름, 액션함수의이름그리고옵션성격의 id로주소로구성되며, 컨트롤러에는 'Home', 액션에는 'Index'가설정돼있어 HomeController의 About() 함수와연결된웹페이지의주소가 '/Home/About'로출력된다. 만약아무런추가정보없이 http://localhost:50592라고입력하면 HomeController의 Index() 함수가실행된다.

액션함수
메인페이지와관련된 HomeController.Index() 함수를살펴보자.

<리스트 3> HomeController.Index() public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); }

<리스트 3>에서 ViewBag은닷넷프레임워크 4.0에서추가된 dynamic 타입의변수이며, 컨트롤러에서필요한것을추가해서 View로넘기는역할을한다.

ASP.NET MVC3 등장전에는 ViewData란사전(Diction ary)이사용됐다. 예전 ASP.NET MVC로제작된웹사이트의코드를보면 ViewData["Message"] = "Welcome…"로쓰인경우를만나기도한다. 마지막으로 'return'으로 View() 함수를호출하고있다.

뷰실행
서두에서 ASP.NET MVC의특징을소개하며 '설정보다관례'란표현을썼다. ASP.NET MVC의학습은먼저이관례들을공부하고관례를깰수있는설정을배우게된다해도과언이아니다.

<리스트 3>에서는단순하게 View()를호출하지만이호출은함수명과동일한이름을가진 cshtml 파일을다음과같은순서로찾는다.

1. Views/Shared 폴더내 Index.cshtml의존재여부를확인하고있는경우이것을뷰로결정한다.
2. Views/[컨트롤러이름] 아래에 Index.cshtml의존재여부를확인하고있는경우뷰로결정한다.
3. 없는경우예외처리를한다.

지금은 Shared 폴더에 Index.cshtml이없고 Home 폴더안에 index.cshtml이있으므로 2번경로로실행된다. Index.cshtml 코드는 <리스트 4>와같다.

<리스트 4> Index.cshtml @{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">.">.</a>">.</a></a>">.</a></a></a>">.</a></a></a></a>">.</a></a></a></a></a>">http://asp.net/mvc</a>.</a></a></a></a></a></a> </p>

<리스트 4>는 C#과유사하면서도 HTML 같기도하다. 이런이유로파일의확장자가 'cshtml(C#(cs)+HTML)'이며, C# 코드는 @ 뒤에작성된다. 기본적으로액션함수는정해진 Message를 @ViewBag.Message로 <h2> 태그안에작성한다.

@를삭제하면사전정의된 Message인 'Welcome…'이아닌 ViewBag.Message가그대로나타나므로 C# 코드앞에는 @를붙여야함을잊지말자.

ASP.NET MVC3 이전에는이런정보를 <%%> 사이에넣었지만, 보기도작성하기도상당히불편해 MVC3에서 @란새로운문법으로변경됐다. 예전문법은 ASPX, 새로운문법은레이저(Razor)라고하며, 레이저문법에대해서추후다룰예정이다.

<리스트 4>에서는 <html> 태그를찾을수없으며, <html>과관련된내용은 Views/Shared/_Layout.cshtml에있다. 지면상의이유로자세히설명하지않지만우선 <title> 태그안에 <리스트 4>에서정한 Title이들어가고, <리스트 4>의코드가 @RenderBody()에전달된다.

또다른코드로 View/_ViewStart.cshtml이있다. 이파일에는앞서설명한 _Layout.cshtml의경로를 Layout 속성에대입하는코드밖에없다. _ViewStart.cshtml은모든뷰가실행되기전공통적으로실행되는파일이므로공통적으로처리할일은이파일에추가하자.

지금까지살펴본뷰관련실행순서를정리하면 _ViewStart. cshtml -> [뷰파일] -> _Layout.cshtml로요약할수있다.

질문처리와관련된파일추가하기

지금부터는 MVC를하나씩프로젝트에추가해보자. 컨트롤러, 모델, 뷰순으로진행되며추가할파일은어떤사용자가한질문을다른사용자에게보여주는기능을수행한다.

Questionscontroller 추가하기
<그림 5>처럼 Controllers 폴더에서마우스오른쪽버튼을클릭해 [Add] -> [Controller]를클릭하고 <그림 6>과같이이름만입력하고다른설정은기본값으로둔다.

<그림 5> 컨트롤러추가

<그림 6> 컨트롤러이름입력

모델추가하기
Question이란 Class를 models 아래추가하고 <리스트 5>를입력한다.
모델추가방법은일반 C# 파일을추가할때와거의동일하다

.

<리스트 5> Question.cs public class Question { public int Id { get; set; } public string Title { get; set; } public string Content { get; set; } }

뷰추가하기
앞서생성한 Controller에 <리스트 6>처럼 'Read'란액션함수를추가한다.

<리스트 6> 추가된액션함수 public ActionResult Read() { return View(); }

뷰추가에는두가지방법이있다. View 폴더에서마우스오른쪽버튼을클릭해 Questions 폴더를생성하고 cshtml 파일을추가할수있다. 더쉽게 <그림 7>처럼함수이름에서마우스오른쪽버튼을클릭하면나온풀다운메뉴를이용할수있다.

<그림 7> 가장쉬운뷰추가방법

뷰추가창에서뷰이름은기본값을사용하고 Create a strongly-typed view를체크하고 Model 클래스에방금만든 Question 클래스를선택한다. 만약클래스가보이지않는다면창을닫고컴파일한후다시뷰를추가하자.

생성된 Read.cshtml 파일에서지금까지못보던코드한줄이있는것을확인할수있다. @model(처음시작하는 m은반드시소문자여야한다)을이용해서이파일과관련된모델타입은 Question임을알리고있다.

<그림 8> Add View 창

간단한코드의작성
강한타입뷰(strongly-typed view)에 <리스트 7>과 <리스트 8>의코드를입력한다.

<리스트 7> Read 함수 public ActionResult Read() { Question q = new Question(){ Title = "마소기고는어떻게하나요?", Content = "더이상의자세한질문은생략!" }; return View(q); }

<리스트 8> Read.cshtml @model MasoQna.Models.Question <h2>@Model.Title</h2> <p>@Model.Content</p>

Read.cshtml 파일을앞서언급한두가지방법중하나로생성하고액션함수에서생성한모델의객체를 View 함수의인자로전달한다. 전달된객체는 Read.cshtml에서 Model 속성을통해참조할수있다. <리스트 8>에서대문자 Model과 model은대소문자구분을통해용도가구분됨을눈여겨보자. 정리하면 Model은 View 함수의인자로전달받은모델객체를참조하는데사용된다. model은 '@model' 형태로만쓰이고 View() 함수에서전달받은객체의타입을뷰에알리는역할을한다. View() 함수는인자의타입과 @model에표기된타입이부모자신관계가아니거나다를경우예외처리되므로주의하기바란다.

이제 /Questions/Read로접속하면 <그림 9>와같은웹페이지가실행된다.

<그림 9> 실행결과

ViewBag에서는인텔리센스가작동하지않지만, 강한타입뷰모델의경우인텔리센스가동작해개발자들이 ViewBag보단강한타입뷰를선호하는편이다.

지금까지 ASP.NET MVC3의기초적인내용을간략히살펴봤다. 다음시간에는여러기능을하나씩추가하며 ASP.NET MVC3을보다더깊이다룰예정이다. 지금까지진행된프로젝트는 http://code.google.com/p/masoqna에서다운로드할수있다.

[출처] [2012년 6월] ASP.NET MVC3 준비 운동|작성자 주의사신