비주얼 스튜디오를 사용하여 웹 페이지(Razor)ASP.NET 프로그래밍Programming ASP.NET Web Pages (Razor) Using Visual Studio

Tom FitzMackenby Tom FitzMacken

이 문서에서는 Visual Studio 또는 Visual Web Developer Express를 사용하여 ASP.NET 웹 페이지(Razor) 웹 사이트를 프로그래밍하는 방법을 설명합니다.This article explains how you can use Visual Studio or Visual Web Developer Express to program ASP.NET Web Pages (Razor) websites.

학습할 내용What you'll learn

  • Visual Studio 버전의 ASP.NET 웹 페이지로 작업하려면 설치해야 하는 사항(있는 경우).What you need to install (if anything) to work with ASP.NET Web Pages in your version of Visual Studio.
  • 비주얼 웹 개발자 2010 익스프레스에 ASP.NET 웹 페이지에 대 한 지원을 추가 하는 방법.How to add support for ASP.NET Web Pages to Visual Web Developer 2010 Express.
  • IntelliSense 및 디버거를 포함하여 ASP.NET Razor 페이지와 함께 작업하는 비주얼 스튜디오에서 기능을 사용하는 방법.How to use features in Visual Studio to work with ASP.NET Razor pages, including IntelliSense and the debugger.

튜토리얼에 사용되는 소프트웨어 버전Software versions used in the tutorial

  • ASP.NET 웹 페이지 (면도기) 3ASP.NET Web Pages (Razor) 3
  • Visual Studio 2013Visual Studio 2013
  • 웹 매트릭스 3WebMatrix 3

이 자습서에서는 ASP.NET 웹 페이지 2, Visual Studio 2012, Visual Studio 2010 및 WebMatrix 2에서도 작동합니다.This tutorial also works with ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010, and WebMatrix 2.

WebMatrix 또는 다른 많은 코드 편집기에서 Razor 구문으로 ASP.NET 웹 페이지를 프로그래밍할 수 있습니다.You can program ASP.NET Web pages with Razor syntax using WebMatrix or many other code editors. 또한 웹 사이트뿐만 아니라 다양한 유형의 응용 프로그램을 만들기 위한 강력한 도구 집합을 제공하는 IDE(모든 기능을 갖춘 통합 개발 환경)인 Microsoft Visual Studio를 사용할 수도 있습니다.You can also use Microsoft Visual Studio which is a full-featured integrated development environment (IDE) that provides a powerful set of tools for creating many types of applications (not just websites). ASP.NET Razor 페이지로 작업하려면 Visual Studio 2017을사용할 수 있습니다.To work with ASP.NET Razor pages, you can use Visual Studio 2017.

Visual Studio에서 Razor 웹 페이지를 ASP.NET 프로그래밍에 제공하는 두 가지 유용한 기능은 다음과 같습니다.Two particularly useful features that Visual Studio provides for programming with ASP.NET Razor web pages are:

  • 인텔리센스.IntelliSense. 비주얼 스튜디오에 내장 된 IntelliSense 기능은 웹 매트릭스에서 IntelliSense보다 더 포괄적이다.The IntelliSense feature built into Visual Studio is more comprehensive than IntelliSense in WebMatrix.
  • 디버거.Debugger. 디버거를 사용하면 프로그램을 실행하는 동안 중지하고, 변수를 검사하고, 코드 줄을 한 줄씩 단계별로 단계별로 실행하여 코드 문제를 해결할 수 있습니다.The debugger lets you troubleshoot your code by stopping a program while it's running, examining variables, and stepping through the code line by line.

ASP.NET 웹 페이지의 다른 버전과 함께 Visual Studio 사용Using Visual Studio with Different Versions of ASP.NET Web Pages

Visual Studio 2017에서 ASP.NET 웹 앱을 개발하려면 ASP.NET 및 웹 개발 워크로드를 설치합니다.To develop ASP.NET web apps in Visual Studio 2017, install the ASP.NET and web development workload.

Visual Studio 2012 및 Visual Studio 2013에는 ASP.NET 웹 페이지에 대한 지원이 포함되어 있습니다.Visual Studio 2012 and Visual Studio 2013 include support for ASP.NET Web Pages. (ASP.NET 웹 페이지를 지원하기 위해 필요한 패키지는 Visual Studio를 설치할 때 설치됩니다.)(The packages that are required in order to support ASP.NET Web Pages are installed when you install Visual Studio.)

Visual Studio 2010에는 ASP.NET 웹 페이지에 대한 지원이 기본적으로 포함되지 않습니다.Visual Studio 2010 does not include support by default for ASP.NET Web Pages. Visual Studio 2010에서 ASP.NET 웹 페이지를 사용하려면 ASP.NET MVC 패키지를 설치해야 합니다.To use ASP.NET Web Pages with Visual Studio 2010, you must install the ASP.NET MVC package. 웹 페이지 2를 ASP.NET 위해 MVC 4를 ASP.NET 설치합니다.To get ASP.NET Web Pages 2, you install ASP.NET MVC 4.

다음 표에는 여러 버전의 Visual Studio에서 ASP.NET 웹 페이지에 대한 지원이 요약되어 있습니다.The following table summarizes the support for ASP.NET Web Pages in different versions of Visual Studio.

Visual Studio 2010Visual Studio 2010 Visual Studio 2012Visual Studio 2012 Visual Studio 2013Visual Studio 2013
ASP.NET 웹 페이지 2ASP.NET Web Pages 2 MVC 4에 ASP.NET 설치Install ASP.NET MVC 4 (포함)(Included) (포함)(Included)
ASP.NET 웹 페이지 3ASP.NET Web Pages 3 NuGet을 통해 ASP.NET 웹 페이지 3으로 업데이트Update to ASP.NET Web Pages 3 through NuGet (포함)(Included)

Visual Studio 2010에서 작업하려면 Visual Studio 2010의 ASP.NET 웹 페이지에 대한 지원 설치를참조하십시오.To work with Visual Studio 2010, see Installing Support for ASP.NET Web Pages in Visual Studio 2010.

웹매트릭스에서 비주얼 스튜디오 시작Launching Visual Studio from WebMatrix

WebMatrix에서 프로젝트를 시작하고 Visual Studio로 전환하려는 경우 WebMatrix는 Visual Studio에서 프로젝트를 쉽게 열 수 있는 단추를 제공합니다.If you have started a project in WebMatrix and want to switch to Visual Studio, WebMatrix provides a button to easily open the project in Visual Studio. 이 단추를 사용하려면 컴퓨터에 Visual Studio가 설치되어 있어야 합니다.You must have Visual Studio installed on your computer for this button to be enabled. 다음 이미지는 WebMatrix의 단추를 보여 주며,The following image shows the button in WebMatrix.

비주얼 스튜디오 시작

단추를 클릭하면 프로젝트가 Visual Studio에서 열립니다.When you click the button, the project is opened in Visual Studio. WebMatrix와 Visual Studio 간에 아무런 문제 없이 앞뒤로 전환할 수 있습니다.You can switch back and forth between WebMatrix and Visual Studio without any problems. 다른 환경에서 파일이 변경되었으며 최신 변경 내용을 얻으려면 다시 로드해야 하는 경우 알림을 받게 됩니다.You will be notified if any files have changed in the other environment and need to be reloaded to get the latest changes.

비주얼 스튜디오에서 ASP.NET 면도기 사이트 만들기Creating ASP.NET Razor Site in Visual Studio

Visual Studio에서 ASP.NET Razor 웹 사이트를 만들려면 다음 단계를 수행하십시오.To create an ASP.NET Razor website in Visual Studio:

  1. Visual Studio를 엽니다.Open Visual Studio.

  2. 파일 메뉴에서 새 웹 사이트를클릭합니다.In the File menu, click New Web Site.

    새 웹 사이트 만들기

  3. 웹 사이트 대화 상자에서 사용할 언어(Visual C# 또는 Visual Basic)를 선택합니다.In the New Web Site dialog box, select the language to use (Visual C# or Visual Basic).

  4. ASP.NET 웹 사이트(Razor) 템플릿을 선택합니다.Select the ASP.NET Web Site (Razor) template.

    면도기 사이트

  5. 확인을 클릭합니다.Click OK.

새 프로젝트가 존재하며 시작하는 데 도움이 되는 몇 가지 기본 웹 페이지가 채워집니다.Your new project exists and is populated with some default web pages to help you get started.

IntelliSense 사용Using IntelliSense

이제 사이트를 만들었으니 Visual Studio에서 IntelliSense가 어떻게 작동하는지 확인할 수 있습니다.Now that you've created a site, you can see how IntelliSense works in Visual Studio.

  1. 방금 만든 웹 사이트에서 Default.cshtml 페이지를 엽니다.In the website you just created, open the Default.cshtml page.

  2. 페이지의 <h3> 태그 후 점 포함을 입력합니다. @ServerInfo.After the <h3> tags in the page, type @ServerInfo. (including the dot). IntelliSense가 드롭다운 목록에서 ServerInfo 도우미에 사용할 수 있는 메서드를 표시하는 방법을 확인합니다.Notice how IntelliSense displays the available methods for the ServerInfo helper in a drop-down list.

    Intellisense

  3. 목록에서 GetHtml 메서드를 선택한 다음 Enter를 누릅니다.Select the GetHtml method from the list and then press Enter. IntelliSense는 자동으로 메서드를 채웁니다.IntelliSense automatically fills in the method. C#의 모든 메서드와 마찬가지로 메서드 () 다음의 문자를 추가해야 합니다. 메서드에 GetHtml 대 한 완료 된 코드는 다음과 같습니다.(As with any method in C#, you must add () characters after the method.) The completed code for the GetHtml method looks like the following example:

    @ServerInfo.GetHtml()
    
  4. 페이지를 실행하려면 Ctrl+F5를 누릅니다.Press Ctrl+F5 to run the page. 브라우저에 표시될 때 페이지의 모양은 다음과 같습니다.This is what the page looks like when displayed in a browser:

    브라우저의 기본 페이지

  5. 브라우저를 닫습니다.Close the browser.

디버거 사용Using the Debugger

  1. Default.cshtml 페이지 의 맨 위에 는 Page.Title로 시작하는 줄 다음에 다음 코드 줄을 추가합니다.At the top of the Default.cshtml page, after the line that begins with Page.Title, add the following line of code:

    var myTime = DateTime.Now.TimeOfDay;
    
  2. 코드 왼쪽에 있는 편집기의 회색 여백에서 이 새 줄 옆을 클릭하여 중단점을 추가합니다.In the gray margin of the editor to the left of the code, click next to this new line in order to add a breakpoint. 중단점은 디버거에게 해당 시점에서 프로그램 실행을 중지하도록 지시하는 마커이므로 무슨 일이 일어나고 있는지 확인할 수 있습니다.A breakpoint is a marker that tells the debugger to stop running the program at that point so you can see what's happening.

    중단점 설정

  3. ServerInfo.GetHtml 메서드에 대한 호출을 제거하고 해당 위치에 @myTime 있는 변수에 호출을 추가합니다.Remove the call to the ServerInfo.GetHtml method, and add a call to the @myTime variable in its place. 이 호출은 새 코드 줄에서 반환되는 현재 시간 값을 표시합니다.This call displays the current time value that's returned by the new line of code.

  4. F5를 눌러 디버거에서 페이지를 실행합니다.Press F5 to run the page in the debugger. 페이지는 설정한 중단점에서 중지됩니다.The page stops on the breakpoint that you set. 다음 이미지는 중단점(노란색)이 있는 편집기에서 페이지의 모양을 보여 주며 있습니다.The following image shows what the page looks like in the editor with the breakpoint (in yellow).

    디버그 중단점

  5. 디버그 도구 모음에서 단계 입력 단추(또는 F11 를 누르기)를 클릭하여 다음 코드 줄을 실행합니다.In the Debug toolbar, click the Step Into button (or press F11) to run the next line of code. 이 단추를 클릭할 때마다 다음 코드 줄로 실행을 진행합니다.Each time you click this button, you advance the execution to the next line of code.

    버튼으로 단계

  6. 마우스 포인터를 myTime 위에 놓거나 지역 변수콜 스택 창에 표시된 값을 검사하여 변수값을 검사합니다.Examine the value of the myTime variable by holding your mouse pointer over it or by inspecting the values displayed in the Locals and Call Stack windows. Visual Studio는 변수의 값을 표시합니다.Visual Studio display the value of the variable.

    시간 값 표시

  7. 변수를 검사하고 코드를 단계별로 실행하면 F5를 눌러 각 줄에서 멈추지 않고 페이지를 계속 실행합니다.When you're done examining the variable and stepping through code, press F5 to continue running the page without stopping at each line. 모든 코드를 단계적 단계적 단계로 완료하면 브라우저에 페이지가 표시됩니다.When you've finished stepping through all the code, the browser displays the page.

디버거 및 Visual Studio에서 코드를 디버깅하는 방법에 대한 자세한 내용은 연습: 비주얼 웹 개발자의 웹 페이지 디버깅을참조하십시오.To learn more about the debugger and about how to debug code in Visual Studio, see Walkthrough: Debugging Web Pages in Visual Web Developer.

비주얼 스튜디오와 ASP.NET MVC 프로젝트에서 면도기 사용Using Razor in ASP.NET MVC projects with Visual Studio

Razor 구문은 ASP.NET MVC 프로젝트에서도 광범위하게 사용됩니다.The Razor syntax is also used extensively in ASP.NET MVC projects. MVC는 동적 웹 사이트를 구축하는 강력한 패턴 기반 방법입니다.MVC is a powerful, patterns-based way to build dynamic websites. ASP.NET 웹 페이지 사이트를 유지 관리하기 어려워지면 ASP.NET MVC 응용 프로그램으로 변환하는 것이 좋습니다.If your ASP.NET Web Pages site becomes difficult to maintain, you might want to consider converting it to an ASP.NET MVC application. MVC 응용 프로그램을 만드는 예제는 ASP.NET MVC 5로 시작하기 를참조하십시오.For an example of creating an MVC application, see Getting Started with ASP.NET MVC 5.

Visual Studio 2010에서 ASP.NET 웹 페이지에 대한 지원 설치Installing Support for ASP.NET Web Pages in Visual Studio 2010

이 섹션에서는 Visual Web Developer Express 2010 및 ASP.NET 웹 페이지 도구를 시각적 스튜디오용으로 설치하는 방법을 보여 주며, 이 섹션에서는 다음과 같은 방법을 설명합니다.This section shows how to install Visual Web Developer Express 2010 and the ASP.NET Web Pages Tools for Visual Studio.

  1. 웹 플랫폼 설치 관리자가 아직 없는 경우 다음 URL에서 다운로드합니다.If you don't already have the Web Platform Installer, download it from the following URL:

    https://www.microsoft.com/web/downloads/platform.aspx

  2. 웹 플랫폼 설치 관리자를 실행합니다.Run the Web Platform Installer.

  3. 제품 탭을 클릭합니다.Click the Products tab.

    웹PI 제품 탭

  4. ASP.NET MVC 4(ASP.NET 웹 페이지 2의 경우)를 검색한 다음 에 추가를클릭합니다.Search for ASP.NET MVC 4 (for ASP.NET Web Pages 2) and then click Add. 이러한 제품에는 ASP.NET Razor 웹 사이트를 구축하기 위한 Visual Studio 도구가 포함됩니다.These products include Visual Studio tools for building ASP.NET Razor websites.

    WebPi 설치 옵션

  5. 설치를 Install 클릭하여 설치를 완료합니다.Click Install to complete the installation.