ASP.NET MVC, Hello World

Posted in .NET Framework // Posted at 2010. 8. 4. 13:19
728x90

가장 심플한 형태의 ASP.NET MVC 를 만들어 보자
모든 개발 공부는 가장 기본적인 구조에서 부터 출발하여 기술확장, 응용력확장을 해 나가는 것이 원칙이다.
처음부터 복잡한 형태를 이해하려고 하면 진입이 어려워서 쉽게 흥미를 잃어버리기 마련이다.
따라서 ASP.NET MVC 기반의 Hello World 샘플을 제작해 보도록 한다


1. ASP.NET MVC 프로젝트 생성
Visual Studio 2008 에서 새프로젝트를 만든다
아래그림과 같이 ASP.NET MVC2 Web Application 템플릿을 선택하고 프로젝트와 솔루션 이름은
HelloWorld 로 한다



확인을 클릭하면 아래 그림과 같이 유닛테스트 프로젝트 생성 여부를 묻는데,
우리는 간단한 데모를 빨리 만들어 볼 목적이므로 생성하지 않도록 한다


이렇게 프로젝트를 생성하면 VS는 자동으로 응용프로그램을 코드와 파일들을 마련해 주는데
이 자체가 하나의 ASP.NET MVC 프로그램이 된다

바로 F5를 눌러 실행시켜 보도록 하자
그러면 아래 그림과 같이 적당히 이쁜 웹 페이지를 브라우저에서 확인할 수 있다


간단한 멤버십 기능과 Home, About 링크가 제공된다
이 차제만으로도 훌륭한 샘플 데모이지만 처음 보기에는 조금 복잡해 보일 수도 있다

우리는 자체적으로 Hello World 만 출력해 볼 목적이므로 관련 파일들을 정리하도록 한다


2. 프로젝트 자동 생성 파일 정리하기
처음 생성된 프로젝트 구조를 보면 아래 왼쪽 그림과 같이 꽤 많은 파일들이 포함되어 있다
이를 오른쪽 그림과 같이 설정파일과 폴더구조만 남겨두고 모든 파일을 삭제하자

 
           =>  


이렇게 파일들을 제거하고 다시 실행을 해 보면 아래와 같은 오류를 보게 될 것이다
뷰와 컨트롤러를 모두 삭제했으니 페이지를 찾을 수 없다는 오류가 난 것이다





3. 뷰와 컨트롤러 생성하기
이제 Hello World 를 화면에 출력하기 위해 뷰와 컨트롤러를 생성해 보도록 하자

ASP.NET MVC 환경에서는 모든 요청의 출발은 컨트롤러(Controller)이다
컨트롤러가 요청에 대한 적절한 처리를 수행한 뒤 특정 뷰를 선택해 랜더링 되도록 한다
따라서 먼저 컨트롤러를 생성해 보도록 하자

솔루션탐색기에 Contollers 폴더에서 추가 -> Controller 해서
다음과 같이 HomeController 를 생성한다


그러면, Controller 클래스로 부터 상속받은 HomeColtroller 클래스와 Index 라는
액션메서드가 자동 생성된다. 코드를 아래와 같이 조금 수정하도록 하자

public class HomeController : Controller
{        
    public ActionResult Index()
    {
        ViewData["param"] = "HelloWorld";
        return View();
    }
}

ViewData 는 컨트롤러에서 뷰로 데이터를 전달하기 위한 키/값 구조로 이루어진
Dictory 형태의 자료형이며 여기에 "Hello World" 라는 문자열을 전달하기로 한다

그리고 메서드의 반환 값으로 ActionResult 인데 Index 액션 메서드가 특정 뷰를 페이지를
랜더링 하도록 하는 것이다. 여기서는 return View()로 뷰이름을 생략하였는데 기본값으로
메서드 이름인 Index 뷰(Index.aspx)를 선택하게 되는 것이다

다음으로 Index 메서드 아무 위치에서 마우스 우클릭해서 Add View 를 선택한다
이는 HomeController 의 Index 액션메서드의 뷰를 생성하는 것이다



뷰 이름은 Index로 하고 Add를 클릭하면,
프로젝트의 Views 폴더에 Home 폴더아래 Index.aspx가 생성된다


Index.aspx 의 <body> 안에 다음의 태그를 추가하자
컨트롤러에서 전달한 데이터를 뿌려주는 것이다
<body>
    <div>
        <%=ViewData["param"] %>
    </div>
</body>

이제 다 됐다. F5 키로 프로젝트를 실행 해 보자.
아래 그림과 같이 Hello World 가 출력되는 것을 확인할 수 있다



사실 이렇게 간단한 출력을 위해서는 굳이 View 페이지나 ViewData 자료전달이
불필요 할 수 있지만, 테스트를 위해 갖추어 봤다


* URL 라우팅 잠시 살펴보기
매우 간단한 Hello World 를 다 만들어 봤다
그런데 프로젝트를 실행해서 요청 URL을 확인해 보면 다음과 같다

http://localhost:11102/

솔루션 탐색기의 Index.aspx 파일은 /Views/Index.aspx 에 있는데 말이다

게다가 정직한(?) 형태로 다음과 같이 웹 리소스 경로 그대로를 요청하면 404 Not Found 오류가 난다
http://localhost:11102/Views/Index.aspx 

이유인 즉,
ASP.NET MVC는 URL 라우팅 엔진을 포함하고 있는데 이 라우팅 엔진에 의해
URL 이 해석되고 요청에 대한 컨트롤러와 액션 메서드를 선택하여 호출하게 된다
그리고 이 액션메서드에서 뷰를 선택하도록 되어 있기 때문에 URL 구조가 이전과는
다른 형태가 되는 것이다

URL 라우팅이 URL을 어떻게 해석하고 어떤 컨트롤러에게 보내야 할지 결정하게 되는
규칙을 마련해야 하는데 이 규칙은 Global.asax 파일에 다음과 같이 정의되어 있다

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
      "Default", // Route name
      "{controller}/{action}/{id}", // URL with parameters
     new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );
}

URL 규칙은 controller/action/id 형태로 이우러지며
기본값으로는 controller = "Home" , action = "Index" 로 정의되어 있다


즉 앞서 요청과 같이 (http://localhost:11102/)  컨트롤러와 액션메서드 없이 호출하게 되면
자동으로 Home 컨트롤러, Index 액션메서드가 선택되어 실행되는 것이다

따라서 위 규칙에 맞는 다음과 같은 요청은 모두 같은 것이 된다
- http://localhost:11102/                   : 컨트롤러, 액션메서드 지정 없음. 기본 값 사용
- http://localhost:11102/Home           : 컨트롤러 지정, 액션메서드는 기본 값 사용
- http://localhost:11102/Home/Index  : 컨트롤러, 액션메더스 모두 명시함