이번 강좌는 Jake(류지형)님이 번역해 주신 ASP.NET MVC 5 시리지의 첫 강좌입니다. 제이크님의 코멘트는 다음과 같습니다.

Jake입니다. [Introduction to ASP.NET MVC 5] 11부작을 시작했습니다. Bootstrap 3 적용된 것도 좋고 Route Attribute 도 정말 긴요하고, MVC 가 여러모로 편리한데 많이 쓰였으면 좋겠네요~ 원문 강좌는 다음과 같습니다.

http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started

이 자습서에서는 Visual Studio 2013을 이용해서 ASP.NET MVC 5 웹 어플리케이션을 작성하는 기초에 대해 알아봅니다. 이 주제에 사용되는 Visual Web Developer 프로젝트 C# 소스코드가 제공됩니다. 여기를 클릭하여 C# 버전을 다운로드하세요. 샘플 코드를 빌드하고 데이터베이스를 생성하는 방법은 이 글 하단에 부록으로 첨부되어 있습니다. 이 자습서에서는 어플리케이션을 비주얼 스튜디오에서 실행합니다만, 호스팅 서버에 배포해서 온라인에서도 실행할 수 있습니다. 마이크로소프트는 무료 시험판 윈도우 애저 계정을 통해 10개의 웹 사이트까지 무료 호스팅을 제공합니다. 이 자습서는 scott guthrie (twitter @scottguM ), scott hanselman (twitter @shanselman ), rick anderson ( @rickandmsft)에 의해 작성되었습니다.

시작하기

Visual Studio Express 2013 for Web 또는 Visual Studio 2013 을 설치하면서 시작합니다.

비주얼 스튜디오는 통합된 개발환경(IDE; Integrated Development Environment)입니다. MS 워드를 사용해 문서를 작성하듯이 IDE를 통해 어플리케이션을 생성합니다. 비주얼 스튜디오에는 상단에 다양한 옵션을 보여주는 툴바가 있습니다. 메뉴를 통해서도 작업을 수행하는데, 예를 들면, Start Page에서 New Project를 선택하는 대신 File > New Project 메뉴를 선택해도 됩니다.

그림 출처 - http://i1.asp.net/media/4409736/1.PNG?cdn_id=2013-11-14-001

첫 어플리케이션 생성하기

New Project를 클릭합니다. 왼쪽 패널에서 Visual C#, Web 을 차례대로 선택하고 ASP.NET Web Application 템플릿을 선택합니다. 하단에 어플리케이션 명을 “MvcMovie” 라고 입력하고 OK를 클릭합니다.

그림 출처 - http://i3.asp.net/media/46632/NewProj.PNG?cdn_id=2013-11-14-001

이어지는 New ASP.NET Project 대화상자에서 MVC를 선택하고 OK를 클릭합니다.

그림 출처 - http://i2.asp.net/media/4409754/2.PNG?cdn_id=2013-11-14-001

방금 만든 ASP.NET MVC 프로젝트는 비주얼 스튜디오가 기본 템플릿을 사용해서 생성했는데, 이 결과물은 별도의 추가작업 없이 바로 동작하는 하나의 어플리케이션입니다. 다시 말해, 이것은 하나의 단순한 “Hello World!” 프로젝트이고 여러분의 어플리케이션을 작성하기에 좋은 시작점입니다.

그림 출처 - http://i2.asp.net/media/4409748/3.PNG?cdn_id=2013-11-14-001

디버깅을 시작하기 위해 F5 키를 클릭합니다. F5는 비주얼 스튜디오로 하여금 IIS Express를 시작하고 웹 앱을 구동하게 합니다. 그리고, 브라우저를 띄워서 어플리케이션의 홈 페이지를 엽니다. 주소창의 주소는 example.com 같은 일반적인 형태가 아니라 localhost:port# 의 형태로 포트를 포함하고 있습니다. 주소로서 localhost는 항상 여러분의 로컬 컴퓨터를 가리킵니다. 지금 예제의 상황에서 로컬 컴퓨터는 방금 빌드한 어플리케이션을 구동하는 컴퓨터입니다. 비주얼 스튜디오가 웹 프로젝트를 실행할 때는 웹서버의 임의 포트를 사용합니다. 아래 그림에서의 포트는 1234 이지만 여러분이 어플리케이션을 실행할 때는 다른 포트를 보게 될겁니다.

그림 출처 - http://i2.asp.net/media/4409742/4.PNG?cdn_id=2013-11-14-001

이 기본 템플릿은 Home, Contract, About 페이지를 기본적으로 제공합니다. 위의 그림은 Home, Contract, About 페이지에 대한 링크를 보여주지 않고 있습니다. 브라우저 창의 크기가 예제 그림과 같이 작기 때문인데, 사용자는 링크를 보기위해 네비게이션 아이콘을 클릭해야 합니다. (주석: 큰 브라우저에서는 네비게이션이 보이며 이렇게 환경에 따라 다르게 반응하는 웹을 Responsive Web 이라 합니다.)

그림 출처 - http://i2.asp.net/media/4322022/nav.PNG?cdn_id=2013-11-14-001

그림 출처 - http://i2.asp.net/media/4322028/n2.PNG?cdn_id=2013-11-14-001

어플리케이션은 또한 회원가입과 로그인을 지원합니다. 다음 단계는 이 어플리케이션이 동작하는 방식을 수정하면서 ASP.NET MVC에 대해 조금씩 알아보겠습니다. 자~ 이제, ASP.NET MVC 어플리케이션을 닫고 코드를 좀 수정해 봅시다!

- 다음 강좌에서 이어집니다 -

부록 ? 샘플코드 빌드 및 데이터베이스 생성하기

역주 : 강좌 시작 부분에 언급했듯이 [샘플 코드를 빌드하고 데이터베이스를 생성하는 방법] 부분을 번역하여 이번 강좌에 추가했습니다. 다른 예제에 기반해 작성된 것을 일부 수정하여 이 예제에 맞추어 작성했지만 일부 설명이 맞지 않거나 그림의 예시가 조금 다른 곳이 있습니다. 이것을 감안하시고 개념을 따라 구성하시기 바랍니다. 원문은 다음과 같습니다.

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/building-the-ef5-mvc4-chapter-downloads

1. mvcmoviertm.zip 파일을 다운로드 합니다.
2. Zip 파일의 속성에서 Unblock 버튼을 클릭합니다.
   
   그림 출처 - http://i2.asp.net/media/4356708/unblock.PNG?cdn_id=2013-11-14-001
3. 압축 파일을 풉니다
4. MvcMovieRTM.sln 파일을 더블 클릭하여 비주얼 스튜디오를 엽니다.
5. Tools 메뉴에서 Library Package Manager를 클릭하고 Package Manager Console을 엽니다.
   
   그림 출처 - http://i2.asp.net/media/4356702/PMC.png?cdn_id=2013-11-14-001
6. Package Manager Console (PMC) 에서 Restore를 클릭합니다. (제 경우에는 보이지 않았습니다. 패키지에 구성된 외부 소스들이 발견되지 않을 때 나타나는 것으로 생각합니다.)
   
   그림 출처 - http://i2.asp.net/media/4356696/PMC2.PNG?cdn_id=2013-11-14-001
7. Restore 과정을 거쳤다면 비주얼 스튜디오를 닫습니다.
8. 4번 과정과 동일하게 방금 닫은 솔루션 파일을 선택하여 비주얼 스튜디오를 재시작합니다.
9. Package Manager Console (PMC) 에서 Update-Database 명령어를 입력합니다
   
   그림 출처 - http://i3.asp.net/media/4356690/upDb.PNG?cdn_id=2013-11-14-001