Visual Studio 2012의 새로운 ASP.NET 및 웹 개발 기능

2023-07-13

새 버전의 Visual Studio에서는 웹 기술을 사용할 때 환경 및 성능을 개선하는 데 중점을 두는 여러 가지 향상된 기능이 도입되었습니다. CSS, JavaScript 및 HTML용 Visual Studio 편집기가 IntelliSense 및 자동 들여쓰기와 같은 많은 주문형 코드 보조를 포함하도록 완전히 개선되었습니다. 성능과 관련하여 묶음 및 축소는 이제 페이지 로드 시간을 쉽게 줄일 수 있도록 기본 제공 기능으로 통합됩니다.

Visual Studio를 사용하면 최신 웹 사이트 기술을 사용할 수 있습니다. 브라우저 간 CSS3 코드 조각을 사용하여 새 HTML5 요소 및 기능을 활용하면서 클라이언트 플랫폼에 관계없이 사이트가 작동하는지 확인할 수 있습니다.

이 Visual Studio 버전에서는 JavaScript 코드 작성 및 프로파일링이 더 쉬워야 합니다. 이제 IntelliSense 목록, 통합 XML 설명서 및 탐색 기능을 JavaScript 코드에 사용할 수 있습니다. 이제 JavaScript 카탈로그를 손쉽게 사용할 수 있습니다. 또한 스크립트에 대한 ECMAScript5 규정 준수를 확인하고 초기 단계에서 구문 오류를 검색할 수 있습니다.

마지막으로, 이 Visual Studio 버전은 기본 제공 묶음 및 축소를 구현합니다. 사이트가 더 빠르게 수행되도록 스크립트 파일과 스타일시트가 압축되고 압축됩니다.

이 랩에서는 원본 폴더에 제공된 샘플 웹 애플리케이션에 사소한 변경 내용을 적용하여 이전에 설명한 향상된 기능과 새로운 기능을 안내합니다.

목표

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

CSS 편집기에서 새로운 기능 및 향상된 기능 사용
HTML 편집기에서 새로운 기능 및 향상된 기능 사용
JavaScript 편집기에서 새로운 기능 및 향상된 기능 사용
묶음 및 축소 구성 및 사용

필수 조건

웹용 Microsoft Visual Studio Express 2012 이상(설치 방법에 대한 지침은 부록 A를 참조하세요).
Windows PowerShell (설치 스크립트의 경우 - Windows 8 및 Windows Server 2008 R2에 이미 설치됨)
Internet Explorer 10 - 또는 HTML5 호환 브라우저

연습

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

연습 1: CSS 편집기에서 새로운 기능
연습 2: HTML 편집기에서 새로운 기능
연습 3: JavaScript 편집기에서의 새로운 기능
연습 4: 번들링 및 축소

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

연습 1: CSS 편집기에서 새로운 기능

웹 개발자는 CSS 편집과 관련된 많은 어려움을 잘 알고 있어야 합니다. CSS 스타일 지정의 가장 큰 문제 중 하나는 브라우저 간 호환성입니다. 사이트에 스타일을 적용한 후 다른 브라우저 또는 장치에서 열면 다르게 보이는 경우가 많습니다. 따라서 이러한 시각적 문제를 해결하는 데 상당한 시간을 할애하여 최종적으로 한 브라우저에서 작동하게 되면 다른 브라우저에서 끊어진다는 사실을 깨닫게 될 수 있습니다.

이제 Visual Studio에는 개발자가 CSS 스타일시트에 효과적으로 액세스하고, 작업하고, 구성하는 데 도움이 되는 기능이 포함되어 있습니다. 이 연습에서는 효과적인 조직 및 버전에 대한 새로운 기능과 브라우저 간 호환성을 위한 CSS3 코드 조각을 충족합니다.

작업 1 - 새 편집기 기능

이 작업에서는 CSS 편집기의 새로운 기능을 검색합니다. 이 새로운 편집기를 사용하면 새로운 스마트 들여쓰기, 향상된 코드 주석 및 향상된 IntelliSense 목록을 활용하여 생산성을 높일 수 있습니다.

Visual Studio를 시작하고 이 랩의 Source\WhatsNewASPNET 폴더에 있는 WhatsNewASPNET.sln 솔루션을 엽니다.
솔루션 탐색기 Styles 폴더 아래에 있는 Site.css 파일을 엽니다. 텍스트 편집기 도구가 도구 모음에 표시되는지 확인합니다. 이렇게 하려면 도구 모음 보기 | 메뉴 옵션을 선택하고 텍스트 편집기 옵션을 선택합니다. 이 새 버전부터 주석 단추() 및 주석 제거 단추()도 CSS 편집기에서 사용하도록 설정되어 있음을 알 수 있습니다.

편집기 및 CSS 도구 사용
코드를 스크롤하고 CSS 클래스 정의를 선택합니다. 메모() 단추를 클릭하여 선택한 줄을 주석으로 표시합니다. 그런 다음 주석 제거() 단추를 클릭하여 변경 내용을 실행 취소합니다.
텍스트의 왼쪽 여백에 있는 축소 ( ) 및 확장 ( ) 단추를 클릭합니다. 이제 더 깨끗한 보기를 사용하는 데 사용하지 않는 스타일을 숨길 수 있습니다.

CSS 클래스 축소
스마트 들여쓰기 기능이 사용하도록 설정되어 있는지 확인합니다. 도구 | 옵션 메뉴 옵션을 선택한 다음 화면 왼쪽 창에서 텍스트 편집기 | CSS | 서식 페이지를 선택합니다. 계층적 들여쓰기 옵션을 선택합니다.

계층적 들여쓰기 사용
기본 클래스 정의(.main)를 찾아 div 요소에 스타일을 추가합니다. 코드가 자동으로 정렬되어 사용자가 부모 클래스를 한눈에 찾을 수 있습니다.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
CSS의 계층적 맞춤
.main div 클래스 내에서 테두리 끝에 있는 커서를 0px로 찾은 다음 Enter 키를 눌러 IntelliSense 목록을 표시합니다. 위쪽 입력을 시작하고 입력할 때 목록이 필터링되는 방식을 확인합니다. 목록에는 단어의 맨 위에 포함된 요소가 표시됩니다(이전 버전의 Visual Studio에서는 용어로 시작하는 항목으로 목록이 필터링됨).

CSS의 IntelliSense 향상된 기능

작업 2 - 색 선택기

이 작업에서는 Visual Studio IntelliSense에 통합된 새 CSS Color Picker를 검색합니다.

Site.css 헤더 클래스 정의(.header)를 찾아 해당 코드 줄의 ":"와 "#" 문자 사이에 배경색 특성 옆에 커서를 놓습니다.

커서 찾기
콜론(:) 삭제하고 다시 작성하여 색 선택을 표시합니다. 표시되는 첫 번째 색은 사이트의 가장 빈번한 색입니다. 흰색을 클릭하면 해당 HTML 색 코드(#fff)가 스타일시트의 현재 색 코드를 바꿉니다.

색 선택기
색 선택기에서 [확장 ]( ) 단추를 눌러 색 그라데이션을 표시한 다음 그라데이션 커서를 끌어 다른 색을 선택합니다. 그런 다음 스포이트 단추를 클릭하고 화면에서 색을 선택합니다. 커서를 이동하는 동안 배경색 값이 동적으로 변경됩니다.

색 선택 그라데이션
불투명도 슬라이더에서 선택기를 막대 가운데로 이동하여 불투명도를 줄입니다. 이제 배경색 값이 배율을 RGBA로 변경합니다.

색 선택기 불투명도

참고 항목

CSS3의 RGBA(빨강, 녹색, 파랑, 알파) 색 정의를 사용하면 단일 항목에 대한 색 불투명도 값을 정의할 수 있습니다. 불투명도와 달리 유사한 CSS 특성 - RGBA 색도 최신 브라우저와 호환됩니다.

작업 3 - CSS 호환 코드 조각

이 작업에서는 웹 사이트의 일부 기능을 구현하기 위해 브라우저 간 호환 CSS3 코드 조각을 사용하는 방법을 알아봅니다.

Site.css 파일에서 헤더 CSS 클래스 정의(.header)를 찾고 커서를 /*border radius*/ 자리 표시자 아래에 배치하여 새 코드 조각을 추가합니다. Enter 키를 눌러 IntelliSense 목록 및 형식 반경을 표시하여 목록을 필터링합니다. 두 번 클릭하여 목록에서 테두리 반경 옵션을 선택한 다음 TAB 키를 눌러 코드 조각을 삽입합니다. 그런 다음 반경 크기를 픽셀 단위로 입력하고 Enter 키를 누릅니다. 예를 들어 15px를 입력 합니다.

코드 조각에 의해 추가된 CSS3 특성은 Mozilla 및 WebKit 기반 브라우저를 포함하여 대부분의 HTML5 규정 준수 브라우저에서 둥근 테두리를 렌더링합니다.

테두리 반경 코드 조각 사용

페이지 스타일(.page)에 동일한 테두리 조각을 적용합니다.

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

F5 키를 눌러 솔루션을 실행합니다. 이제 각 페이지에 둥근 테두리가 있습니다.

둥근 모서리
브라우저를 닫고 Visual Studio로 돌아갑니다.
Styles 폴더 아래에 있는 Custom.css 파일을 열고 div.images ul li img 클래스 정의 내에 커서를 놓습니다.
Enter 키를 눌러 IntelliSense 목록을 표시하고 상자 그림자를 입력한 다음 TAB 키를 두 번 눌러 클래스 정의 내에 기본 섀도 코드 조각을 삽입합니다. 그림자 값을 10px 10px 5px #888로 설정합니다. 그런 다음 테두리 반경을 입력하고 코드 조각을 삽입합니다. 15px를 입력하여 반지름 크기를 설정하고 Enter 키를 누릅니 다.

그림자가 있는 둥근 모서리

참고 항목

현재 섀도 특성은 Mozilla 및 Webkit(Chrome, Safari, Konkeror) 브라우저를 지원하기 위해 해당 접두사(moz, webkit, o)와 함께 삽입됩니다.
div.images ul li img 클래스 정의 아래에 새 클래스 div.images ul li img:hover를 만들고 커서를 대괄호 안에 놓습니다.

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

변환 조각을 삽입하려면 변환을 입력하고 TAB 키를 두 번 누릅니 다. 그런 다음 회전(-15deg)을 입력하여 이미지를 가리키면 회전 각도 값을 변경합니다.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

F5 키를 눌러 솔루션을 실행하고 CSS3 페이지로 찾습니다. 이미지에는 둥근 모서리와 상자 그림자가 있습니다. 마우스를 이미지 위로 마우스로 가리키고 회전하는 것을 지켜봅니다.

이미지를 회전하는 코드 조각 변환

참고 항목

Internet Explorer 10을 사용 중이고 그림자를 볼 수 없는 경우 문서 모드가 IE10 표준으로 설정되어 있는지 확인합니다. F12 키를 눌러 Internet Explorer 개발자 도구를 열고 문서 모드를 클릭하여 IE10 표준으로 변경합니다.

연습 2: HTML 편집기에서 새로운 기능

Visual Studio에는 향상된 HTML 편집기가 있습니다. 이 버전에 포함된 향상된 기능 중 일부는 HTML 문서의 스마트 들여쓰기, HTML5 코드 조각, HTML 시작 및 끝 태그 일치 및 HTML 유효성 검사입니다. 이 연습에서는 웹 사이트 태그에서 작업할 때 이러한 변경 내용이 어떻게 유창함을 향상시키는지 확인할 수 있습니다.

CSS 편집기처럼 HTML 편집기도 개선되었습니다. 이러한 개선 사항의 대부분은 웹 개발자의 삶을 더 쉽게 만드는 작은 기능입니다. HTML 5에 대한 더 많은 코드 조각, 스마트 들여쓰기, HTML 문서 DOCTYPE을 대상으로 하는 편집 및 유효성 검사 시 시작 및 끝 태그 일치와 같은 몇 가지 개선 사항이 있습니다.

작업 1 - 향상된 DOCTYPE 유효성 검사

이제 HTML 편집기에서 정의가 마스터 페이지에 있을 수 있더라도 페이지의 DOCTYPE을 확인할 수 있습니다. 페이지의 DOCTYPE에 따라 HTML 편집기에서 올바른 규칙 집합으로 유효성을 검사하고 DOCTYPE 요소를 고려하여 IntelliSense 목록을 필터링합니다.

이 작업에서는 페이지의 DOCTYPE을 변경하여 HTML 편집기 동작이 그에 따라 어떻게 변경되는지 확인합니다.

아직 열지 않은 경우 Visual Studio를 시작하고 이 랩의 Source\WhatsNewASPNET 폴더에 있는 WhatsNewASPNET.sln 솔루션을 엽니다.
Site.Master 페이지를 엽니다.
유효성 검사 도구 모음에 대한 대상 스키마를 확인합니다. HTML 편집기가 동작하는 방식(유효성 검사, IntelliSense 등)은 선택한 Doctype에 맞게 올바르게 변경됩니다.

HTML 원본 편집 도구 모음에서 Doctype 사용
대상 스키마를 HTML 4.01로 변경합니다.

HTML 원본 편집 도구 모음에서 Doctype 변경
본문 요소 아래에 커서를 놓고 HTML5 요소의 이름(예: 비디오)을 입력하기 시작합니다. IntelliSense 목록에서 요소를 사용할 수 없습니다.

HTML5 요소가 나열되지 않음
드롭다운 목록에서 DOCTYPE: XHTML5를 선택하여 유효성 검사 도구 모음의 대상 스키마에 대한 변경 내용을 실행 취소합니다.

HTML 원본 편집 도구 모음에서 Doctype 다시 설정
본문 요소 아래에 커서를 놓고 HTML5 요소(예: 비디오)를 다시 입력하기 시작합니다. 이제 IntelliSense 목록에서 HTML5 요소를 사용할 수 있습니다.

나열되는 HTML5 요소

작업 2 - 시작/끝 태그 자동 업데이트

이제 Visual Studio는 편집 중인 요소의 HTML 열기 또는 닫는 태그를 서로 일치하도록 업데이트합니다. 이 새로운 기능은 HTML 태그를 편집할 때 생산성을 향상시킵니다.

Default.aspx 페이지에서 제목이 있는 H3 요소를 추가합니다(예: Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

H3 태그를 변경하고 H2 또는 H1을 입력합니다.

끝 태그가 자동으로 업데이트됩니다. 끝 태그를 수정하여 시작 태그도 적절하게 업데이트되는지 확인할 수도 있습니다.

끝 태그 자동 업데이트

작업 3 - 새 HTML5 코드 조각

이제 Visual Studio에는 여러 HTML5 코드 조각이 포함되어 있습니다. 이 작업에서는 이러한 코드 조각 중 일부를 사용합니다.

오디오라는 새 폴더를 웹 사이트 폴더의 루트에 추가합니다. Windows 탐색기를 열고 오디오 파일을 WhatsNewASPNET.sln 솔루션의 오디오 폴더에 복사합니다.
Default.aspx 페이지에서 Web11 Rocks에서 커서를 찾습니다. 헤더. 오디오를 입력하고 TAB 키를 누릅니다.

새 HTML 편집기에서는 HTML5 콘텐츠에 대한 코드 조각을 포함합니다. 적절한 DOCTYPE 정의를 사용하여 HTML5 코드 조각을 사용하도록 설정해야 합니다.

HTML5 코드 조각 삽입

기존 오디오 파일을 가리키도록 오디오 원본을 업데이트합니다.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

참고 항목

솔루션에 오디오 파일을 추가해야 합니다.

F5 키를 눌러 사이트를 실행하고 오디오를 재생합니다.

오디오 컨트롤 실행

참고 항목

비디오, 그림 등 Visual Studio에 포함된 더 많은 코드 조각을 사용해 볼 수도 있습니다.
이제 페이지의 일부 부분에 컨트롤을 삽입해 봅니다. 예를 들어 GridView 컨트롤을 삽입하려고 하지만 Gri를 입력하는 <대신 GV 입력을 시작합니다<. IntelliSense 목록에 asp:GridView 컨트롤이 표시됩니다.

이제 HTML 편집기에서 IntelliSense는 제목 대/소문자 검색뿐만 아니라 부분 일치(용어를 포함하는 모든 요소 검색)를 제공합니다.

IntelliSense 목록을 사용하여 GridView 삽입

그리드를 입력<하면 용어와 일치하는 모든 항목이 표시되지만 Visual Studio에서 gridview 컨트롤을 제안합니다.

IntelliSense 목록 및 부분 일치를 사용하여 GridView 삽입

작업 4 - HTML 편집기 스마트 태그

HTML 편집기에서 향상된 또 다른 기능은 스마트 태그 기능입니다. 스마트 태그를 사용하면 컨트롤별로 일반 또는 반복적인 개발 작업을 쉽게 수행할 수 있습니다. 이 기능은 HTML 디자이너에서 이미 사용할 수 있지만 HTML 편집기에서는 사용할 수 없습니다.

Site.Master를 열고 asp:Menu 요소를 찾습니다. 시작 태그에 커서를 놓고 요소 아래쪽에 작은 문자 모양이 표시되는 것을 확인합니다. 이를 클릭하여 스마트 작업 메뉴를 엽니다. 메뉴 컨트롤과 관련된 일부 작업에 빠르게 액세스할 수 있습니다.

메뉴 컨트롤에 대한 스마트 작업

작업 5 - 스마트 들여쓰기

HTML의 모범 사례 중 하나는 코드를 읽을 수 있도록 중첩된 요소를 압축하는 것입니다. Visual Studio 2012에서는 코드를 작성하는 동안 편집기에서 요소를 자동으로 들여쓰는 것을 볼 수 있습니다.

참고 항목

이전 버전의 Visual Studio에서는 XML 편집기에서 스마트 들여쓰기를 사용할 수 있었지만 HTML 편집기에서는 사용할 수 없었습니다.

HTML 편집기에서 들여쓰기 구성이 스마트 들여쓰기로 설정되어 있는지 확인합니다. 이렇게 하려면 도구 |를 선택합니다. 옵션 메뉴 옵션을 선택한 다음 텍스트 편집기 | HTML | 화면의 왼쪽 창에 있는 탭 페이지입니다. 스마트 들여쓰기 옵션을 선택합니다.

HTML 편집기 설정
Default.aspx 페이지에서 오디오 요소 아래의 모든 콘텐츠를 제거합니다.
여 는 오디오 요소의 끝에 커서를 놓고 Enter 키를 누릅니 다.

커서의 새 위치에는 추가 들여쓰기 수준이 있습니다.

HTML 편집기에서 스마트 들여쓰기
제거한 콘텐츠로 오디오 태그를 복원하거나 변경 내용을 저장하지 않고 Default.aspx 닫습니다.

작업 6 - 사용자 정의 컨트롤로 추출

함수에 코드의 일부를 추출하는 등 Visual Studio에 포함된 리팩터링 도구는 기존 코드의 개선 및 리팩터링을 용이하게 하는 훌륭한 기능입니다. ASP.NET 페이지에 대한 대응은 사용자 컨트롤에 대한 HTML 코드를 추출하는 것입니다. 수동으로 수행하려면 새 사용자 컨트롤을 만들고, 코드 섹션을 사용자 컨트롤로 이동하고, 사용자 컨트롤에 대한 태그 접두사를 등록하고, 마지막으로 페이지에서 사용자 컨트롤을 인스턴스화하는 등의 몇 가지 단계가 포함됩니다. 이제 새 사용자 제어 로 추출 도구가 자동으로 모든 단계를 수행합니다.

이 작업에서는 사용자 컨트롤에 대한 새 추출 컨텍스트 작업을 사용하여 선택한 코드에서 새 사용자 컨트롤을 생성합니다.

Default.aspx 페이지에서 H2 및 오디오 요소를 선택합니다.
마우스 오른쪽 단추를 클릭하고 사용자 컨트롤로 추출을 선택합니다.

사용자 제어 메뉴 옵션으로 추출
새 사용자 정의 컨트롤의 이름을 입력합니다. 예를 들어 Jukebox.ascx를 클릭한 다음 확인을 클릭합니다.

추출된 사용자 컨트롤 저장
선택한 코드가 사용자 컨트롤에 추출되었고 선택한 코드의 원래 위치가 새 사용자 컨트롤의 인스턴스로 바뀌었습니다.

새 사용자 컨트롤을 사용하도록 페이지가 자동으로 업데이트됨
F5 키를 눌러 페이지를 실행하고 컨트롤이 작동하는지 확인합니다.

연습 3: JavaScript 편집기에서의 새로운 기능

JavaScript 코드를 작성하거나 편집하는 것은 쉬운 일이 아닙니다. 특히 애플리케이션의 크기가 커지도록 시작하고 긴 파일과 수백 개의 함수를 직접 처리하는 경우 더욱 그렇습니다. 스크립트 개발자는 일반적으로 코드 가독성을 유지하고 파일을 탐색하기 위해 몇 가지 추가 작업을 수행해야 합니다. jQuery와 같은 JavaScript 라이브러리가 포함되면서 코드 길이 때문에 스크립트 탐색 자체가 문제가 되었습니다.

Visual Studio는 코드 모드에 액세스하고 구성하도록 약속과 함께 JavaScript 편집기를 갱신했습니다. C# 또는 VB 편집기에서 이미 존재했던 많은 Visual Studio 기능이 이제 JavaScript 편집기인 정의로 이동, 자동 들여쓰기, 설명서 및 유효성 검사에서 구현됩니다. 갱신된 IntelliSense 목록을 사용하면 JavaScript 함수 카탈로그를 손쉽게 확인할 수 있습니다.

이 연습에서는 JavaScript 편집기의 새로운 기능 및 향상된 기능 중 일부를 알아봅니다. 샘플 파일을 찾아보고 Visual Studio 2012 내에서 JavaScript 프로그래밍을 보다 효율적으로 만드는 새로운 각 특성을 검색합니다.

작업 1 - JavaScript 편집기 새 기능

이 작업에서는 코드를 구성하고 더 나은 사용자 환경을 제공하는 데 중점을 둔 몇 가지 새로운 JavaScript 편집기 기능을 소개합니다.

아직 열지 않은 경우 Visual Studio를 시작하고 이 랩의 Source\WhatsNewASPNET 폴더에 있는 WhatsNewASPNET.sln 솔루션을 엽니다.
F5 키를 눌러 애플리케이션을 실행한 다음 탐색 모음에서 JavaScript 링크를 클릭합니다. 페이지를 여러 번 새로 고치고 카운터가 어떻게 증가되는지 확인합니다.

페이지 카운터
브라우저를 닫고 Visual Studio로 돌아갑니다.
JavaScript.aspx 페이지를 열고 스크립트> 블록을 찾<습니다(아래 참조).

다음 코드는 HTML5 로컬 스토리지를 사용하여 현재 사용자가 페이지를 방문한 횟수를 저장하는 pageLoadCount 변수를 저장합니다. 로컬 스토리지는 HTML5 표준으로 도입된 클라이언트 쪽 키-값 데이터베이스입니다. 데이터는 로컬 컴퓨터의 사용자 브라우저 내에 저장됩니다.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
참고 항목

다음 단계를 진행하기 전에 DOCTYPE이 XHTML5로 설정되어 있는지 확인합니다.
코드를 편집하고 JavaScript용 IntelliSense에는 로컬 스토리지와 같은 HTML5 기능 및 내부 메서드가 포함되어 있습니다.

JavaScript의 HTML5 JavaScript 기능
스크립팅 코드에서 여는 대괄호({)를 클릭하면 대괄호가 강조 표시됩니다.

대괄호가 강조 표시됨
testAutoAlign() 함수의 주석 처리를 제거합니다(세 줄을 선택하면 Ctrl + K를 사용할 수 있습니다.Ctrl + U) 함수 코드 내에서 커서를 찾습니다. Enter 키를 눌러 두 번째 줄을 추가합니다. 이제 코드가 정렬되고 자동으로 들여쓰기됩니다.

JavaScript 코드가 자동으로 정렬됨

작업 2 - JavaScript 유효성 검사

이 작업에서는 ECMAScript5 표준에 대한 새 JavaScript 유효성 검사를 검색합니다. 이 기능은 사이트 배포 전에 스크립팅 문제를 방지하면서 규격 JavaScript 코드를 작성하는 데 도움이 됩니다.

참고 항목

Visual Studio 2010은 ECMAStript3 규정 준수를 구현했으며 Visual Studio 2012는 ECMAScript5 규정 준수를 제공합니다.

Scripts\custom 프로젝트 폴더 아래에 있는 ECMA5script5.js 엽니다. 이제 ECMAScript5 표준에 대한 유효성 검사를 테스트합니다.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
파일의 첫 번째 줄에서 " use strict " 방향을 체크 아웃하여 ECMAScript5 strict 모드를 사용하도록 설정할 수 있습니다. 이 모드는 이전 버전의 모호성을 명확히 하는 언어의 하위 집합으로 구성되며 getter 및 setter, JSON에 대한 라이브러리 지원 및 개체 속성에 대한 보다 완전한 리플렉션과 같은 몇 가지 새로운 기능을 추가합니다.
아직 열지 않은 경우 오류 목록 열기(보기 메뉴 | 오류 목록). 함수 선언에 밑줄이 표시됩니다. ECMA5 표준 함수는 언어 구조 내에 중첩될 수 없기 때문입니다. 아래 오류 목록에 경고 세부 정보가 표시됩니다.

JavaScript 유효성 검사 오류 메시지
"use strict" 방향을 주석으로 처리하고 오류가 사라지지만 경고는 남아 있습니다.
파일의 마지막 줄에서 "test"와 같은 문자열을 씁니다(문자열임을 나타내는 따옴표 포함). 문자열 옆에 마침표를 작성하여 IntelliSense 목록을 표시하고 트리밍 옵션을 선택합니다.

ECMAScript5 표준에서 문자열 값 및 변수에는 트리밍, 대문자, 검색 및 바꾸기와 같은 문자열 메서드도 정의되어 있습니다.

JavaScript의 IntelliSense 목록

작업 3 - JavaScript용 XML 설명서

이 작업에서는 JavaScript의 XML 설명서에 대한 Visual Studio 기능을 탐색합니다. 이제 JavaScript IntelliSense 목록에 각 함수의 XML 설명서가 표시됩니다. 또한 JavaScript에서 탐색 기능을 검색합니다.

스크립트/사용자 지정 프로젝트 폴더에 있는 XMLDoc.js 파일을 엽니다. 이 파일에는 각 JavaScript 함수에 대한 XML 설명서가 포함되어 있습니다.

IntelliSense에 통합된 JavaScript XML 설명서
아래에서 XMLDoc.js 파일에 함수를 추가하고 테스트라는 새 함수를 만듭니다.
테스트 함수에서 두 개의 매개 변수를 수신하는 multiply 함수를 호출합니다. 도구 설명 상자에 곱하기 함수 설명서가 표시됩니다.
```
function test() {
  multiply(
}
```
JavaScript 함수에 대한 XML 설명서
함수 호출 문을 완료하고 점을 입력하여 반환된 값에서 IntelliSense 목록을 엽니다. Visual Studio는 설명서에서 반환 값을 검색하여 값을 숫자로 처리합니다.

반환 형식에 대한 XML 설명서
이제 함수를 추가하는 호출을 삽입합니다. 이제 JavaScript 편집기에서 함수 오버로드를 지원합니다. 함수 이름을 작성하면 설명서에 지정된 사용 가능한 오버로드를 선택할 수 있습니다.

오버로드에 대한 XML 설명서
GotoDefinition.js 파일을 열고 $().html() 함수 호출을 찾습니다. html에서 커서를 찾습니다.
F12 키를 누르고 정의로 이동합니다. 이제 찾기 도구를 사용하지 않고 JavaScript 코드에 액세스하고 찾아볼 수 있습니다.
코드 파일의 맨 아래에 있는 서명 블록 앞에 있는 jQuery 명령에서 커서를 찾습니다. F12 키를 누릅니 다. jQuery 라이브러리 파일로 이동합니다. F12를 사용하여 jQuery 파일을 탐색할 수도 있습니다.

jQuery 정의 탐색

참고 항목

파일을 저장하기 전에 GotoDefinition.js 구문 오류가 없는지 확인합니다.

연습 4: 번들링 및 축소

웹 사이트에 두 개 이상의 JavaScript 또는 CSS 파일이 포함된 횟수는 몇 번입니까? 이는 묶음 및 축소를 통해 파일 크기를 줄이고 사이트를 더 빠르게 수행할 수 있는 매우 일반적인 시나리오입니다. ASP.NET 4.5의 새로운 번들링 기능은 JS 또는 CSS 파일 집합을 단일 요소로 압축하고 콘텐츠를 축소하여 크기를 줄입니다(즉, 필요하지 않은 공백 제거, 주석 제거, 식별자 감소).

ASP.NET 4.5의 번들링 및 축소는 런타임에 수행되므로 프로세스에서 사용자 에이전트(예: IE, Mozilla 등)를 식별할 수 있으므로 사용자 브라우저를 대상으로 지정하여 압축을 개선할 수 있습니다(예: 요청이 IE에서 오는 경우 Mozilla 관련 항목 제거).

이 연습에서는 ASP.NET 4.5에서 다양한 유형의 묶음 및 축소를 사용하도록 설정하고 사용하는 방법을 알아봅니다.

작업 1 - NuGet에서 번들링 및 축소 패키지 설치

아직 열지 않은 경우 Visual Studio를 시작하고 이 랩의 Source\WhatsNewASPNET 폴더에 있는 WhatsNewASPNET.sln 솔루션을 엽니다.
NuGet 패키지 관리자 콘솔을 엽니다. 이렇게 하려면 메뉴 보기 | 다른 Windows | 패키지 관리자 콘솔을 사용합니다.

패키지 관리자 콘솔 열기
패키지 관리자 콘솔에서 Install-Package Microsoft.Web.Optimization을 입력하고 Enter 키를 누릅니다.

작업 2 - 기본 번들

번들링 및 축소를 사용하는 가장 간단한 방법은 기본 번들을 사용하도록 설정하는 것입니다. 이 메서드는 규칙을 사용하여 폴더의 JS 및 CSS 파일에 대해 번들 및 축소된 버전을 참조할 수 있도록 합니다.

이 작업에서는 번들 및 축소된 JS 및 CSS 파일을 사용하도록 설정하고 참조하고 결과 출력을 보는 방법을 알아봅니다.

아직 열지 않은 경우 Visual Studio를 시작하고 이 랩의 Source\WhatsNewASPNET 폴더에 있는 WhatsNewASPNET.sln 솔루션을 엽니다.
솔루션 탐색기 스타일, Scripts\custom 및 Scripts\bundle 폴더를 확장합니다.

애플리케이션에서 둘 이상의 CSS 및 JS 파일을 사용하고 있습니다.

애플리케이션의 여러 스타일시트 및 JavaScript 파일
Global.asax.cs 파일을 엽니다.

새 Microsoft.Web.Optimization 네임스페이스는 파일의 시작 부분에서 주석 처리됩니다. 묶음 및 축소 기능을 포함하도록 using 지시문의 주석 처리를 제거합니다.
```
using System;
using Microsoft.Web.Optimization;
```
Application_Start 메서드를 찾습니다.

이 메서드에서는 아래 코드 조각과 같이 EnableDefaultBundles 호출의 주석 처리를 제거합니다. 이렇게 하면 폴더의 경로와 "CSS" 또는 "JS" 접미사를 사용하여 폴더에 있는 CSS 파일의 번들 컬렉션을 참조할 수 있습니다.
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Optimization.aspx 파일을 열고 HeadContent의 콘텐츠 컨트롤을 찾습니다.

CSS 파일과 JS 파일에는 참조된 태그가 하나 있습니다.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
참고 항목

이 코드는 데모용입니다. Site.Master 파일에서 번들을 참조하는 것이 가장 좋습니다. 이 샘플 코드에서는 Site.Master 파일에서 번들된 파일 중 일부를 참조하여 이 마지막 참조를 중복하는 것을 확인할 수 있습니다.
링크는 href 특성의 번들링 규칙을 사용하여 스타일 및 스크립트\사용자 지정 폴더에서 모든 CSS 또는 JS 파일을 각각 가져옵니다.

아래와 같이 경로 스크립트/사용자 지정/JS를 사용하여 스크립트/사용자 지정 폴더 내의 모든 JS 파일을 번들로 묶고 축소할 수 있습니다. 기본 번들의 기본 동작입니다.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Styles\Site.css 파일을 엽니다.

원래 CSS 파일에는 들여쓰기 코드, 빈 공백 및 파일을 확대하는 주석이 포함되어 있습니다. (또한 JavaScript 파일에는 빈 공백과 주석이 포함되어 있습니다).

Scripts 폴더의 원래 CSS 파일 중 하나
F5 키를 눌러 애플리케이션을 실행하고 최적화 페이지로 이동합니다.
CSS 번들 링크를 클릭하여 파일을 다운로드하고 엽니다.

축소된 번들 파일을 확인합니다. 빈 공백, 메모 및 들여쓰기 문자가 모두 제거되어 더 작은 파일이 생성됩니다.

번들된 CSS 파일
이제 JS 번들 링크를 클릭하여 JavaScript 번들 파일을 엽니다. 탐색기 경고를 무시해도 됩니다. 사용자 지정 폴더 아래의 JavaScript 파일도 번들로 묶이고 축소됩니다.

번들된 JavaScript 파일

이전 ASP.NET 버전에서는 CSS 또는 JS 파일에 압축을 사용하도록 설정하는 것이 훨씬 더 복잡했습니다. 이제 본 것처럼 Global.asax 파일에 한 줄을 추가하여 번들링을 사용하도록 설정한 다음 사이트에서 번들 파일을 참조하면 됩니다.

작업 3 - 정적 번들

정적 번들 접근 방식을 사용하면 번들로 묶을 파일 집합, 참조 및 사용할 축소 방법을 사용자 지정할 수 있습니다.

이 작업에서는 번들 및 축소할 특정 파일 집합을 정의하도록 정적 번들을 구성합니다.

브라우저를 닫습니다.
Global.asax.cs 파일을 열고 Application_Start 메서드를 찾습니다.

아래 코드와 같이 정적 번들 코드의 주석 처리를 제거합니다.

"~/StaticBundle" 가상 경로로 참조되는 정적 번들을 정의하고 지정된 모든 파일을 AddFile 메서드로 축소하기 위해 JsMinify를 사용합니다. 마지막으로, BundleTable에 정적 번들을 추가하고 사용하도록 설정합니다.

파일이 같은 위치에 있지 않습니다. 이는 기본 번들링보다 또 다른 이점입니다.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Optimization.aspx 파일을 엽니다.

정적 JS 번들에 대한 링크는 Global.asax.cs 파일에서 정적 번들을 구성할 때 선언한 경로인 /StaticBundle을 사용하고 있습니다.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

F5 키를 눌러 애플리케이션을 실행한 다음 최적화 페이지로 이동합니다.
정적 JS 번들 링크를 클릭하여 파일을 엽니다.

축소된 번들된 JavaScript 파일은 "/StaticBundle" 경로 아래의 정적 번들 파일에 구성된 모든 JavaScript 파일에 대한 출력입니다.

정적 JavaScript 파일 번들
브라우저를 닫고 Visual Studio로 돌아갑니다.

작업 4 - 동적 폴더 번들

이 작업에서는 동적 폴더 번들을 구성하는 방법을 알아봅니다. 동적 번들링의 강력한 점은 정적 JavaScript뿐만 아니라 JavaScript로 컴파일되는 언어의 다른 파일을 포함할 수 있으므로 번들링이 실행되기 전에 약간의 처리가 필요하다는 것입니다.

이 예제에서는 DynamicFolderBundle 클래스를 사용하여 CofeeScript로 작성된 파일에 대한 동적 번들을 만드는 방법을 알아봅니다. CofeeScript는 JavaScript로 컴파일하고 JavaScript 코드를 작성하기 위한 더 간단한 구문을 제공하여 JavaScript의 간결성과 가독성을 향상시키는 프로그래밍 언어입니다.

Global.asax.cs 파일을 열고 Application_Start 메서드를 찾습니다.

아래 코드와 같이 동적 번들 코드의 주석 처리를 제거합니다.

".coffee" 확장명(CoffeeScript 파일)이 있는 파일에만 적용되는 CoffeeMinify 사용자 지정 축소 프로세서를 사용하는 동적 폴더 번들을 정의하고 있습니다. 검색 패턴을 사용하여 '*.coffee'와 같은 폴더 내에서 번들로 묶을 파일을 선택할 수 있습니다.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

NuGet 패키지 관리자 콘솔을 엽니다. 이렇게 하려면 메뉴 보기 | 다른 Windows | 패키지 관리자 콘솔을 사용합니다.
패키지 관리자 콘솔에서 Install-Package CoffeeSharp를 입력하고 Enter 키를 누릅니다.
솔루션 탐색기 창에서 모든 파일 표시 단추를 클릭합니다.

모든 파일 표시
솔루션 탐색기 CoffeeMinify.cs 파일을 마우스 오른쪽 단추로 클릭하고 프로젝트에 포함을 선택합니다.

프로젝트에 CoffeeMinify.cs 파일 포함
CoffeeMinify.cs 파일을 엽니다.

이 클래스는 JsMinify에서 상속되어 CoffeeScript 코드 컴파일로 인한 JavaScript 출력을 축소합니다. 먼저 CoffeeScript 컴파일러를 호출하여 JavaScript 코드를 생성한 다음 JsMinify.Process 메서드로 보내 결과 코드를 축소합니다.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
스크립트/번들 폴더에서 Script1.coffee 및 Script2.coffee 파일을 엽니다.

이러한 파일에는 CoffeeMinify 클래스를 사용하여 번들링을 수행하는 동안 컴파일할 CoffeScript 코드가 포함됩니다.

간단히 하기 위해 제공된 CoffeeScript 파일은 CoffeeScript 샘플 코드만 포함합니다. 주석은 JsMinify 프로세스에서 제외됩니다.

CoffeeScript 파일

참고 항목

CofeeScript 는 JavaScript 코드를 작성하고, JavaScript의 간결성과 가독성을 향상하고, 배열 이해 및 패턴 일치와 같은 다른 기능을 추가하는 간단한 구문을 제공합니다.

Optimization.aspx 파일을 열고 번들 링크를 찾습니다.

동적 JS 번들에 대한 링크는 동적 폴더 번들에 대해 구성한 /Coffee 접미사를 사용하여 스크립트/번들 폴더를 참조합니다.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

F5 키를 눌러 애플리케이션을 실행한 다음 최적화 페이지로 이동합니다.
동적 JS 번들 링크를 클릭하여 생성된 파일을 엽니다.

이 번들에 포함된 콘텐츠에는 .coffee 파일만 포함됩니다. CoffeeScript 코드가 JavaScript로 컴파일되고 주석 처리된 줄이 제거되었음을 확인할 수도 있습니다.

동적 JS 파일 번들

참고 항목

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

요약

이 랩은 Visual Studio 2012의 ASP.NET 및 웹 개발의 새로운 기능과 Visual Studio 2012의 다양한 향상된 기능을 활용하는 방법을 이해하는 데 도움이 됩니다.

이 실습 랩을 완료하여 CSS, JavaScript 및 HTML용 Visual Studio 2012 편집기에서 새로운 기능과 향상된 기능을 사용하는 방법을 알아봅니다. 또한 Visual Studio 2012에서 기본 제공 번들 및 축소를 구현하는 방법을 알아봅니다.

부록 A: 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 타일

부록 B: 웹 배포를 사용하여 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에 게시된 애플리케이션