파트 1: 개요 및 프로젝트 생성하기

개요

MVC 뮤직 스토어 응용 프로그램은 ASP.NET MVC와 Visual Studio for Web Development를 소개하고, 그 사용법을 단계별로 살펴보기 위한 자습용 응용 프로그램입니다. 웹 개발 경험이 거의 없는 분들도 이해할 수 있도록 차분하게 살펴보겠습니다.

지금부터 우리들이 구축해보고자 하는 MVC 뮤직 스토어 응용 프로그램은 간단한 음반 판매 전자상거래 사이트입니다. MVC 뮤직 스토어는 쇼핑, 결제, 관리, 이렇게 세 가지 부분으로 구성되어 있습니다

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image001.jpg

방문자들은 음반을 장르별로 조회할 수 있으며:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image002.jpg

특정 음반을 살펴본 다음, 장바구니에 추가할 수도 있습니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image003.jpg

물론, 자신의 장바구니를 다시 살펴보거나 더 이상 필요 없는 음반을 장바구니에서 제거할 수도 있습니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image004.jpg

그리고, 결제를 하려면 로그인을 하거나 사용자 계정을 등록해야만 합니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image005.png

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image006.png

이렇게 계정을 생성하고 나서, 배송 정보와 지불 정보 입력까지 마치고 나면 주문을 완료할 수 있습니다. 본 자습서에서는 ASP.NET MVC 그 자체에 집중하기 위해서 예제 응용 프로그램을 가급적 간단하게 구현하고자 합니다. 그래서, 현재 MVC 뮤직 스토어에서 특별한 프로모션을 진행 중이라고 가정할 것입니다. 즉, 프로모션 코드에 "FREE"라고 입력하기만 하면, 모든 음반이 공짜인 것입니다!

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image007.jpg

주문을 모두 마치고 나면, 간단한 주문 확인 화면이 나타납니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image008.jpg

마지막으로, 고객들에게 제공되는 페이지들 외에도, 관리자가 음반을 등록하고, 수정하고, 삭제할 수 있는 음반 관리 목록을 제공해주는 관리자 영역도 구현해보게 될 것입니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image009.jpg

프로젝트 생성하기

필요한 소프트웨어 설치하기

본 자습서에서는 먼저 무료 Visual Web Developer 2010 Express를 이용해서 새로운 ASP.NET MVC 3 프로젝트를 생성한 뒤에, 필요한 기능들을 하나씩 추가해가면서 완전한 기능의 응용 프로그램을 구현하는 접근방식을 사용할 것입니다. 그리고, 그 과정을 통해서 데이터베이스 접근, 폼 제출 시나리오, 데이터 유효성 검사, 일관성 있는 페이지 레이아웃을 위한 마스터 페이지 사용, 페이지 갱신과 유효성 검사를 위한 AJAX 사용, 사용자 로그인 등을 하나씩 살펴보게 될 것입니다.

단계별 구현 과정을 하나씩 살펴볼 수도 있지만, 필요하다면 http://mvcmusicstore.codeplex.com/에서 완전한 응용 프로그램을 다운로드 받으실 수도 있습니다.

또한, MVC 뮤직 스토어 응용 프로그램은 Visual Studio 2010 SP1이나 무료 버전인 Visual Web Developer 2010 Express SP1을 사용해서 구축할 수 있습니다. 데이터베이스로는 역시 무료 버전인 SQL 서버 컴팩트 에디션을 사용할 것입니다. 본격적으로 본 자습서를 살펴보기 전에, 먼저 다음에 소개된 필수 소프트웨어들을 설치해야만 합니다. 다음의 웹 플랫폼 인스톨러 링크를 클릭하면 필요한 모든 소프트웨어를 한 번에 설치하실 수 있습니다:

• http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1Pack

웹 플랫폼 인스톨러를 이용하면 자동으로 이미 설치되어 있는 프로그램들을 검토한 다음, 필요한 프로그램들을 다운로드 받아서 설치해줍니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image011.png

만약, 필요한 프로그램들을 개별적으로 설치하고 싶다면, 위의 링크 대신 다음의 링크들을 이용하십시요 (본 자습서를 출력해서 보는 경우에도 도움이 될 것입니다):

• Visual Studio Web Developer Express 2010 SP1 Prerequisites

  (http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1Pack)

• ASP.NET MVC 3 Tools Update

  (http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3)

• SQL Server Compact 4.0 - 런타임과 지원 도구들을 포함하고 있습니다.

  (http://www.microsoft.com/web/gallery/install.aspx?appid=SQLCE;SQLCEVSTools_4_0)

가급적이면 첫 번째 웹 플랫폼 인스톨러 링크를 사용해서 필요한 모든 소프트웨어를 올바르게 설정하는 것을 권해드립니다.

새로운 ASP.NET MVC 3 프로젝트 생성하기

먼저, Visual Web Developer의 "File" 메뉴에서 "New Project" 메뉴를 선택합니다. 그러면, New Project 대화 상자가 나타납니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image012.png

좌측 트리뷰에서 "Visual C#" > "Web" 템플릿 항목을 선택한 다음, "ASP.NET MVC 3 Web Application" 템플릿을 선택합니다. 그리고, 프로젝트 이름으로 MvcMusicStore라고 입력한 다음, "OK" 버튼을 누릅니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image013.jpg

그러면, 몇 가지 MVC 전용 프로젝트 설정 항목을 지정할 수 있는 두 번째 대화 상자가 나타납니다. 각 항목들을 다음과 같이 설정합니다:

• Project Template - Empty를 선택합니다.
• View Engine - Razor를 선택합니다.
• Use HTML5 semantic markup - 체크합니다.

다음 그림과 같이 설정되었는지 확인한 다음, "OK" 버튼을 누릅니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image014.jpg

그러면, 프로젝트가 생성되는데, 우측의 솔루션 탐색기에서 응용 프로그램에 추가된 폴더들을 잠시 살펴보겠습니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image015.jpg

비록 빈(Empty) MVC 3 템플릿을 선택하기는 했지만 모든 것이 완벽하게 비어 있지는 않습니다. 기본적인 폴더 구조가 미리 생성되어 있는 것을 보실 수 있습니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image016.png

이렇게 미리 생성된 폴더들의 이름에는 몇 가지 기본적인 ASP.NET MVC의 명명규약이 적용됩니다:

비록, 이 폴더들 중에서 몇 개의 폴더는 비어 있지만, 이 비어 있는 폴더들조차도 역시 ASP.NET MVC 응용 프로그램의 일부입니다. 기본적으로 ASP.NET MVC 프레임워크는 "설정보다 우선하는 관례(CoC, Convention over Configuration)"에 따라 폴더 명명규약에 기반한 몇 가지 조건을 전제로 실행되기 때문입니다. 예를 들어서, 컨트롤러는 뷰를 코드에서 명시적으로 지정하지 않아도 기본적으로 Views 폴더에서 뷰를 찾습니다. 이 기본적인 규약을 지키면, 작성해야 할 코드의 전체 분량을 줄일 수 있으며, 다른 개발자들이 여러분의 프로젝트를 이해하기도 쉬워집니다. 본 자습서의 응용 프로그램을 구현해 나가면서 이런 규약들에 대해서 더 자세하게 살펴보도록 하겠습니다.

파트 2: 컨트롤러

전통적인 웹 프레임워크에서는 서버에 전달된 URL과 디스크 상의 특정 파일이 맵핑되는 것이 일반적입니다. 가령, "/Products.aspx"나 "/Products.php" 같은 URL에 대한 요청은 "Products.aspx"나 "Products.php" 파일에 의해서 처리되는 식입니다.

그러나, ASP.NET MVC 프레임워크에서는 URL과 서버 코드가 약간 다른 방식을 통해서 맵핑됩니다. URL과 파일이 직접 맵핑되는 대신, URL과 클래스의 메서드가 맵핑되는 것입니다. 그리고, 이런 클래스들을 "컨트롤러(Controller)"라고 부르는데, 전달된 HTTP 요청의 처리, 사용자 입력 처리, 데이터의 조회 및 저장, 클라이언트로 반환될 응답 형태 (HTML 출력, 파일 다운로드, 다른 URL로 재전송 등) 결정 등의 역할을 수행합니다.

HomeController 추가하기

먼저, MVC 뮤직 스토어 응용 프로그램에 사이트 홈 페이지의 URL에 대응하는 컨트롤러 클래스를 추가해보도록 하겠습니다. 이 컨트롤러는 ASP.NET MVC의 기본 명명규약에 따라 HomeController라는 이름을 갖게 될 것입니다.

솔루션 탐색기에서 마우스 오른쪽 버튼으로 "Controllers" 폴더를 클릭한 다음, "Add" > "Controller..."를 선택합니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image017.jpg

그러면, "Add Controller" 대화 상자가 나타나는데, 컨트롤러 이름을 "HomeController"로 지정한 다음, "Add" 버튼을 누릅니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image018.png

그러면, 다음과 같은 코드를 담고 있는 HomeController.cs라는 새로운 파일이 생성됩니다:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

일단 되도록 간단하게 접근해보기 위해, Index 메서드의 코드를 변경하여 단순 문자열을 반환하게 만들어 보겠습니다. 다음과 같이 두 가지 부분을 수정하면 됩니다:

• ActionResult 대신 문자열을 반환하도록 메서드를 변경합니다.
• return 구문을 return "Hello from Home"으로 변경합니다.

작업을 마치고 나면 메서드의 모습은 다음과 같을 것입니다:

public string Index()
{
    return "Hello from Home";
}

응용 프로그램 실행하기

이제 MVC 뮤직 스토어 응용 프로그램을 실행해보겠습니다. 다음 중 한 가지 방법을 사용해서, 웹 서버를 시작하고 사이트를 테스트해 볼 수 있습니다:

• Debug > Start Debugging 메뉴를 선택합니다.
• 툴바에서 다음 그림과 같은 녹색 버튼을 클릭합니다.

  

  출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image019.jpg

• 키보드 단축키 F5를 누릅니다.

이 세 가지 방법 중 한 가지를 방법을 수행하면, 프로젝트가 컴파일된 다음, Visual Web Developer에 내장된 ASP.NET Development Server가 시작됩니다. 그러면, 다음 그림과 같이 화면 우측 하단에 ASP.NET Development Server가 시작되었음을 알리는 정보와 실행 중인 포트 번호 정보가 나타납니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image020.png

그런 다음, 자동으로 Visual Web Developer가 브라우저 창을 열고 웹 서버의 URL로 이동합니다. 이 방법을 사용해서 개발 중인 웹 응용 프로그램을 신속하게 테스트해 볼 수 있습니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image021.png

모든 것이 완벽합니다. 새로운 웹사이트를 생성했고, 세 라인으로 구성된 메서드를 추가했으며, 브라우저 상에서 텍스트가 출력되는 것을 확인한 이 모든 작업들이 눈깜짝할 사이에 끝났습니다. 비록 로켓 공학만큼 거창하고 복잡하지는 않지만, 지금부터가 본격적인 시작입니다.

StoreController 추가하기

이전 절에서는 사이트의 홈 페이지를 구현하는 간단한 HomeController를 추가해봤습니다. 이번에는 MVC 뮤직 스토어의 브라우징 기능을 구현하기 위한 또 하나의 컨트롤러를 추가해보도록 하겠습니다. 이번에 추가해 볼 StoreController는 다음과 같은 세 가지 시나리오를 지원하게 될 것입니다:

• MVC 뮤직 스토어의 음반 장르 목록 페이지
• 특정 장르에 대한 모든 음반들의 목록을 제공해주는 조회(Browse) 페이지
• 지정한 특정 음반에 대한 정보를 보여주는 상세(Details) 페이지

먼저, 새로운 StoreController 클래스부터 추가해보겠습니다. 만약, 이미 응용 프로그램이 실행 중이라면 브라우저를 닫거나 "Debug" > "Stop Debugging" 메뉴를 선택해서 응용 프로그램을 중시시킵니다.

이제 새로운 StoreController를 추가할 수 있습니다. 이전 절에서 HomeController를 추가했을 때처럼, 마우스 오른쪽 버튼으로 솔루션 탐색기에서 "Controllers" 폴더를 클릭한 다음, "Add" > "Controller" 메뉴를 선택합니다. 그리고, 컨트롤러 이름을 "StoreController"로 지정한 다음, "Add" 버튼을 누르면 StoreController가 만들어지게 됩니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image022.png

이렇게 새로 만들어진 StoreController에는 이미 "Index" 메서드가 구현되어 있을 것입니다. 지금부터 이 "Index" 메서드를 활용해서 MVC 뮤직 스토어의 모든 장르들의 목록을 제공하는 페이지를 구현해보도록 하겠습니다. 그리고, 또 다른 두 가지 메서드를 더 추가해서, StoreController에서 처리하고자 하는 나머지 두 가지 시나리오, 즉 조회(Browse) 페이지와 상세(Details) 페이지도 구현해 볼 것입니다.

이와 같이 컨트롤러에 존재하는 메서드들(Index, Browse, Details)을 "컨트롤러 액션(Controller Actions)"이라고 부르며, 이미 HomeController.Index() 액션 메서드에서 살펴본 것처럼, 전달된 URL 요청을 처리하고, 해당 URL을 요청한 브라우저나 사용자에게 어떤 콘텐트를 반환할 지를 결정하는 역할을 수행합니다.

다음 코드에서 볼 수 있는 것처럼, Index() 메서드를 변경해서 "Hello from Store.Index()"라는 문자열을 반환하도록 수정하고, 비슷한 형태로 Browse() 메서드와 Details() 메서드를 추가해서 StoreController를 구현합니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        //
        // GET: /Store/
        public string Index()
        {
            return "Hello from Store.Index()";
        }
        //
        // GET: /Store/Browse
        public string Browse()
        {
            return "Hello from Store.Browse()";
        }
        //
        // GET: /Store/Details
        public string Details()
        {
            return "Hello from Store.Details()";
        }
    }
}

그런 다음, MVC 뮤직 스토어 응용 프로그램을 다시 실행시키고 다음의 URL들을 방문해보십시요:

• /Store
• /Store/Browse
• /Store/Details

이 URL들에 접근해보면, 컨트롤러의 액션 메서드들이 호출되어 다음 그림과 같이 문자열 응답이 반환되는 것을 확인할 수 있습니다:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image023.png

멋지기는 하지만, 아직까지는 단지 정적인 문자열이 반환되고 있을 뿐입니다. 이번에는 URL을 통해서 정보를 전달한 다음, 그 정보를 페이지에 출력해서 동적인 출력을 만들어 보겠습니다.

먼저, URL로부터 쿼리스트링 값을 가져올 수 있도록 Browse 액션 메서드를 변경해보겠습니다. 다음 코드와 같이, 액션 메서드에 "genre"라는 매개변수를 추가하면, 이 메서드가 호출될 때, ASP.NET MVC가 자동으로 쿼리스트링이나 전송된 폼에서 이름이 "genre"인 값을 찾아서 이 매개변수에 전달해줍니다.

//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
{
    string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

    return message;
}

그러면, 이번에는 /Store/Browse?Genre=Disco로 이동해봅니다.

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image024.png

이번에는 Details 액션 메서드를 변경해서 ID라는 이름의 입력 매개변수를 읽고 출력해보겠습니다. 다만, Browse 액션 메서드의 경우와는 달리, 이번에는 ID 값을 쿼리스트링 매개변수에 포함시키지는 않을 것입니다. 그 대신, 값 자체를 URL에 직접 포함시킬 것입니다. 가령, /Store/Details/5와 같이 말입니다.

이와 같이 ASP.NET MVC를 이용하면 일일이 필요한 부분들을 직접 구성하지 않더라도 손쉽게 작업을 처리할 수 있습니다. ASP.NET MVC의 기본 라우팅 규약에서는 액션 메서드 이름 이후의 URL 부분을 "ID"라는 이름을 가진 매개변수로 처리합니다. 따라서, 액션 메서드에 ID라는 이름의 매개변수가 존재하는 경우, 자동으로 ASP.NET MVC가 해당 URL 부분을 매개변수에 전달해줍니다.

//
// GET: /Store/Details/5
public string Details(int id)
{
    string message = "Store.Details, ID = " + id;

    return message;
}

다시 MVC 뮤직 스토어 응용 프로그램을 실행시킨 다음, /Store/Details/5로 이동해보십시요:

출처 : http://i1.asp.net/asp.net/images/mvc/msv30/image025.png

그러면, 지금까지 살펴본 내용들을 다시 한 번 정리해보겠습니다:

• Visual Web Developer에서 새로운 ASP.NET MVC 프로젝트를 생성했습니다.
• ASP.NET MVC 응용 프로그램의 기본적인 폴더 구조를 살펴봤습니다.
• ASP.NET Development Server를 이용해서 웹사이트를 실행하는 방법을 살펴봤습니다.
• 두 개의 컨트롤러 클래스, HomeController 및 StoreController를 작성했습니다.
• URL 요청을 처리하고 브라우저로 텍스트를 반환하는 액션 메서드를 컨트롤러에 추가했습니다.

질문이나 의견이 있으시면 http://mvcmusicstore.codeplex.com/을 방문해주시기 바랍니다.

다음 강좌에서 계속 이어집니다...

宋