login register Sysop! about ME  
qrcode
    최초 작성일 :    2012년 06월 08일
  최종 수정일 :    2012년 06월 08일
  작성자 :    songgun
  편집자 :    songgun (송 원석)
  읽음수 :    48,883

강좌 목록으로 돌아가기

필자의 잡담~

본문은 ASP.net에서 제공되는 자습서 시리즈 중, 먼저 ASP.NET MVC 4 Beta 관련 자습서들을 번역하여 제공드리는 것입니다. Beta 강좌이지만, 정식버전에도 내용이 그대로 적용될 것으로 보이기에 유용하리라 생각해요.

원문은 총 9편으로 구성되어 있으며, 각각의 분량을 고려하여 한 편씩 제공되거나 두 편이 함께 제공됩니다. 전반적으로 자습서의 내용이 MVC 버전 4에만 국한되어 있지는 않으므로, 관심 있는 분들은 부담 없이 읽어보셔도 좋을 것 같습니다.

ASP.NET MVC 4 및 Visual Studio 2011 소개

본 자습서에서는 Microsoft Visual Studio의 무료 버전인 Microsoft Visual Studio 11 Express Beta for Web을 사용하여 ASP.NET MVC 웹 응용 프로그램을 만드는 기본적인 방법들을 살펴봅니다. 본문을 시작하려면 먼저 필요한 프로그램들을 설치해야 합니다. 다음 링크를 클릭하면 필요한 프로그램들을 설치할 수 있습니다: Web Platform Installer. *

만약, Visual Studio 11 Express Beta for Web이 아닌 Visual Studio 11 Beta를 사용하고 있다면, 다음 링크를 클릭해서 필요한 프로그램들을 설치해야합니다: Web Platform Installer *

또한, 본문에 사용된 C# 코드와 Visual Web Developer 프로젝트를 다운로드 받을 수도 있습니다. C# 버전 코드 다운로드.
* 마이크로소프트의 다른 자습서들과 비교해 볼 때, 본 자습서의 이 도입부는 내용이 다소 부실한 편입니다. 그리고, 2012년 6월 현재 사용 가능한 Microsoft Visual Studio의 최신 무료 버전은 Microsoft Visual Studio Express 2012 RC for Web입니다. 이 점 참고하시기 바랍니다.

본문의 이 도입부는 여러분이 이미 Microsoft Visual Studio 11 Express Beta for Web 또는 Visual Studio 11 Beta를 설치한 상태라고 가정하고 작성된 것입니다. 따라서, 필요한 경우에는 먼저 Microsoft Visual Studio 11 Express Beta for Web부터 설치해야 합니다. 그런 뒤에, 위에서 제공되는 두 링크를 이용해서 추가 구성 요소를 설치해야 합니다. 참고로 위의 두 링크는 모두 같은 제품(Visual Web Developer Express 2010 SP1)을 다운로드하고 설치합니다.

물론, 최신 개발 도구를 이용한 자습서를 제공하는 것이 가장 바람직하겠지만, 본문은 어디까지나 번역에 중점을 두고 있으므로, 도구를 임의로 변경할 경우, 그 파급 효과가 어디까지 미칠지 장담할 수 없어 원문을 최대한 충실하게 옮깁니다.

본 자습서에서 만들어 보게 될 응용 프로그램
지금부터 여러분은 영화 정보를 등록하고, 수정하고, 검색하고, 목록을 조회할 수 있는 데이터베이스 기반의 간단한 영화 목록 응용 프로그램을 만들어보게 될 것입니다. 다음 두 화면은 지금부터 만들어보게 될 응용 프로그램 중 일부 화면의 모습입니다. 먼저, 다음과 같이 데이터베이스에서 가져온 영화 정보의 목록을 제공해주는 페이지가 제공됩니다:

그리고, 특정 영화의 상세 정보를 볼 수 있을 뿐만 아니라, 정보를 등록하고, 수정하고, 삭제할 수 있는 기능들도 제공됩니다. 더불어 데이터베이스에 올바른 정보가 저장될 수 있도록, 모든 데이터 입력 시나리오에서 유효성 검사도 수행할 것입니다.


본 자습서에서 살펴보게 될 기술들
지금부터 여러분이 살펴볼 기술들은 다음과 같습니다:
  • 새로운 ASP.NET MVC 프로젝트를 생성하는 방법.
  • ASP.NET MVC 컨트롤러와 뷰를 생성하는 방법.
  • Entity Framework Code First 패러다임을 통한 새로운 데이터베이스 생성 방법.
  • 데이터를 조회하고 출력하는 방법.
  • 데이터를 수정하는 방법과 데이터에 유효성 검사를 적용하는 방법.

시작하기
먼저, Visual Web Developer 11 Express Beta(이하, Visual Web Developer 또는 VWD로 간략하게 표기합니다)를 실행하고, Start 페이지에서 New Project를 선택합니다.

본 자습서에서 사용하게 될, Visual Web Developer는 통합 개발 환경(IDE, Integrated Development Environment)입니다. 문서를 작성할 때 Microsoft Word를 사용하는 것처럼, 응용 프로그램을 개발할 때는 통합 개발 환경을 사용하는 것이 일반적입니다. Visual Web Developer의 상단을 살펴보면 다양한 옵션들을 제공해주는 툴바가 제공됩니다. 또한, 통합 개발 환경에서 작업들을 수행할 수 있는 또 다른 방법을 제공해주는 메뉴도 존재합니다. (가령, Start 페이지에서 New Project를 선택하는 대신, 메뉴에서 File > New Project를 선택할 수도 있습니다.)


첫 번째 응용 프로그램 생성하기
응용 프로그램을 생성할 때, 프로그래밍 언어로 Visual Basic이나 Visual C#을 선택할 수 있습니다. New Project 대화 상자의 좌측 트리뷰에서 Visual C# 하위의 Web을 선택한 다음, ASP.NET MVC 4 Web Application을 선택합니다. 프로젝트의 이름은 "MvcMovie"로 지정하고 OK를 클릭합니다.


New ASP.NET MVC 4 Project 대화 상자가 나타나면 Internet Application을 선택합니다. 뷰 엔진은 기본 뷰 엔진인 Razor를 그대로 사용합니다.


마지막으로 OK를 클릭합니다. 그러면, Visual Web Developer가 선택된 기본 템플릿을 적용하여 ASP.NET MVC 프로젝트를 생성해주므로, 비록 여러분은 아무런 작업도 하지 않았지만, 지금 바로 실행할 수 있는 응용 프로그램이 만들어지게 됩니다! 만들어진 응용 프로그램은 간단한 "Hello World!" 프로젝트로, 응용 프로그램 구축을 처음 시작해보기에 매우 유용합니다.


응용 프로그램을 실행해보려면 Debug 메뉴에서 Start Debugging을 선택합니다.


키보드 단축키인 F5를 눌러서 디버깅을 시작할 수도 있습니다.

메뉴를 선택하거나 F5를 누르면, Visual Web Developer가 IIS Express를 구동하고 웹 응용 프로그램을 시작합니다. 그런 뒤에, Visual Web Developer가 브라우저를 실행하여 응용 프로그램의 홈 페이지를 엽니다. 이 때, 브라우저의 주소 표시줄에 나타난 URL이 example.com과 같은 형태가 아닌 localhost가 포함되어 있는 형태라는 점에 주의하시기 바랍니다. 그 이유는 방금 생성한 응용 프로그램은 여러분 자신의 로컬 컴퓨터에서 실행되고 있으며, localhost는 언제나 로컬 컴퓨터를 나타내기 때문입니다. 또한, Visual Web Developer는 웹 프로젝트를 실행할 때, 웹 서버에 무작위로 선택된 포트를 사용합니다. 가령, 아래 그림에 나타나 있는 포트 번호는 41788입니다. 그러나, 여러분이 직접 응용 프로그램을 실행시켜보면 아마도 또 다른 포트 번호가 나타날 것입니다.


본 자습서에서 선택한 기본 템플릿은 Home과 Contact, 그리고 About 페이지를 기본으로 제공해줍니다. 또한, 등록 및 로그인 관련 지원과 페이스북과 트위터에 대한 링크도 제공됩니다. 다음 단계는 응용 프로그램이 동작하는 방식을 변경해보고 ASP.NET MVC에 관해서 간략하게 살펴보는 것입니다. 그러면, 이제 브라우저를 닫고, 코드를 약간 변경해보도록 하겠습니다.


컨트롤러 추가하기
MVC는 모델-뷰-컨트롤러(Model-View-Controller)를 의미합니다. MVC는 잘 설계되고, 테스트 가능하며, 관리하기 쉬운 응용 프로그램 개발 패턴입니다. MVC 기반의 응용 프로그램은 다음과 같은 요소들로 구성되어 있습니다:
  • 모델(Models): 응용 프로그램의 데이터를 표현하는 클래스로, 데이터에 대한 업무 규칙들을 강제하기 위해서 유효성 검사 로직이 사용됩니다.
  • 뷰(Views): 동적인 HTML 응답을 만들어내기 위해서 응용 프로그램이 사용하는 템플릿입니다.
  • 컨트롤러(Controllers): 브라우저의 요청을 처리하고, 모델 데이터를 가져온 뒤, 브라우저에 응답으로 반환될 뷰 템플릿을 지정하는 클래스입니다.
본 자습서 모음에서는 이 개념들에 하나씩 모두 살펴보고, 응용 프로그램을 구축하기 위해서 이 개념들을 어떻게 활용해야 하는지도 보여줄 것입니다.

그러면, 먼저 컨트롤러 클래스부터 생성해보도록 하겠습니다. Solution Explorer에서 Controllers 폴더를 마우스 오른쪽 버튼으로 클릭한 다음, Add > Controller를 선택합니다.


컨트롤러의 이름은 "HelloWorldController"로 지정합니다. 템플릿은 기본 템플릿인 Empty controller를 그대로 놔두고 Add를 클릭합니다.


그런 다음, Solution Explorer에서 새로 생성된 HelloWorldController.cs라는 이름의 파일을 확인하시기 바랍니다. 생성된 파일은 자동으로 통합 개발 환경에 열릴 것입니다.


이제 파일의 내용을 다음 코드로 대체하십시요.
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를 눌러서 응용 프로그램을 실행합니다. 그런 다음, 브라우저 주소 표시줄의 URL 끝에 "HelloWorld"라는 문자열을 추가합니다. (예를 들어서, 아래 그림에서는 http://localhost:1234/HelloWorld라고 입력된 것을 볼 수 있습니다.) 그러면, 브라우저에 아래 그림과 비슷한 모습의 페이지 화면이 나타날 것입니다. 예제의 메서드 코드에서는 문자열을 직접 반환하고 있는데, 그 결과 HTML을 직접 반환하도록 시스템에게 지시한 셈이 되고, 실제로도 그렇게 동작한 것입니다!


ASP.NET MVC는 전달된 URL을 기준으로 선택된 컨트롤러 클래스를 (그리고, 그 클래스에 존재하는 선택된 메서드를) 호출합니다. ASP.NET MVC가 사용하는 기본 URL 라우팅 로직은, 실행할 컨트롤러와 메서드를 결정하기 위해서 다음과 같은 형태의 URL을 사용합니다:

/[Controller]/[ActionName]/[Parameters]

이 URL의 첫 번째 부분은 실행할 컨트롤러 클래스를 결정합니다. 따라서, 위의 예제에서 지정했던 /HelloWorld라는 URL은 HelloWorldController 클래스에 맵핑됩니다. 그리고, URL의 두 번째 부분은 실행할 컨트롤러의 액션 메서드를 결정합니다. 그러므로, /HelloWorld/Index라는 URL은 HelloWorldController 클래스의 Index 메서드를 실행하게 됩니다. 그러나, 위의 예제에서 /HelloWorld로만 이동했는데도 Index 메서드가 자동으로 호출되었다는 점에 주목하시기 바랍니다. 그 이유는 명시적으로 메서드를 지정하지 않은 경우, 해당 컨트롤러에 존재하는 Index라는 이름의 메서드가 기본적으로 호출되기 때문입니다.

이번에는 http://localhost:xxxx/HelloWorld/Welcome으로 이동해봅니다. 그러면, Welcome 메서드가 실행되어 "This is the Welcome action method..."라는 문자열이 반환될 것입니다. 바로 기본 MVC 맵핑이 /[Controller]/[ActionName]/[Parameters]기 때문입니다. 즉, 이 URL의 경우 컨트롤러는 HelloWorld고 액션 메서드는 Welcome인 것입니다. 그러나, 아직 URL의 [Parameters] 부분은 사용되지 않고 있습니다.


그러면 이번에는 예제를 조금 더 수정해서, URL을 통해서 컨트롤러로 매개변수 정보를 전달해보겠습니다 (예, /HelloWorld/Welcome?name=Scott&numtimes=4). 다음 코드와 같이 두 개의 매개변수를 전달받도록 Welcome 메서드를 수정합니다. 이 코드에서 C#의 선택적 매개변수 기능을 이용해서, numTimes 매개변수에 아무런 값도 전달되지 않은 경우, 기본값인 1이 전달되도록 지정한 부분을 눈여겨 보시기 바랍니다.

public string Welcome(string name, int numTimes = 1) { 
    return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes); 
}
다시 응용 프로그램을 실행한 다음, 브라우저에서 예제 URL로 이동해봅니다 (http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4). URL에서 name이나 numtimes에 다른 값들을 지정해볼 수도 있습니다. ASP.NET MVC의 모델 바인딩 시스템이 주소 표시줄의 쿼리스트링에 존재하는 명명된 매개변수들을 자동으로 메서드의 매개변수들과 맵핑해줍니다.


이 두 가지 예제에서는 컨트롤러가 MVC 중 "VC"의 역할을, 즉 뷰와 컨트롤러의 역할을 모두 수행하고 있습니다. 컨트롤러에서 HTML을 직접 반환하고 있는 것입니다. 그러나, 일반적인 경우 컨트롤러가 HTML을 직접 반환해서는 안되는데, 그렇게 되면 코드가 매우 길고 지저분해지기 때문입니다. 그대신 HTML 응답을 생성하기 위한 별도의 뷰 템플릿을 사용하는 것이 일반적인 방법입니다. 그러면, 이제 그 방법을 살펴보도록 하겠습니다.


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


authored by

  itist
  2012-06-08(14:23)
캐릭 이미지
감사합니다~~
  mysoftkr
  2012-06-09(13:18)
캐릭 이미지
감사합니다.
  TikTak
  2012-06-11(08:23)
캐릭 이미지
감사합니다.~ 다음번 강좌도 기대됩니다.
  noslady
  2012-06-11(09:44)
캐릭 이미지
감사합니다.!!
  assem
  2012-07-04(18:20)
캐릭 이미지
좋은 정보 감사 드립니다.
  quamdiu
  2013-01-06(10:14)
캐릭 이미지
감사합니다.
  eklim4254
  2013-04-04(17:03)
캐릭 이미지
잘 읽고 갑니다.
  sting73
  2013-05-28(15:12)
캐릭 이미지
좋은 강좌 감사요~~~
  sisyphus2020
  2013-08-02(09:57)
캐릭 이미지
감사 잘 읽었습니다.

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})