ASP.NET MVC 4의 새로운 기능

아티클
11/21/2024

웹 캠프 팀별

ASP.NET MVC 4는 잘 설정된 디자인 패턴과 ASP.NET 및 .NET 프레임워크의 기능을 사용하여 확장 가능한 표준 기반 웹 애플리케이션을 빌드하기 위한 프레임워크입니다. 이 새로운 네 번째 버전의 프레임워크는 모바일 웹 애플리케이션 개발을 더 쉽게 만드는 데 중점을 둡니다.

먼저 새 ASP.NET MVC 4 프로젝트를 만들 때 모바일 디바이스용 독립 실행형 앱을 빌드하는 데 사용할 수 있는 모바일 애플리케이션 프로젝트 템플릿이 있습니다. 또한 ASP.NET MVC 4는 jQuery.Mobile.MVC NuGet 패키지를 통해 jQuery Mobile과 통합됩니다. jQuery Mobile은 Windows Phone, iPhone, Android 등 인기 있는 모든 모바일 디바이스 플랫폼과 호환되는 웹앱을 개발하기 위한 HTML5 기반 프레임워크입니다. 그러나 특수화가 필요한 경우 MVC 4를 ASP.NET 다양한 디바이스에 대해 다양한 보기를 제공하고 디바이스별 최적화를 제공할 수 있습니다.

이 실습 랩에서는 ASP.NET MVC 4 "인터넷 애플리케이션" 프로젝트 템플릿으로 시작하여 사진 갤러리 애플리케이션을 만듭니다. jQuery Mobile 및 ASP.NET MVC 4의 새로운 기능을 사용하여 앱을 점진적으로 개선하여 다양한 모바일 디바이스 및 데스크톱 웹 브라우저와 호환되도록 할 것입니다. 또한 코드 생성을 위한 새로운 코드 레시피와 MVC 4를 ASP.NET 작업 ActionResult> 반환 형식을 지원하여 비동기 작업 메서드를 쉽게 작성할 수 있는<방법에 대해서도 알아봅니다.

참고 항목

모든 샘플 코드 및 코드 조각은 Microsoft-Web/WebCampTrainingKit 릴리스에서 사용할 수 있는 웹 캠프 교육 키트에 포함되어 있습니다. 이 랩과 관련된 프로젝트는 ASP.NET 4.5의 Web Forms의 새로운 기능에서 사용할 수 있습니다.

목표

이 실습 랩에서는 다음 방법을 알아봅니다.

새 모바일 애플리케이션 프로젝트 템플릿을 포함하여 ASP.NET MVC 프로젝트 템플릿의 향상된 기능을 활용합니다.
HTML5 뷰포트 특성 및 CSS 미디어 쿼리를 사용하여 모바일 디바이스의 디스플레이 개선
점진적 향상을 위해 jQuery Mobile을 사용하고 터치 최적화 웹 UI를 빌드합니다.
모바일 관련 보기 만들기
뷰 전환기 구성 요소를 사용하여 애플리케이션에서 모바일 및 데스크톱 보기 간 전환
작업 지원을 사용하여 비동기 컨트롤러 만들기

필수 조건

이 랩을 완료하려면 다음 항목이 있어야 합니다.

Microsoft Visual Studio Express 2012 for Web 또는 Superior(부록 B를 설치하는 방법에 대한 지침 참조).
ASP.NET MVC 4 (Microsoft Visual Studio 2012 설치에 포함)
Windows Phone 에뮬레이터(Windows Phone 7.1.1 SDK에 포함됨)
선택 사항 - 일렉트릭 플럼 iPhone 시뮬레이터 확장이 있는 WebMatrix 2(iPhone 시뮬레이터를 사용하여 웹 애플리케이션을 찾아보는 데 사용되는 연습 3에만 해당)

설정

랩 문서 전체에서 코드 블록을 삽입하라는 지시가 표시됩니다. 편의상 대부분의 코드는 Visual Studio Code 코드 조각으로 제공되며, Visual Studio 내에서 수동으로 추가할 필요가 없도록 사용할 수 있습니다.

코드 조각을 설치하려면 다음을 수행합니다.

Windows 탐색기 창을 열고 랩의 Source\Setup 폴더로 이동합니다.
이 폴더의 Setup.cmd 파일을 두 번 클릭하여 Visual Studio 코드 조각을 설치합니다.

Visual Studio Code 코드 조각에 익숙하지 않고 사용하는 방법을 알아보려면 이 문서의 부록 "부록 A: 코드 조각 사용"을 참조할 수 있습니다.

연습

이 실습 랩에는 다음 연습이 포함됩니다.

새 ASP.NET MVC 4 프로젝트 템플릿
사진 갤러리 웹 애플리케이션 만들기
모바일 디바이스에 대한 지원 추가
비동기 컨트롤러 사용

참고 항목

각 연습에는 연습을 완료한 후 가져와야 하는 결과 솔루션이 포함된 End 폴더가 함께 제공됩니다. 연습을 진행하는 데 추가적인 도움이 필요한 경우 이 솔루션을 가이드로 사용할 수 있습니다.

이 랩을 완료하는 예상 시간: 60분.

연습 1: 새 ASP.NET MVC 4 프로젝트 템플릿

이 연습에서는 ASP.NET MVC 4 프로젝트 템플릿의 향상된 기능을 살펴봅니다. MVC 3에 이미 있는 인터넷 애플리케이션 템플릿 외에도 이 버전에는 모바일 애플리케이션에 대한 별도의 템플릿이 포함되어 있습니다. 먼저 각 템플릿의 몇 가지 관련 기능을 살펴보겠습니다. 그런 다음 올바른 방법을 사용하여 다른 플랫폼에서 페이지를 제대로 렌더링하는 작업을 수행합니다.

작업 1 - 인터넷 애플리케이션 템플릿 탐색

Visual Studio를 엽니다.
파일 선택 | 새로 만들기 | 프로젝트 메뉴 명령입니다. 새 프로젝트 대화 상자에서 Visual C# | 선택 왼쪽 창 트리의 웹 템플릿을 선택하고 ASP.NET MVC 4 웹 애플리케이션을 선택합니다. 프로젝트 이름을 PhotoGallery로 지정하고 위치를 선택하거나 기본값을 그대로 두고 확인을 클릭합니다.

참고 항목

나중에 지금 만들고 있는 MVC 4 솔루션을 ASP.NET PhotoGallery를 사용자 지정합니다.

새 프로젝트 만들기
새 ASP.NET MVC 4 프로젝트 대화 상자에서 인터넷 애플리케이션 프로젝트 템플릿을 선택하고 확인을 클릭합니다. 보기 엔진으로 Razor를 선택했는지 확인합니다.

새 ASP.NET MVC 4 인터넷 애플리케이션 만들기

참고 항목

Razor 구문은 ASP.NET MVC 3에 도입되었습니다. 목표는 파일에 필요한 문자 및 키 입력 수를 최소화하여 빠르고 유동적인 코딩 워크플로를 가능하게 하는 것입니다. Razor는 기존 C# /VB(또는 기타) 언어 기술을 활용하고 멋진 HTML 생성 워크플로를 가능하게 하는 템플릿 태그 구문을 제공합니다.
F5 키를 눌러 솔루션을 실행하고 갱신된 템플릿을 확인합니다. 다음 기능을 확인할 수 있습니다.

최신 스타일 템플릿

템플릿이 갱신되어 보다 현대적인 스타일을 제공합니다.

ASP.NET MVC 4 서식 파일

새 연락처 페이지

적응형 렌더링

브라우저 창 크기 조정을 확인하고 페이지 레이아웃이 새 창 크기에 동적으로 조정되는 방식을 확인합니다. 이러한 템플릿은 적응 렌더링 기술을 사용하여 사용자 지정 없이 데스크톱 및 모바일 플랫폼 모두에서 제대로 렌더링합니다.

다양한 브라우저 크기로 MVC 4 프로젝트 템플릿 ASP.NET

JavaScript를 사용하여 보다 풍부한 UI

기본 프로젝트 템플릿의 또 다른 향상된 기능은 JavaScript를 사용하여 보다 대화형 JavaScript를 제공하는 것입니다. 템플릿에 사용되는 로그인 및 등록 링크는 jQuery 유효성 검사를 사용하여 클라이언트 쪽에서 입력 필드의 유효성을 검사하는 방법을 예로 들 수 있습니다.

jQuery 유효성 검사

참고 항목

두 개의 로그인 섹션을 확인합니다. 첫 번째 섹션에서는 사이트에서 등록된 계정을 사용하여 로그인할 수 있고 두 번째 섹션에서는 Google과 같은 다른 인증 서비스를 사용하여 로그인할 수 있습니다(기본적으로 사용하지 않음).
브라우저를 닫아 디버거를 중지하고 Visual Studio로 돌아갑니다.
App_Start 폴더 아래에 있는 파일 AuthConfig.cs 엽니다.

OAuth 인증을 위해 Google 클라이언트를 등록하려면 마지막 줄에서 주석을 제거합니다.

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

참고 항목

Facebook, Twitter, Microsoft 등과 같은 OpenID 또는 OAuth 서비스를 사용하여 인증을 쉽게 사용하도록 설정할 수 있습니다.

F5 키를 눌러 솔루션을 실행하고 로그인 페이지로 이동합니다.
로그인할 Google 서비스를 선택합니다.

로그인 서비스 선택
Google 계정을 사용하여 로그인합니다.
사이트(localhost)가 Google 계정에서 정보를 검색하도록 허용합니다.
마지막으로 Google 계정을 연결하려면 사이트에 등록해야 합니다.

Google 계정 연결

Google 계정 연결 13. 브라우저를 닫아 디버거를 중지하고 Visual Studio로 돌아갑니다. 14. 이제 솔루션을 탐색하여 프로젝트 템플릿에서 MVC 4를 ASP.NET 도입된 다른 새로운 기능을 확인합니다.

ASP.NET MVC 4 인터넷 애플리케이션 프로젝트 템플릿

ASP.NET MVC 4 인터넷 애플리케이션 프로젝트 템플릿

HTML 5 태그

템플릿 보기를 찾아 새 테마 태그를 찾습니다.

Razor 및 HTML5 태그를 사용하는 새 템플릿(About.cshtml).
업데이트된 JavaScript 라이브러리

이제 ASP.NET MVC 4 기본 템플릿에는 JavaScript 및 HTML을 사용하여 풍부하고 응답성이 뛰어난 웹 애플리케이션을 만들 수 있는 JavaScript MVVM 프레임워크인 KnockoutJS가 포함되어 있습니다. MVC3과 마찬가지로 jQuery 및 jQuery UI 라이브러리도 ASP.NET MVC 4에 포함됩니다.

참고 항목

KnockOutJS 라이브러리에 대한 자세한 내용은 [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/)링크에서 확인할 수 있습니다. 또한 [http://docs.jquery.com/](http://docs.jquery.com/)에서 jQuery 및 jQuery UI에 대해 알아볼 수 있습니다.

작업 2 - 모바일 애플리케이션 템플릿 탐색

ASP.NET MVC 4는 모바일 및 태블릿 브라우저용 웹 사이트 개발을 용이하게 합니다. 이 템플릿은 인터넷 애플리케이션 템플릿과 동일한 애플리케이션 구조를 가지고 있지만(컨트롤러 코드는 실질적으로 동일함), 터치 기반 모바일 디바이스에서 제대로 렌더링되도록 스타일이 수정되었습니다.

파일 선택 | 새로 만들기 | 프로젝트 메뉴 명령입니다. 새 프로젝트 대화 상자에서 Visual C# | 선택 왼쪽 창 트리의 웹 템플릿을 선택하고 ASP.NET MVC 4 웹 애플리케이션을 선택합니다. 프로젝트 이름을 PhotoGallery.Mobile로 지정하고 위치를 선택하거나 기본값을 그대로 두고 "솔루션에 추가"를 선택하고 확인을 클릭합니다.
새 ASP.NET MVC 4 프로젝트 대화 상자에서 모바일 애플리케이션 프로젝트 템플릿을 선택하고 확인을 클릭합니다. 보기 엔진으로 Razor를 선택했는지 확인합니다.

새 ASP.NET MVC 4 모바일 애플리케이션 만들기
이제 솔루션을 탐색하고 모바일용 ASP.NET MVC 4 솔루션 템플릿에서 도입한 새로운 기능 중 일부를 확인할 수 있습니다.
- jQuery 모바일 라이브러리
  
  모바일 애플리케이션 프로젝트 템플릿에는 모바일 브라우저 호환성을 위한 오픈 소스 라이브러리인 jQuery Mobile 라이브러리가 포함되어 있습니다. jQuery Mobile은 CSS 및 JavaScript를 지원하는 모바일 브라우저에 점진적인 향상된 기능을 적용합니다. 점진적 향상 기능을 사용하면 모든 브라우저에서 웹 페이지의 기본 콘텐츠를 표시할 수 있지만 가장 강력한 브라우저에서만 서식 있는 콘텐츠를 표시할 수 있습니다. jQuery Mobile 스타일에 포함된 JavaScript 및 CSS 파일은 모바일 브라우저가 페이지 태그를 변경하지 않고도 화면의 콘텐츠에 맞도록 도와줍니다.
  
  템플릿에 포함된 jQuery 모바일 라이브러리
- HTML5 기반 태그
  
  HTML5 태그를 사용하는 모바일 애플리케이션 템플릿(Login.cshtml 및 index.cshtml)
F5 키를 눌러 솔루션을 실행합니다.
Windows Phone 7 에뮬레이터를 엽니다.
휴대폰 시작 화면에서 Internet Explorer를 엽니다. 데스크톱 애플리케이션이 시작된 URL을 확인하고 휴대폰에서 해당 URL로 이동합니다(예: http://localhost:[PortNumber]/).
이제 로그인 페이지를 입력하거나 정보 페이지를 체크 아웃할 수 있습니다. 웹 사이트의 스타일은 모바일용 새로운 메트로 앱을 기반으로 합니다. ASP.NET MVC 4 프로젝트 템플릿이 모바일 디바이스에 올바르게 표시되어 페이지의 모든 요소가 표시되고 사용하도록 설정되어 있는지 확인합니다. 머리글의 링크는 클릭하거나 탭할 수 있을 만큼 충분히 큽 수 있습니다.

모바일 디바이스의 프로젝트 템플릿 페이지
새 템플릿은 뷰포트 메타 태그도 사용합니다. 대부분의 모바일 브라우저는 가상 브라우저 창 또는 모바일 디바이스의 실제 너비보다 큰 "뷰포트"의 너비를 정의합니다. 이렇게 하면 모바일 브라우저가 가상 디스플레이 내에 전체 웹 페이지를 표시할 수 있습니다. Viewport 메타 태그를 사용하면 웹 개발자가 모바일 디바이스에서 브라우저 영역의 너비, 높이 및 크기를 설정할 수 있습니다. 모바일 애플리케이션용 ASP.NET MVC 4 템플릿은 레이아웃 템플릿(Views\Shared_Layout.cshtml)에서 뷰포트를 디바이스 너비("width=device-width")로 설정하므로 모든 페이지에 해당 뷰포트가 디바이스 화면 너비로 설정됩니다. Viewport 메타 태그는 기본 브라우저 보기를 변경하지 않습니다.
뷰 | 에 있는 _Layout.cshtml 열기 공유 폴더 및 Viewport 메타 태그를 주석으로 처리합니다. 아직 열리지 않은 경우 애플리케이션을 실행하고 차이점을 확인합니다.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

뷰포트 메타 태그를 주석 처리한 후의 사이트

뷰포트 메타 태그 10을 주석으로 처리한 후의 사이트입니다. Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다. 11. 뷰포트 메타 태그의 주석 처리를 제거합니다.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

작업 3 - 적응형 렌더링 사용

이 작업에서는 사용자 지정 없이 동시에 모바일 디바이스 및 웹 브라우저에서 웹 페이지를 올바르게 렌더링하는 다른 방법을 알아봅니다. 이미 비슷한 용도로 Viewport 메타 태그를 사용했습니다. 이제 또 다른 강력한 방법인 적응형 렌더링을 충족합니다.

적응형 렌더링은 CSS3 미디어 쿼리를 사용하여 페이지에 적용된 스타일을 사용자 지정하는 기술입니다. 미디어 쿼리는 스타일시트 내의 조건을 정의하여 특정 조건에서 CSS 스타일을 그룹화합니다. 조건이 true인 경우에만 스타일이 선언된 개체에 적용됩니다.

적응형 렌더링 기술에서 제공하는 유연성을 통해 다양한 디바이스에 사이트를 표시하기 위한 모든 사용자 지정이 가능합니다. 스타일을 선택하는 논리 코드를 작성하지 않고 단일 스타일시트에서 원하는 만큼 스타일을 정의할 수 있습니다. 따라서 렌더링을 위해 중복된 코드와 논리의 양을 줄이므로 페이지 스타일을 매우 깔끔하게 조정하는 방법입니다. 반면, CSS 파일의 크기가 약간 증가할 수 있으므로 대역폭 사용량이 증가합니다.

적응 렌더링 기술을 사용하면 브라우저에 관계없이 사이트가 제대로 표시됩니다. 그러나 대역폭 추가 로드가 중요한지 고려해야 합니다.

참고 항목

미디어 쿼리의 기본 형식은 @media [범위: 모든 | 핸드헬드 | 인쇄 | 프로젝션 | 화면]([property:value] 및 ... [property:value])

미디어 쿼리의 예: >@media 모두 및(최대 너비: 1000px) 및(최소 너비: 700px) {}: 700px에서 1000px 사이의 모든 해상도에 대해

@media 화면 및(최소 너비: 400px) 및 (최대 너비: 700px) { ... }: 화면에만 해당합니다. 해상도는 400~700px 사이여야 합니다.

@media 핸드헬드 및(최소 너비: 20em), 화면 및(최소 너비: 20em) { ... }: 핸드헬드(모바일 및 장치) 및 화면의 경우. 최소 너비는 20em보다 커야 합니다.

이에 대한 자세한 내용은 W3C 사이트에서 확인할 수 있습니다.

이제 적응형 렌더링의 작동 방식을 살펴보고 ASP.NET MVC 4 기본 웹 사이트 템플릿의 가독성을 향상합니다.

작업 1에서 만든 PhotoGallery.sln 솔루션을 열고 PhotoGallery 프로젝트를 선택합니다. F5 키를 눌러 솔루션을 실행합니다.
브라우저 너비의 크기를 조정하여 창을 원래 크기의 절반 또는 1/4 미만으로 설정합니다. 머리글의 항목이 어떻게 되는지 확인합니다. 일부 요소는 머리글의 표시 영역에 표시되지 않습니다.
콘텐츠 프로젝트 폴더에 있는 Visual Studio 솔루션 탐색기에서 Site.css 파일을 엽니다. Ctrl+F를 눌러 Visual Studio 통합 검색을 열고 CSS 미디어 쿼리를 찾기 위해 씁니다@media.

이 템플릿에 정의된 미디어 쿼리 조건은 다음과 같이 작동합니다. 브라우저의 창 크기가 850px 미만이면 적용된 CSS 규칙은 이 미디어 블록 내에 정의된 규칙입니다.

미디어 쿼리 찾기
적응형 렌더링을 사용하지 않도록 설정하려면 850px로 설정된 최대 너비 특성 값을 10px로 바꾸고 Ctrl + S를 눌러 변경 내용을 저장합니다. 브라우저로 돌아가 Ctrl+F5를 눌러 변경한 내용으로 페이지를 새로 고칩니다. 창의 너비를 조정할 때 두 페이지의 차이점을 확인합니다.

왼쪽과 오른쪽의 스타일을 @media 스타일은 생략됩니다." title="왼쪽에서는 페이지가 @media 스타일을 적용하고, 오른쪽에는 스타일이 생략됩니다." />

왼쪽에서 페이지가 스타일을 적용하고 @media , 오른쪽에는 스타일이 생략됩니다.

이제 모바일 디바이스에서 발생하는 작업을 확인해 보겠습니다.

@media 스타일, 오른쪽에서 스타일은 생략" title="왼쪽에서 페이지는 @media 스타일을 적용하고, 오른쪽에는 스타일이 생략됩니다." />

왼쪽에서 페이지가 스타일을 적용하고 @media , 오른쪽에는 스타일이 생략됩니다.

페이지가 웹 브라우저에서 렌더링될 때 변경 내용이 크게 중요하지는 않지만 모바일 디바이스를 사용하는 경우 차이점이 더 분명해집니다. 이미지의 왼쪽에서 사용자 지정 스타일이 가독성을 향상했음을 알 수 있습니다.

적응형 렌더링은 더 많은 시나리오에서 사용할 수 있으므로 조건부 스타일을 웹 사이트에 쉽게 적용하고 깔끔한 접근 방식으로 일반적인 스타일 문제를 해결할 수 있습니다.

Viewport 메타 태그 및 CSS 미디어 쿼리는 ASP.NET MVC 4와 관련이 없으므로 모든 웹 애플리케이션에서 이러한 기능을 활용할 수 있습니다.
Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다.

연습 2: 사진 갤러리 웹 애플리케이션 만들기

이 연습에서는 사진 갤러리 애플리케이션에서 사진을 표시합니다. ASP.NET MVC 4 프로젝트 템플릿으로 시작한 다음 서비스에서 사진을 검색하고 홈페이지에 표시하는 기능을 추가합니다.

다음 연습에서는 이 솔루션을 업데이트하여 모바일 디바이스에 표시되는 방식을 향상시킵니다.

작업 1 - 모의 사진 서비스 만들기

이 작업에서는 사진 서비스의 모의 항목을 만들어 갤러리에 표시할 콘텐츠를 검색합니다. 이렇게 하려면 각 사진의 데이터가 포함된 JSON 파일을 반환하는 새 컨트롤러를 추가합니다.

아직 열려 있지 않은 경우 Visual Studio를 엽니다.
파일 선택 | 새로 만들기 | 프로젝트 메뉴 명령입니다. 새 프로젝트 대화 상자에서 Visual C# | 선택 왼쪽 창 트리의 웹 템플릿을 선택하고 ASP.NET MVC 4 웹 애플리케이션을 선택합니다. 프로젝트 이름을 PhotoGallery로 지정하고 위치를 선택하거나 기본값을 그대로 두고 확인을 클릭합니다. 또는 연습 1에서 기존 ASP.NET MVC 4 인터넷 애플리케이션 솔루션에서 작업을 계속하고 다음 단계를 건너뛸 수 있습니다.
새 ASP.NET MVC 4 프로젝트 대화 상자에서 인터넷 애플리케이션 프로젝트 템플릿을 선택하고 확인을 클릭합니다. Razor가 뷰 엔진으로 선택되어 있는지 확인합니다.
솔루션 탐색기 프로젝트의 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 | 추가를 선택합니다. 기존 항목입니다. 이 랩의 Source\Assets\App_Data 폴더로 이동하여 Photos.json 파일을 추가합니다.
PhotoController라는 이름으로 새 컨트롤러를 만듭니다. 이렇게 하려면 Controllers 폴더를 마우스 오른쪽 단추로 클릭하고 추가로 이동하여 컨트롤러를 선택합니다. 컨트롤러 이름을 완료하고 빈 MVC 컨트롤러 템플릿을 그대로 두고 추가를 클릭합니다.

PhotoController 추가
Index 메서드를 다음 갤러리 작업으로 바꾸고 최근에 프로젝트에 추가한 JSON 파일의 콘텐츠를 반환합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex02 - 갤러리 작업)
```
public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}
```
F5 키를 눌러 솔루션을 실행한 다음 모의 사진 서비스를 http://localhost:[port]/photo/gallery 테스트하기 위해 다음 URL로 이동합니다( [포트] 값은 애플리케이션이 시작된 현재 포트에 따라 다름). 이 URL에 대한 요청은 Photos.json 파일의 콘텐츠를 검색해야 합니다.

모의 사진 서비스 테스트

실제 구현에서는 ASP.NET Web API를 사용하여 사진 갤러리 서비스를 구현할 수 있습니다. ASP.NET Web API는 브라우저 및 모바일 디바이스를 비롯한 광범위한 클라이언트에 연결하는 HTTP 서비스를 쉽게 빌드할 수 있게 해주는 프레임워크입니다. ASP.NET Web API는 .NET Framework에서 RESTful 애플리케이션을 빌드하는 데 이상적인 플랫폼입니다.

작업 2 - 사진 갤러리 표시

이 작업에서는 이 연습의 첫 번째 작업에서 만든 모의 서비스를 사용하여 사진 갤러리를 표시하도록 홈 페이지를 업데이트합니다. 모델 파일을 추가하고 갤러리 보기를 업데이트합니다.

Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다.
Models 폴더에 Photo 클래스를 만듭니다. 이렇게 하려면 Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택하고 클래스를 클릭합니다. 그런 다음 이름을 Photo.cs 설정하고 추가를 클릭합니다.

Photo 클래스에 다음 멤버를 추가합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex02 - 사진 모델)

public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

컨트롤러 폴더에서 HomeController.cs 파일을 엽니다.
구문을 사용하여 다음을 추가합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex02 - HomeController 사용)
```
using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;
```

HttpClient를 사용하여 갤러리 데이터를 검색하도록 인덱스 작업을 업데이트한 다음 JavaScriptSerializer를 사용하여 뷰 모델로 역직렬화합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex02 - 인덱스 작업)

public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

Views\Home 폴더 아래에 있는 Index.cshtml 파일을 열고 모든 콘텐츠를 다음 코드로 바꿉니다.

이 코드는 서비스에서 검색된 모든 사진을 반복하여 순서가 지정되지 않은 목록에 표시합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex02 - 사진 목록)

@model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

솔루션 탐색기 프로젝트의 콘텐츠 폴더를 마우스 오른쪽 단추로 클릭하고 |추가를 선택합니다. 기존 항목입니다. 이 랩의 Source\Assets\Content 폴더로 이동하여 Site.css 파일을 추가합니다. 교체를 확인해야 합니다. Site.css 파일이 열려 있는 경우 파일을 다시 로드해야 합니다.
파일 탐색기 열고 이 랩의 Source\Assets 폴더 아래에 있는 전체 Photos 폴더를 솔루션 탐색기 프로젝트의 루트 폴더에 복사합니다.
애플리케이션을 실행합니다. 이제 갤러리의 사진을 표시하는 홈페이지가 표시됩니다.

사진 갤러리
Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다.

연습 3: 모바일 디바이스에 대한 지원 추가

ASP.NET MVC 4의 주요 업데이트 중 하나는 모바일 개발을 지원하는 것입니다. 이 연습에서는 이전 연습에서 만든 PhotoGallery 솔루션을 확장하여 모바일 애플리케이션에 대한 ASP.NET MVC 4 새로운 기능을 살펴봅니다.

작업 1 - ASP.NET MVC 4 애플리케이션에 jQuery Mobile 설치

Source/Ex3-MobileSupport/Begin/폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 끝 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
도구>NuGet 패키지 관리자패키지 관리자 콘솔 메뉴 옵션을 클릭하여 패키지 관리자> 콘솔을 엽니다.

NuGet 패키지 관리자 콘솔 열기
패키지 관리자 콘솔에서 다음 명령을 실행하여 jQuery.Mobile.MVC 패키지를 설치합니다.

jQuery Mobile은 터치 최적화 웹 UI를 빌드하기 위한 오픈 소스 라이브러리입니다. jQuery.Mobile.MVC NuGet 패키지에는 ASP.NET MVC 4 애플리케이션에서 jQuery Mobile을 사용하는 도우미가 포함되어 있습니다.

참고 항목

다음 명령을 실행하면 Nuget에서 jQuery.Mobile.MVC 라이브러리를 다운로드합니다.

PM
```
Install-Package jQuery.Mobile.MVC
```
이 명령은 다음을 포함하여 jQuery Mobile 및 일부 도우미 파일을 설치합니다.
- Views/Shared/_Layout.Mobile.cshtml: 더 작은 화면에 최적화된 jQuery Mobile 기반 레이아웃입니다. 웹 사이트가 모바일 브라우저에서 요청을 받으면 원래 레이아웃(_Layout.cshtml)을 이 레이아웃으로 바꿉니다.
- 뷰 전환기 구성 요소: Views/Shared/_ViewSwitcher.cshtml 부분 보기 및 ViewSwitcherController.cs 컨트롤러로 구성됩니다. 이 구성 요소는 사용자가 페이지의 데스크톱 버전으로 전환할 수 있도록 모바일 브라우저에 링크를 표시합니다.
  
  모바일 지원이 있는 사진 갤러리 프로젝트

모바일 번들을 등록합니다. 이렇게 하려면 Global.asax.cs 파일을 열고 다음 줄을 추가합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex03 - 모바일 번들 등록)

protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

데스크톱 웹 브라우저를 사용하여 애플리케이션을 실행합니다.
시작 메뉴에 있는 Windows Phone 7 에뮬레이터 열기 | 모든 프로그램 | Windows Phone SDK 7.1 | Windows Phone 에뮬레이터.
휴대폰 시작 화면에서 Internet Explorer를 엽니다. 애플리케이션이 시작된 URL을 확인하고 전화 브라우저(예: http://localhost:[PortNumber]/)를 사용하여 해당 URL로 이동합니다.

jQuery.Mobile.MVC가 프로젝트에 모바일 디바이스에 최적화된 보기를 표시하는 새 자산을 만들었으므로 애플리케이션이 Windows Phone 에뮬레이터에서 다르게 표시됩니다.

바탕 화면 보기로 전환되는 링크를 보여 주는 휴대폰 맨 위에 있는 메시지를 확인합니다. 또한 설치한 패키지에서 만든 _Layout.Mobile.cshtml 레이아웃은 애플리케이션에 다른 레이아웃을 포함합니다.

참고 항목

지금까지 모바일 보기로 돌아갈 수 있는 링크는 없습니다. 이후 버전에 포함됩니다.

사진 갤러리 홈페이지의 모바일 보기
Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다.

작업 2 - 모바일 보기 만들기

이 작업에서는 모바일 디바이스에서 더 나은 모양을 위해 조정된 콘텐츠를 사용하여 인덱스 보기의 모바일 버전을 만듭니다.

Views\Home\Index.cshtml 뷰를 복사하고 붙여넣어 복사본을 만들고 새 파일의 이름을 Index.Mobile.cshtml로 바꿉니다.
새로 만든 Index.Mobile.cshtml 뷰를 열고 기존 ul> 태그를 <이 코드로 바꿉니다. 이렇게 하면 jQuery의 <모바일 테마를 사용하도록 jQuery Mobile 데이터 주석으로 ul> 태그를 업데이트합니다.
```
<ul data-role="listview" data-inset="true" data-filter="true">
```
참고 항목

다음에 유의합니다.
- listview로 설정된 데이터 역할 특성은 listview 스타일을 사용하여 목록을 렌더링합니다.
- true로 설정된 데이터 인셋 특성은 둥근 테두리와 여백이 있는 목록을 표시합니다.
- true로 설정된 데이터 필터 특성은 검색 상자를 생성합니다.
프로젝트 설명서 [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)에서 jQuery Mobile 규칙에 대해 자세히 알아볼 수 있습니다.
Ctrl +S를 눌러 변경 내용을 저장합니다.
Windows Phone 에뮬레이터로 전환하고 사이트를 새로 고칩니다. 갤러리 목록의 새로운 모양과 느낌과 위쪽에 있는 새 검색 상자를 확인합니다. 그런 다음 검색 상자(예 : Tulips)에 단어를 입력하여 사진 갤러리에서 검색을 시작합니다.

필터링과 함께 listview 스타일을 사용하는 갤러리

요약하자면, 뷰 동원자 레시피를 사용하여 "모바일" 접미사가 있는 인덱스 보기의 복사본을 만들었습니다. 이 접미사는 MVC 4를 ASP.NET 모바일 디바이스에서 생성된 모든 요청이 인덱스의 이 복사본을 사용한다는 것을 나타냅니다. 또한 모바일 디바이스에서 사이트 모양과 느낌을 향상시키기 위해 jQuery Mobile을 사용하도록 인덱스 보기의 모바일 버전을 업데이트했습니다.
Visual Studio로 돌아가 콘텐츠 폴더 아래에 있는 Site.Mobile.css 엽니다.

이미지의 오른쪽에 표시되도록 사진 제목의 위치를 수정합니다. 이렇게 하려면 Site.Mobile.css 파일에 다음 코드를 추가합니다.

CSS

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

Ctrl +S를 눌러 변경 내용을 저장합니다.
Windows Phone 에뮬레이터로 다시 전환하고 사이트를 새로 고칩니다. 사진 제목이 지금 제대로 배치되어 있는지 확인합니다.

이미지의 오른쪽에 있는 제목

작업 3 - jQuery 모바일 테마

jQuery Mobile의 모든 레이아웃 및 위젯은 사이트 및 애플리케이션에 완전한 통합 시각적 디자인 테마를 적용할 수 있도록 하는 새로운 개체 지향 CSS 프레임워크를 중심으로 설계되었습니다.

jQuery Mobile의 기본 테마에는 빠른 참조를 위해 문자(a, b, c, d, e)가 제공되는 5개의 견본이 포함되어 있습니다.

이 작업에서는 기본값과 다른 테마를 사용하도록 모바일 레이아웃을 업데이트합니다.

Visual Studio로 다시 전환합니다.
Views\Shared에 있는 _Layout.Mobile.cshtml 파일을 엽니다.
데이터 역할이 "page"로 설정된 div 요소를 찾고 데이터 테마를 "e"로 업데이트합니다.
```
<div data-role="page" data-theme="e">
```
Ctrl +S를 눌러 변경 내용을 저장합니다.
Windows Phone 에뮬레이터에서 사이트를 새로 고치고 새 색 구성표를 확인합니다.

색 구성표가 다른 모바일 레이아웃

작업 4 - 뷰 전환기 구성 요소 및 브라우저 재정의 기능 사용

모바일에 최적화된 웹 페이지에 대한 규칙은 사용자가 데스크톱 버전의 페이지로 전환할 수 있는 데스크톱 보기 또는 전체 사이트 모드와 같은 텍스트인 링크를 추가하는 것입니다. jQuery.Mobile.MVC 패키지에는 _Layout.Mobile.cshtml 보기에 사용되는 이 용도에 대한 샘플 뷰 전환기 구성 요소가 포함되어 있습니다.

바탕 화면 보기로 전환하기 위한 링크

바탕 화면 보기로 전환하기 위한 링크

보기 전환기는 브라우저 재정의라는 새 기능을 사용합니다. 이 기능을 사용하면 애플리케이션에서 요청이 실제로 들어오는 브라우저와 다른 브라우저(사용자 에이전트)에서 온 것처럼 처리할 수 있습니다.

이 작업에서는 jQuery.Mobile.MVC에서 추가한 뷰 전환기의 샘플 구현과 ASP.NET MVC 4의 새로운 브라우저 재정의 기능을 살펴봅니다.

Visual Studio로 다시 전환합니다.
Views\Shared 폴더 아래에 있는 _Layout.Mobile.cshtml 보기를 열고 뷰 전환기 구성 요소가 부분 보기로 참조되는 것을 확인합니다.

View-Switcher 구성 요소를 사용하는 모바일 레이아웃
_ViewSwitcher.cshtml 부분 보기를 엽니다.

부분 보기는 새 메서드 ViewContext.HttpContext.GetOverriddenBrowser() 를 사용하여 웹 요청의 원본을 확인하고 데스크톱 또는 모바일 보기로 전환할 해당 링크를 표시합니다.

GetOverriddenBrowser 메서드는 현재 요청에 대해 설정된 사용자 에이전트(실제 또는 재정의됨)에 해당하는 HttpBrowserCapabilitiesBase 인스턴스를 반환 합니다. 이 값을 사용하여 IsMobileDevice와 같은 속성을 가져올 수 있습니다.

ViewSwitcher 부분 보기
Controllers 폴더에 있는 ViewSwitcherController.cs 클래스를 엽니다. ViewSwitcher 구성 요소의 링크에서 SwitchView 작업을 호출하고 새 HttpContext 메서드를 확인합니다.
- HttpContext.ClearOverriddenBrowser() 메서드는 현재 요청에 대해 재정의된 사용자 에이전트를 제거합니다.
- HttpContext.SetOverriddenBrowser() 메서드는 지정된 사용자 에이전트를 사용하여 요청의 실제 사용자 에이전트 값을 재정의합니다.
  
  ViewSwitcher 컨트롤러
  
  브라우저 재정의는 jQuery.Mobile.MVC 패키지를 설치하지 않은 경우에도 사용할 수 있는 ASP.NET MVC 4의 핵심 기능입니다. 그러나 이 기능은 보기, 레이아웃 및 부분 보기에만 영향을 미치며 Request.Browser 개체에 의존하는 기능에는 영향을 주지 않습니다.

작업 5 - 바탕 화면 보기에 보기 전환기 추가

이 작업에서는 뷰 전환기를 포함하도록 데스크톱 레이아웃을 업데이트합니다. 이렇게 하면 모바일 사용자가 데스크톱 보기를 탐색할 때 모바일 보기로 돌아갈 수 있습니다.

Windows Phone 에뮬레이터에서 사이트를 새로 고칩니다.
갤러리 맨 위에 있는 바탕 화면 보기 링크를 클릭합니다. 데스크톱 보기에는 모바일 보기로 돌아갈 수 있는 보기 전환기가 없습니다.
Visual Studio로 돌아가서 _Layout.cshtml 보기를 엽니다.
로그인 섹션을 찾아서 _LogOnPartial 부분 보기 아래에 _ViewSwitcher 부분 보기를 렌더링하는 호출을 삽입합니다. 그런 다음 Ctrl+S를 눌러 변경 내용을 저장합니다.
```
<div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>
```
Ctrl +S를 눌러 변경 내용을 저장합니다.
Windows Phone 에뮬레이터에서 페이지를 새로 고치고 화면을 두 번 클릭하여 확대합니다. 이제 홈페이지에 모바일에서 데스크톱 보기로 전환하는 모바일 보기 링크가 표시됩니다.

바탕 화면 보기에서 렌더링된 전환기 보기
모바일 보기로 다시 전환하고 정보 페이지(http://localhost[포트]/홈/정보)로 이동합니다. About.Mobile.cshtml 보기를 만들지 않은 경우에도 모바일 레이아웃(_Layout.Mobile.cshtml)을 사용하여 정보 페이지가 표시됩니다.

페이지 정보
마지막으로 데스크톱 웹 브라우저에서 사이트를 엽니다. 이전 업데이트는 데스크톱 보기에 영향을 미치지 않습니다.

PhotoGallery 데스크톱 보기

작업 6 - 새 디스플레이 모드 만들기

새 디스플레이 모드 기능을 사용하면 애플리케이션이 요청을 생성하는 브라우저에 따라 보기를 선택할 수 있습니다. 예를 들어 데스크톱 브라우저에서 홈 페이지를 요청하는 경우 애플리케이션은 Views\Home\Index.cshtml 템플릿을 반환합니다. 그런 다음 모바일 브라우저에서 홈 페이지를 요청하는 경우 애플리케이션은 Views\Home\Index.mobile.cshtml 템플릿을 반환합니다.

이 작업에서는 iPhone 디바이스에 대한 사용자 지정된 레이아웃을 만들고 iPhone 디바이스의 요청을 시뮬레이션해야 합니다. 이렇게 하려면 iPhone 에뮬레이터/시뮬레이터(예: 일렉트릭 모바일 시뮬레이터) 또는 사용자 에이전트를 수정하는 추가 기능이 있는 브라우저를 사용할 수 있습니다. Safari 브라우저에서 사용자 에이전트 문자열을 설정하여 iPhone을 에뮬레이트하는 방법에 대한 지침은 Safari가 David Alison의 블로그에서 IE인 척하는 방법을 참조하세요.

이 작업은 선택 사항이며 실행하지 않고 랩 전체에서 계속할 수 있습니다.

Visual Studio에서 Shift + F5 키를 눌러 애플리케이션 디버깅을 중지합니다.
Global.asax.cs 열고 다음 using 문을 추가합니다.
```
using System.Web.WebPages;
```

Application_Start 메서드에 강조 표시된 다음 코드를 추가합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex03 - iPhone DisplayMode)

protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

들어오는 각 요청과 일치하는 정적 DisplayModeProvider.Instance.Modes 정적 목록 내에 "iPhone"이라는 새 DefaultDisplayMode를 등록했습니다. 들어오는 요청에 "iPhone" 문자열이 포함된 경우 ASP.NET MVC는 이름에 "iPhone" 접미사가 포함된 뷰를 찾습니다. 0 매개 변수는 새 모드의 구체적인 정도를 나타냅니다. 예를 들어 이 보기는 모바일 디바이스의 요청과 일치하는 일반 ".mobile" 규칙보다 더 구체적입니다.

이 코드가 실행되면 iPhone 브라우저에서 요청을 생성하면 애플리케이션에서 다음 단계에서 만들 Views\Shared\_Layout.iPhone.cshtml 레이아웃을 사용합니다.

참고 항목

iPhone에 대한 요청을 테스트하는 이 방법은 데모 목적으로 간소화되었으며 모든 iPhone 사용자 에이전트 문자열에 대해 예상대로 작동하지 않을 수 있습니다(예: 테스트는 대/소문자 구분).

Views\Shared 폴더에 _Layout.Mobile.cshtml 파일의 복사본을 만들고 복사본 이름을 "_Layout.iPhone.cshtml"로 바꿉니다.
이전 단계에서 만든 _Layout.iPhone.cshtml을 엽니다.
데이터 역할 특성이 페이지로 설정된 div 요소를 찾고 데이터 테마 특성을 "a"로 변경 합니다.

<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

이제 ASP.NET MVC 4 애플리케이션에 3개의 레이아웃이 있습니다.

_Layout.cshtml: 데스크톱 브라우저에 사용되는 기본 레이아웃입니다.
_Layout.mobile.cshtml: 모바일 디바이스에 사용되는 기본 레이아웃입니다.
_Layout.iPhone.cshtml: 다른 색 구성표를 사용하여 _Layout.mobile.cshtml과 차별화하는 iPhone 장치의 특정 레이아웃입니다.
F5 키를 눌러 애플리케이션을 실행하고 Windows Phone 에뮬레이터에서 사이트를 찾습니다.
iPhone 시뮬레이터를 열고(iPhone 시뮬레이터를 설치하고 구성하는 방법에 대한 지침은 부록 C 참조) 사이트도 찾습니다. 각 휴대폰에서 특정 템플릿을 사용하고 있습니다.

각 모바일 디바이스에 대해 서로 다른 보기 사용

연습 4: 비동기 컨트롤러 사용

Microsoft .NET Framework 4.5에서는 C# 및 Visual Basic의 새로운 언어 기능을 도입하여 .NET 프로그래밍에서 비동기용의 새로운 기반을 제공합니다. 이 새로운 기반은 비동기 프로그래밍을 동기 프로그래밍처럼 간단하게 만듭니다. 이제 AsyncController 클래스를 사용하여 ASP.NET MVC 4에서 비동기 작업 메서드를 작성할 수 있습니다. 비동기 작업 메서드는 CPU 바인딩되지 않은 장기 실행 요청에 사용할 수 있습니다. 이렇게 하면 요청이 처리되는 동안 웹 서버의 작업 수행이 차단되지 않습니다. AsyncController 클래스는 일반적으로 장기 실행 웹 서비스 호출에 사용됩니다.

이 연습에서는 ASP.NET MVC 4의 비동기 작업의 기본 사항을 설명합니다. 자세히 알아보려면 다음 문서를 확인할 수 있습니다. [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

작업 1 - 비동기 컨트롤러 구현

Source/Ex4-Async/Begin/폴더에 있는 Begin 솔루션을 엽니다. 그렇지 않으면 이전 연습을 완료하여 얻은 끝 솔루션을 계속 사용할 수 있습니다.
1. 제공 된 Begin 솔루션을 연 경우 계속하기 전에 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.
2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.
3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.
  
  참고 항목
  
  NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.
Controllers 폴더에서 HomeController.cs 클래스를 엽니다.
다음 using 문을 추가합니다.
```
using System.Threading.Tasks;
```
AsyncController에서 상속하도록 HomeController 클래스를 업데이트합니다. AsyncController에서 파생된 컨트롤러를 사용하면 ASP.NET 비동기 요청을 처리할 수 있으며 동기 작업 메서드를 계속 처리할 수 있습니다.
```
public class HomeController : AsyncController
{
```
Index 메서드에 비동기 키워드를 추가하고 Task<ActionResult> 형식을 반환하도록 합니다.
```
public async Task<ActionResult> Index()
{
    ...
```
참고 항목

비동기 키워드는 .NET Framework 4.5에서 제공하는 새 키워드 중 하나이며, 이 메서드에 비동기 코드가 포함되어 있음을 컴파일러에 알립니다. Task 개체는 나중에 완료될 수 있는 비동기 작업을 나타냅니다.
클라이언트를 대체 합니다. 아래와 같이 await 키워드를 사용하여 전체 비동기 버전을 사용하여 GetAsync() 호출합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex04 - GetAsync)
```
public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...
```
참고 항목

이전 버전에서는 Task 개체의 Result 속성을 사용하여 결과가 반환될 때까지 스레드를 차단했습니다(동기화 버전).

await 키워드를 추가하면 컴파일러가 메서드 호출에서 반환된 작업을 비동기적으로 기다리도록 지시합니다. 즉, 대기된 메서드가 완료된 후에만 나머지 코드가 콜백으로 실행됩니다. 이 작업을 수행하려면 try-catch 블록을 변경할 필요가 없습니다. 백그라운드 또는 포그라운드에서 발생하는 예외는 프레임워크에서 제공하는 처리기를 사용하여 추가 작업 없이 계속 catch됩니다.

아래와 같이 줄을 새 코드로 바꿔 비동기 구현을 계속하도록 코드를 변경합니다.

(코드 조각 - ASP.NET MVC 4 Lab - Ex04 - ReadAsStringAsync)

public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

애플리케이션을 실행합니다. 큰 변경 내용은 표시되지 않지만 코드는 스레드 풀에서 스레드를 차단하지 않으므로 서버 리소스를 더 잘 사용하고 성능을 향상할 수 있습니다.

참고 항목

Visual Studio 학습 키트에 포함된 "C# 및 Visual Basic을 사용하는 .NET 4.5의 비동기 프로그래밍" 랩에서 새로운 비동기 프로그래밍 기능에 대해 자세히 알아볼 수 있습니다.

작업 2 - 취소 토큰을 사용하여 시간 제한 처리

작업 인스턴스를 반환하는 비동기 작업 메서드도 시간 초과를 지원할 수 있습니다. 이 작업에서는 취소 토큰을 사용하여 제한 시간 시나리오를 처리하도록 Index 메서드 코드를 업데이트합니다.

Visual Studio로 돌아가서 Shift + F5를 눌러 디버깅을 중지합니다.
HomeController.cs 파일에 다음 using 문을 추가합니다.
```
using System.Threading;
```

CancellationToken 인수를 받도록 인덱스 작업을 업데이트합니다.

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

GetAsync 호출을 업데이트하여 취소 토큰을 전달합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex04 - CancellationToken을 사용하여 SendAsync)

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

AsyncTimeout 특성이 500밀리초로 설정되고 TimedOut 보기로 리디렉션하여 TaskCanceledException을 처리하도록 구성된 HandleError 특성을 사용하여 Index 메서드를 데코레이트합니다.

(코드 조각 - ASP.NET MVC 4 랩 - Ex04 - 특성)
```
[AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
```
PhotoController 클래스를 열고 갤러리 메서드를 업데이트하여 실행 1000밀리초(1초)를 지연하여 장기 실행 작업을 시뮬레이션합니다.
```
public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}
```
Web.config 파일을 열고 다음 요소를 추가하여 사용자 지정 오류를 사용하도록 설정합니다.
```
<system.web>
  <customErrors mode="On"></customErrors>
  ...
```
Views\Shared 명명된 TimedOut에서 새 보기를 만들고 기본 레이아웃을 사용합니다. 솔루션 탐색기 Views\Shared 폴더를 마우스 오른쪽 단추로 클릭하고 추가 | 선택 보기.

각 모바일 디바이스에 대해 서로 다른 보기 사용

아래와 같이 TimedOut 보기 콘텐츠를 업데이트합니다.

@{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

애플리케이션을 실행하고 루트 URL로 이동합니다. Thread.Sleep을 1000밀리초로 추가하면 AsyncTimeout 특성에 의해 생성되고 HandleError 특성에 의해 catch되는 시간 제한 오류가 발생합니다.

제한 시간 예외 처리됨

참고 항목

또한 부록 D: 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시에 따라 이 애플리케이션을 Windows Azure 웹 사이트에 배포할 수 있습니다.

요약

이 실습에서는 ASP.NET MVC 4에 상주하는 새로운 기능 중 일부를 살펴보았습니다. 다음 개념에 대해 설명했습니다.

새 모바일 애플리케이션 프로젝트 템플릿을 포함하여 ASP.NET MVC 프로젝트 템플릿의 향상된 기능을 활용합니다.
HTML5 뷰포트 특성 및 CSS 미디어 쿼리를 사용하여 모바일 디바이스의 디스플레이 개선
점진적 향상을 위해 jQuery Mobile을 사용하고 터치 최적화 웹 UI를 빌드합니다.
모바일 관련 보기 만들기
뷰 전환기 구성 요소를 사용하여 애플리케이션에서 모바일 및 데스크톱 보기 간 전환
작업 지원을 사용하여 비동기 컨트롤러 만들기

부록 A: 코드 조각 사용

코드 조각을 사용하면 필요한 모든 코드를 손쉽게 사용할 수 있습니다. 랩 문서에서는 다음 그림과 같이 언제 사용할 수 있는지 정확하게 알려줍니다.

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

Visual Studio 코드 조각을 사용하여 프로젝트에 코드 삽입

키보드를 사용하여 코드 조각을 추가하려면(C#에만 해당)

코드를 삽입할 위치에 커서를 놓습니다.
공백이나 하이픈 없이 코드 조각 이름 입력을 시작합니다.
IntelliSense가 일치하는 코드 조각의 이름을 표시하는 것을 확인합니다.
올바른 코드 조각을 선택하거나 전체 코드 조각의 이름이 선택될 때까지 계속 입력합니다.
Tab 키를 두 번 눌러 커서 위치에 코드 조각을 삽입합니다.

코드 조각 이름 입력 시작

코드 조각 이름 입력 시작

Tab 키를 눌러 강조 표시된 코드 조각을 선택합니다.

Tab 키를 눌러 강조 표시된 코드 조각을 선택합니다.

Tab 키를 다시 누르면 코드 조각이 확장됩니다.

Tab 키를 다시 누르면 코드 조각이 확장됩니다.

마우스를 사용하여 코드 조각을 추가하려면(C#, Visual Basic 및 XML)

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭합니다.
코드 조각 삽입, 내 코드 조각 삽입을 선택합니다.
목록에서 관련 코드 조각을 클릭하여 선택합니다.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 선택합니다.

코드 조각을 삽입할 위치를 마우스 오른쪽 단추로 클릭하고 코드 조각 삽입을 선택합니다.

목록에서 관련 코드 조각을 클릭하여 선택합니다.

목록에서 관련 코드 조각을 클릭하여 선택합니다.

부록 B: Visual Studio Express 2012 for Web 설치

Microsoft 웹 플랫폼 설치 관리자 사용하여 웹용 Microsoft Visual Studio Express 2012 또는 다른 "Express" 버전을 설치할 수 있습니다. 다음 지침은 Microsoft 웹 플랫폼 설치 관리자 사용하여 Visual Studio Express 2012 for Web을 설치하는 데 필요한 단계를 안내합니다.

[/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 해당 설치 관리자를 열고 "Visual Studio Express 2012 for Web with Windows Azure SDK" 제품을 검색할 수 있습니다.
지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.
웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

Visual Studio Express 설치
모든 제품의 라이선스 및 사용 약관을 읽고 동의를 클릭하여 계속합니다.

사용 조건 동의
다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

설치 진행률
설치가 완료되면 마침을 클릭합니다.

설치 완료
종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.
Visual Studio Express for Web을 열려면 시작 화면으로 이동하여 "VS Express" 쓰기를 시작한 다음 VS Express for Web 타일을 클릭합니다.

VS Express for Web 타일

부록 C: WebMatrix 2 및 iPhone 시뮬레이터 설치

시뮬레이션된 iPhone 디바이스에서 사이트를 실행하려면 WebMatrix 확장 "iPhone용 전기 모바일 시뮬레이터"를 사용할 수 있습니다. 또한 Visual Studio 2012에서 시뮬레이터를 실행하도록 동일한 확장을 구성할 수 있습니다.

작업 1 - WebMatrix 2 설치

[/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 해당 설치 관리자를 열고 "WebMatrix 2" 제품을 검색할 수 있습니다.
지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.
웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

WebMatrix 2 설치
모든 제품의 라이선스 및 사용 약관을 읽고 동의를 클릭하여 계속합니다.

사용 조건 동의
다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

설치 진행률
설치가 완료되면 마침을 클릭합니다.

설치 완료
종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.

작업 2 - iPhone 시뮬레이터 확장 설치

WebMatrix를 실행하고 기존 웹 사이트를 열거나 새 웹 사이트를 만듭니다.
홈 리본에서 실행 단추를 클릭하고 새로 추가를 선택합니다.

새 WebMatrix 확장 추가
iPhone 시뮬레이터를 선택하고 설치를 클릭합니다.

WebMatrix 확장 찾아보기
패키지 세부 정보에서 설치를 클릭하여 확장 설치를 계속합니다.

iPhone 시뮬레이터 확장
확장 EULA를 읽고 수락합니다.

WebMatrix 확장 EULA
이제 iPhone 시뮬레이터 옵션을 사용하여 WebMatrix에서 웹 사이트를 실행할 수 있습니다.

iPhone을 사용하여 실행

작업 3 - iPhone 시뮬레이터를 실행하도록 Visual Studio 2012 구성

Visual Studio 2012를 열고 웹 사이트를 열거나 새 프로젝트를 만듭니다.
실행 단추에서 아래쪽 화살표를 클릭하고 [찾아보기]를 선택합니다.

다음을 사용하여 찾아보기
"찾아보기" 대화 상자에서 추가를 클릭합니다.
"프로그램 추가" 대화 상자에서 다음 값을 사용합니다.
- 프로그램: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (그에 따라 경로 업데이트)
- 인수: "1"
- 친숙한 이름: iPhone 시뮬레이터
  
  을 사용하여 탐색할 프로그램 추가
확인을 클릭하고 대화 상자를 닫습니다.
이제 Visual Studio 2012에서 iPhone 시뮬레이터에서 웹 애플리케이션을 실행할 수 있습니다.

iPhone 시뮬레이터를 사용하여 찾아보기

부록 D: 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시

이 부록은 Windows Azure 관리 포털에서 새 웹 사이트를 만들고 랩에 따라 얻은 애플리케이션을 게시하고 Windows Azure에서 제공하는 웹 배포 게시 기능을 활용하는 방법을 보여 줍니다.

작업 1 - Windows Azure Portal에서 새 웹 사이트 만들기

Windows Azure 관리 포털로 이동하여 구독과 연결된 Microsoft 자격 증명을 사용하여 로그인합니다.

참고 항목

Windows Azure를 사용하면 10개의 ASP.NET 웹 사이트를 무료로 호스트한 다음 트래픽이 증가함에 따라 크기를 조정할 수 있습니다. 여기에서 등록 할 수 있습니다.

Windows Azure 관리 포털에 로그온
명령 모음에서 새로 만들기를 클릭합니다.

새 웹 사이트 만들기
컴퓨팅 | 웹 사이트를 클릭합니다. 그런 다음, 빠른 만들기 옵션을 선택합니다. 새 웹 사이트에 사용할 수 있는 URL을 제공하고 웹 사이트 만들기를 클릭합니다.

참고 항목

Windows Azure 웹 사이트는 제어하고 관리할 수 있는 클라우드에서 실행되는 웹 애플리케이션의 호스트입니다. 빠른 만들기 옵션을 사용하면 포털 외부에서 완료된 웹 애플리케이션을 Windows Azure 웹 사이트에 배포할 수 있습니다. 데이터베이스를 설정하는 단계는 포함되지 않습니다.

빠른 만들기를 사용하여 새 웹 사이트 만들기
새 웹 사이트가 생성될 때까지 기다립니다.
웹 사이트가 만들어지면 URL 열 아래의 링크를 클릭합니다. 새 웹 사이트가 작동하는지 확인합니다.

새 웹 사이트로 검색

실행 중인 웹 사이트
포털로 돌아가서 이름 열 아래에 있는 웹 사이트의 이름을 클릭하여 관리 페이지를 표시합니다.

웹 사이트 관리 페이지 열기
대시보드 페이지의 빠른 보기 섹션에서 게시 프로필 다운로드 링크를 클릭합니다.

참고 항목

게시 프로필에는 사용하도록 설정된 각 게시 방법에 대해 웹 애플리케이션을 Windows Azure 웹 사이트에 게시하는 데 필요한 모든 정보가 포함됩니다. 게시 프로필에는 게시 메서드가 사용하도록 설정된 각 엔드포인트에 연결하고 인증하는 데 필요한 URL, 사용자 자격 증명 및 데이터베이스 문자열이 포함됩니다. Microsoft WebMatrix 2, 웹 용 Microsoft Visual Studio Express 및 Microsoft Visual Studio 2012 는 웹 애플리케이션을 Windows Azure 웹 사이트에 게시하기 위한 이러한 프로그램의 구성을 자동화하기 위해 게시 프로필 읽기를 지원합니다.

웹 사이트 게시 프로필 다운로드
게시 프로필 파일을 알려진 위치에 다운로드합니다. 이 연습에서는 이 파일을 사용하여 Visual Studio에서 Windows Azure 웹 사이트에 웹 애플리케이션을 게시하는 방법을 알아보세요.

게시 프로필 파일 저장

작업 2 - 데이터베이스 서버 구성

애플리케이션에서 SQL Server 데이터베이스를 사용하는 경우 SQL Database 서버를 만들어야 합니다. SQL Server를 사용하지 않는 간단한 애플리케이션을 배포하려는 경우 이 작업을 건너뛸 수 있습니다.

애플리케이션 데이터베이스를 저장하려면 SQL Database 서버가 필요합니다. Sql Database 서버의 대시보드에 있는 Windows Azure 관리 포털에서 구독에서 SQL Database | 서버를 | 볼 수 있습니다. 서버를 만들지 않은 경우 명령 모음의 추가 단추를 사용하여 서버를 만들 수 있습니다. 서버 이름 및 URL, 관리자 로그인 이름 및 암호를 기록해 두세요. 다음 작업에서 사용할 수 있습니다. 데이터베이스는 이후 단계에서 생성되므로 아직 만들지 마세요.

SQL Database Server 대시보드
다음 작업에서는 Visual Studio에서 데이터베이스 연결을 테스트합니다. 이러한 이유로 서버의 허용된 IP 주소 목록에 로컬 IP 주소를 포함해야 합니다. 이렇게 하려면 구성을 클릭하고 현재 클라이언트 IP 주소에서 IP 주소를 선택하고 시작 IP 주소 및 끝 IP 주소 텍스트 상자에 붙여넣고 단추를 클릭합니다.

클라이언트 IP 주소 추가
클라이언트 IP 주소가 허용된 IP 주소 목록에 추가되면 [저장]을 클릭하여 변경 내용을 확인합니다.

변경 내용 확인

작업 3 - 웹 배포를 사용하여 ASP.NET MVC 4 애플리케이션 게시

ASP.NET MVC 4 솔루션으로 돌아갑니다. 솔루션 탐색기 웹 사이트 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

웹 사이트 게시
첫 번째 작업에 저장한 게시 프로필을 가져옵니다.

게시 프로필 가져오기
연결 유효성 검사를 클릭합니다. 유효성 검사가 완료되면 다음을 클릭합니다.

참고 항목

연결 유효성 검사 단추 옆에 녹색 확인 표시가 표시되면 유효성 검사가 완료됩니다.

연결 유효성 검사
설정 페이지의 데이터베이스 섹션에서 데이터베이스 연결의 텍스트 상자 옆에 있는 단추(즉, DefaultConnection)를 클릭합니다.

웹 배포 구성
다음과 같이 데이터베이스 연결을 구성합니다.
- 서버 이름에 tcp: 접두사를 사용하여 SQL Database 서버 URL을 입력합니다.
- 사용자 이름에 서버 관리자 로그인 이름을 입력합니다.
- 암호에 서버 관리자 로그인 암호를 입력합니다.
- 새 데이터베이스 이름(예: MVC4SampleDB)을 입력합니다.
  
  대상 연결 문자열 구성
그런 후 OK를 클릭합니다. 데이터베이스를 만들라는 메시지가 표시되면 [예]를 클릭합니다.

데이터베이스 만들기
Windows Azure에서 SQL Database에 연결하는 데 사용할 연결 문자열 기본 연결 텍스트 상자에 표시됩니다. 그런 후 Next 를 클릭합니다.

SQL Database를 가리키는 연결 문자열
미리 보기 페이지에서 게시를 클릭합니다.

웹 애플리케이션 게시
게시 프로세스가 완료되면 기본 브라우저가 게시된 웹 사이트를 엽니다.

Windows Azure에 게시된 애플리케이션