MVC는 Model, View, Controller의 첫 글자를 딴 약자입니다. 테스트와 유지보수가 쉽고 제대로 설계된 어플리케이션을 개발하기 위한 한 가지 방법으로 MVC 라는 디자인 패턴을 사용합니다. MVC에 기반한 어플리케이션은 다음을 포함합니다.
- Models : 어플리케이션의 데이터를 표현하는 클래스이며 또한, 입력 데이터가 비즈니스 규칙을 따르는지 검증합니다.
- Views : HTML 응답을 동적으로 생성하기 위해 어플리케이션이 사용하는 템플릿입니다.
- Controllers : 브라우저로부터 사용자 요청을 받아서, MODEL 데이터를 조회하고, 응답에 사용할 VIEW 템플릿을 지정하는 클래스입니다.
이 자습서 시리즈를 통해 우리는 이 모든 개념을 살펴 보고 어플리케이션을 작성하기 위해 각각을 어떻게 사용하는지 보게될 겁니다.
먼저, 컨트롤러를 추가하는 것으로 시작합시다. Solution Explorer에서 Controllers 폴더 위에서 우클릭하고 Add > Controller 를 차례로 선택합니다.
그림 출처 - http://i3.asp.net/media/4409997/AC.png cdn_id=2013-11-14-001
Add Scaffold 다이얼로그 창에서 MVC 5 Controller Empty 를 지정하고 Add 버튼을 눌러 추가합니다.
그림 출처 - http://i3.asp.net/media/4409991/AS.PNG cdn_id=2013-11-14-001
새 컨트롤러의 이름을 "HelloWorldController" 라고 입력하고 Add 버튼으로 추가합니다.
그림 출처 - http://i1.asp.net/media/46589/addC2.PNG cdn_id=2013-11-14-001
Solution Explorer 를 보면 HelloWorldController.cs 라는 새 파일이 추가되었고 IDE에 열려 있습니다. 그리고 Views\HelloWorld 라는 폴더도 새롭게 생겼습니다.
그림 출처 - http://i2.asp.net/media/4410003/hw.PNG cdn_id=2013-11-14-001
컨트롤러의 내용을 다음의 코드로 대치합니다.
그림 출처 - http://i2.asp.net/media/4410003/hw.PNG cdn_id=2013-11-14-001
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my <b>default</b> action...";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}
컨트롤러의 메서드는 HTML 문자열을 예제로서 반환합니다. 컨트롤러의 이름은 HelloWorldController이고 첫번째 메서드의 이름은 Index 입니다. 자, 이제 브라우저에서 호출해 봅시다. F5 키 또는 Ctrl + F5 키 조합으로 어플리케이션을 실행합니다. 그리고, 브라우저의 주소창에서 HelloWorld를 주소의 끝에 추가합니다 (예: http://localhost:1234/HelloWorld ). 브라우저에서 보이는 페이지는 아래의 스크린샷과 유사할 겁니다. 위의 메서드에서 문자열을 직접 반환했는데 이것은 시스템에게 HTML 문자열을 리턴하라고 지시한 것과 같습니다. 그리고 시스템은 그 명령을 따라 우리가 보고 있는 결과를 만들었습니다.
그림 출처 - http://i3.asp.net/media/37661/IE_helloWorld.PNG cdn_id=2013-11-14-001
ASP.NET MVC는 입력 URL 에 기반해서 컨트롤러와 그 내부의 액션 메서드를 호출합니다. ASP.NET MVC는 코드를 호출하기 위해 아래와 같은 포맷을 사용하여 URL을 해석하고 경로를 지정합니다.
/[Controller]/[ActionName]/[Parameters]
경로 지정에 사용되는 이런 포맷은 App_Start/RouteConfig.cs 파일에 구성되어 있습니다.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
어플리케이션을 실행하면서 컨트롤러 또는 액션에 해당하는 URL 세그먼트를 지정하지 않으면, 기본적으로 Home 컨트롤러를 찾고 Index 액션 메서드를 찾도록 위의 코드에 구성되어 있습니다.
첫번째 URL 세그먼트는 실행할 컨트롤러 클래스를 결정합니다. 예로, /HelloWorld 라는 경로는 HelloWorldController 클래스로 매핑됩니다 (컨트롤러 클래스명에 Controller가 접미사로 붙는 것은 MVC의 명명규칙입니다). 두번째 세그먼트는 그 컨트롤러의 액션 메서드를 결정합니다. /HelloWorld/Index 로 지정하면 HelloWorldController 클래스의 Index 액션을 호출하게 됩니다. 앞선 데모에서 브라우저에 /HelloWorld만 입력했지만 Index 메서드가 기본 액션으로 설정되어 있었기에 결과를 성공적으로 가져왔습니다. 만약, 구체적으로 액션까지 지정되었다면 해당 액션의 결과가 반환되었을 겁니다. 세번째 세그먼트는 경로 데이터에 해당하는 파라미터입니다. 이 경로 데이터는 자습서의 뒷부분에서 살펴보겠습니다.
이번에는 http://localhost:xxxx/HelloWorld/Welcome 주소로 브라우징 해봅니다. Welcome 메서드가 동작해서 "This is the Welcome action method..." 라는 문자열을 반환합니다. 기본 MVC 매핑은 /[Controller]/[ActionName]/[Parameters] 입니다. URL 에서 [Parameters] 부분은 아직 사용하지 않았습니다.
그림 출처 - http://i2.asp.net/media/37675/WelcomeAction.PNG cdn_id=2013-11-14-001
이제, 예제를 약간 수정해서 URL을 이용해 컨트롤러로 파라미터를 전송해 봅시다 (예; /HelloWorld/Welcome name=Scott&numtimes=4). Welcome 메서드를 수정해서 아래와 같이 두 개의 파라미터를 포함하도록 만듭니다. 두번째 파라미터는 C#의 선택적 매개변수(optional-parameter) 특성을 갖고 있습니다. 이 파라미터에 값이 넘어오지 않으면 기본 값으로 1을 사용하도록 정의되었습니다.
public string Welcome(string name, int numTimes = 1) {
return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
}
보안 노트 : 위의 코드에서 입력 값을 Http 응답으로 되돌려 줄 때, HttpServerUtility.HtmlEncode 함수를 사용했습니다. 입력 값으로 자바스크립트가 들어 왔을 때, 이런 위와 같은 처리를 하지 않고 Http 응답으로 돌려주면 자바스크립트가 실행되어 악의적인 작업을 수행할 수 있기 때문입니다. Html로 인코딩 함으로써 의도된 악성 스크립트는 실행되지 않고 문자 그대로 출력됩니다. 보다 자세한 내용은 다음 링크를 참조하세요.
How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings
어플리케이션을 실행하고 예제 URL (http://localhost:xxxx/HelloWorld/Welcome name=Scott&numtimes=4) 로 접속합니다. URL의 name과 numtimes 파라미터에 다른 값을 사용해도 됩니다. ASP.NET MVC 모델 바인딩 시스템은 쿼리스트링의 파라미터와 액션 메서드의 파라미터를 이름에 기반해서 자동으로 매핑해 줍니다.
그림 출처 - http://i3.asp.net/media/37664/numTimesParam.PNG cdn_id=2013-12-16-001
위의 예제에서는 Parameters에 해당하는 URL 세그먼트를 사용하지 않고 쿼리스트링을 통해 name 과 numTimes 파라미터를 전달했습니다. 물음표( )가 URL에서 쿼리스트링을 구분하고 있고 물음표 뒷부분이 쿼리스트링에 해당합니다. 앰퍼샌드(&) 문자는 쿼리스트링 내에서 파라미터 한쌍(이름과 값, {name}={value})을 구분합니다.
Welcome 메서드를 다음 코드로 변경합니다.
public string Welcome(string name, int ID = 1)
{
return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
}
어플리케이션을 실행하고 다음의 URL을 입력합니다.
URL: http://localhost:xxx/HelloWorld/Welcome/3 name=Rick
그림 출처 - http://i1.asp.net/media/46640/rick.PNG cdn_id=2013-12-16-001
이번에는 URL의 세번째 세그먼트(3)가 ID라는 경로 파라미터에 대입되었습니다. Welcome 액션 메서드는 ID라는 파라미터를 갖고 있고, 이 파라미터는 RegisterRoutes 메서드에 정의된 URL 템플릿의 세번째 세그먼트와 일치합니다.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
우리가 위에서 ID를 쿼리스트링 대신 경로 데이터로 넘기는 것이 ASP.NET MVC 어플리케이션에서는 전형적인 방법입니다.
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Hello",
url: "{controller}/{action}/{name}/{id}"
);
}
}
어플리케이션을 실행하고 아래의 URL로 브라우징 합니다.
URL: /localhost:XXX/HelloWorld/Welcome/Scott/3
그림 출처 - http://i1.asp.net/media/4324109/hw99.PNG cdn_id=2013-11-14-001
많은 MVC 어플리케이션에서 이 기본 루트("{controller}/{action}/{id}")는 잘 동작합니다. 전송하고자 하는 데이터에 따라 기본 루트를 재고해야 한다면 큰 골치거리일 겁니다. 자습서 시리즈의 뒷편에서는 이 기본 루트를 수정할 필요없이 모델 바인더를 통해 데이터를 전송하는 방법도 알아볼 것입니다.
지금까지의 예제들을 통해서 컨트롤러는 MVC에서 VC(뷰와 컨트롤러)의 역할을 했습니다. 컨트롤러가 HTML을 직접 반환했기 때문에 뷰의 역할도 한 것입니다. 컨트롤러가 이렇게 HTML을 생성해야 한다면 코딩의 양이 상당해 질 것이므로 개발자가 원하는 일반적인 방식이 될 수 없습니다. 대신, 별도의 뷰 템플릿을 사용해서 HTML 응답을 만들어 내는 것이 MVC의 전형적인 방법입니다. 이것을 어떻게 하는지 다음 자습서에서 보도록 하겠습니다.
:{3} 
({4})