연습: Visual Web Developer에서 코드 분리를 사용한 기본 웹 페이지 만들기

아티클
08/20/2008

업데이트: 2007년 11월

ASP.NET 웹 페이지를 만들고 내부에 코드를 작성할 때는 보이는 요소(컨트롤, 텍스트) 및 프로그래밍 코드 관리 방법에 대한 두 가지 모델 중에서 선택할 수 있습니다. 단일 파일 모델에서는 보이는 요소와 코드가 동일한 파일에 유지됩니다. "코드 분리"라는 대체 모델에서는 보이는 요소와 코드가 서로 다른 파일에 있으며 코드는 "코드 숨김"이라는 파일에 있습니다. 이 연습에서는 코드 분리를 사용하는 웹 페이지에 대해 설명합니다.

단일 파일 모델에 대해서는 연습: Visual Web Developer에서 기본 웹 페이지 만들기에서 설명합니다. 이 연습에서는 단일 파일 연습의 페이지와 동일한 기능을 가진 웹 페이지를 만드는 방법에 대해 설명하지만 코드 분리 사용에 중점을 둡니다.

단일 파일 페이지와 코드 분리 페이지의 선택 여부는 주로 개인적인 기호나 편리성에 따라 결정됩니다. Microsoft Visual Web Developer에서는 두 모델의 작업 방법이 비슷하며 편집기의 지원이 거의 동일합니다. 페이지를 실행할 때 두 모델의 성능은 같습니다. 코드 분리 페이지를 사용하면 두 페이지를 개별적으로 편집할 수 있기 때문에 프로그래머가 페이지 코드를 만드는 동안 웹 디자이너가 보다 효율적으로 페이지 레이아웃 작업을 할 수 있습니다.

이 연습에서 수행할 작업은 다음과 같습니다.

Visual Web Developer에서 코드 분리를 사용하는 ASP.NET 페이지 만들기
컨트롤 추가
이벤트 처리기 추가
ASP.NET Development Server를 사용하여 페이지 실행

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

Visual Web Developer 및 .NET Framework

웹 사이트 및 페이지 만들기

이 연습 단계에서는 웹 사이트를 만들고 새 페이지를 추가합니다. 또한 HTML 텍스트를 추가하고 웹 브라우저에서 페이지를 실행합니다.

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 이 연습의 뒷부분에 있는 "새 페이지 만들기"로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\BasicWebSite를 입력합니다.
언어 목록에서 Visual Basic 또는 Visual C#을 클릭합니다.

참고:

Visual Web Developer에서는 현재 Visual J#으로 코드 숨김 페이지 작성을 지원하지 않습니다.

선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
확인을 클릭합니다.

Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

참고:
Visual Web Developer에서는 현재 Visual J#으로 코드 숨김 페이지 작성을 지원하지 않습니다.

새 페이지 만들기

새 웹 사이트를 만들 때 Visual Web Developer는 Default.aspx라는 페이지를 추가합니다. 기본적으로 Visual Web Developer는 코드 분리를 사용하는 페이지를 만듭니다.

코드 분리를 사용하는 페이지를 웹 사이트에 추가하려면

Default.aspx 페이지를 닫습니다. 이렇게 하려면 내부에 파일 이름이 있는 탭을 마우스 오른쪽 단추로 클릭하고 닫기를 선택합니다.
솔루션 탐색기에서 C:\BasicWebSite와 같은 웹 사이트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 선택합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 선택합니다.
이름 상자에 WebPageSeparated를 입력합니다.
언어 목록에서 사용할 프로그래밍 언어(Visual Basic 또는 C#)를 선택합니다.
다른 파일에 코드 입력 확인란이 선택되어 있는지 확인합니다.

이 확인란은 기본적으로 선택되어 있습니다.
추가를 클릭합니다.

Visual Web Developer는 두 개의 파일을 만듭니다. 첫 번째 파일인 WebPageSeparated.aspx에는 페이지의 텍스트와 컨트롤이 포함되고 편집기에서 열립니다. 두 번째 파일인 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs(선택한 프로그래밍 언어에 따라 달라짐)는 코드 파일입니다. 두 파일은 솔루션 탐색기에서 WebPageSeparated.aspx 파일 옆의 더하기 기호(+)를 클릭하여 확인할 수 있습니다. 코드 파일이 생성되었지만 열려 있지는 않습니다. 나중에 이 연습에서 코드를 작성할 때 파일을 엽니다.

페이지에 HTML 추가

이 연습 단계에서는 WebPageSeparated.aspx 페이지에 일부 정적 HTML 텍스트를 추가합니다.

페이지에 텍스트를 추가하려면

문서 창 아래의 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

디자인 뷰는 작업 중인 페이지를 WYSIWYG와 같은 방식으로 표시합니다. 지금은 페이지에 텍스트나 컨트롤이 없으므로 페이지가 비어 있습니다.
삽입 포인터를 페이지에 이미 있는 div 요소에 둡니다.
코드 분리를 사용하여 Visual Web Developer 시작이라는 단어를 입력합니다.
소스 뷰로 전환합니다.

디자인 뷰에서 입력하여 만든 HTML을 볼 수 있습니다. 이 단계에서 페이지는 일반 HTML 페이지와 같이 나타납니다. 유일한 차이점은 페이지 맨 위에 있는 <%@ Page %> 지시문입니다.

컨트롤 추가 및 프로그래밍

이 연습 단계에서는 단추, 텍스트 상자 및 레이블 컨트롤을 페이지에 추가하고 단추의 Click 이벤트를 처리하는 코드를 작성합니다. 단추, 레이블, 텍스트 상자 및 기타 친숙한 컨트롤을 포함하는 서버 컨트롤은 ASP.NET 웹 페이지에 일반적인 폼 처리 기능을 제공합니다. 그러나 클라이언트가 아닌 서버에서 실행되는 코드를 사용하여 컨트롤을 프로그래밍할 수 있습니다.

페이지에 컨트롤을 추가하려면

디자인 탭을 클릭하여 디자인 뷰로 전환합니다.
이전에 추가한 텍스트 뒤에 삽입 포인터를 둡니다.
Enter 키를 여러 번 눌러 공간을 확보합니다.
도구 상자의 표준 탭에서 TextBox 컨트롤, Button 컨트롤 및 Label 컨트롤 모두를 페이지로 끌어 옵니다.
텍스트 상자 앞에 삽입 포인터를 놓고 이름 입력:을 입력합니다.

이 정적 HTML 텍스트는 TextBox 컨트롤의 캡션입니다. 같은 페이지에서 정적 HTML과 서버 컨트롤을 혼합하여 사용할 수 있습니다.

컨트롤 속성 설정

Visual Web Developer는 페이지의 컨트롤 속성을 설정하는 여러 가지 방법을 제공합니다. 이 연습 단계에서는 디자인 뷰와 소스 뷰에서 모두 속성 작업을 수행합니다.

컨트롤 속성을 설정하려면

Button 컨트롤을 선택하고 속성 창에서 해당 컨트롤의 Text 속성을 Display Name으로 설정합니다.
소스 뷰로 전환합니다.

소스 뷰에는 Visual Web Developer에서 서버 컨트롤에 대해 만든 요소를 포함하여 페이지의 HTML이 표시됩니다. 태그에 asp: 접두사가 사용되고 특성이 포함된다는 점을 제외하고는 HTML과 유사한 구문을 사용하여 컨트롤을 선언합니다.

컨트롤 속성은 특성으로 선언됩니다. 예를 들어, 1단계에서 단추의 Text 속성을 설정하면 실제로 컨트롤 태그의 Text 특성이 설정됩니다.

모든 컨트롤은 특성도 포함된 form 요소 내부에 있습니다. 컨트롤 태그의 특성과 asp: 접두사는 페이지가 실행될 때 ASP.NET에서 처리되도록 컨트롤을 표시합니다.

Button 컨트롤 프로그래밍

이 연습에서는 사용자가 텍스트 상자에 입력하는 이름을 읽은 다음 Label 컨트롤에 표시하는 코드를 작성합니다.

기본 단추 이벤트 처리기를 추가하려면

디자인 뷰로 전환합니다.
Button 컨트롤을 두 번 클릭합니다.

Visual Web Developer가 편집기의 다른 창에서 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs 파일을 엽니다. 이 파일에는 단추에 대한 기본 Click 이벤트 처리기가 있습니다.

강조 표시된 다음 코드를 추가하여 Click 이벤트 처리기를 완성합니다.

Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

입력에 따라 IntelliSense에서 상황에 맞는 선택 사항을 제공합니다. 이것은 단일 파일 페이지에서 코딩할 때의 동작과 같습니다.

페이지 및 코드 파일 검사

이제 완전한 WebPageSeparated 페이지를 구성하는 두 개의 파일인 WebPageSeparated.aspx와 WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs가 있습니다. 이 연습 단계에서는 두 파일의 구조와 관계를 검사합니다.

페이지와 코드 파일을 검사하려면

편집기 창 맨 위의 WebPageSeparated.aspx 탭을 클릭하여 페이지 파일로 전환합니다.
소스 뷰로 전환합니다.

페이지 맨 위에는 이 페이지를 코드 파일에 바인딩하는 @ page 지시문이 있습니다. 지시문은 다음 코드와 같습니다.
```
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>
```
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>
```
편집기에서 줄 바꿈되지 않으며 언어 특성과 파일 이름 확장명은 선택한 프로그래밍 언어와 일치합니다.

페이지가 실행될 때 ASP.NET은 페이지를 나타내는 클래스 인스턴스를 동적으로 만듭니다. Inherits 특성은 .aspx 페이지가 파생된 코드 숨김 파일에서 정의된 클래스를 식별합니다. 기본적으로 Visual Web Developer는 이 페이지 이름을 코드 숨김 파일에 포함된 클래스 이름의 기본으로 사용합니다.

CodeFile 특성은 이 페이지의 코드 파일을 식별합니다. 간단히 말해서 코드 숨김 파일에는 페이지의 이벤트 처리 코드가 들어 있습니다.

WebPageSeparated.aspx.vb 또는 WebPageSeparated.aspx.cs 탭을 클릭하여 코드 파일로 전환합니다.

코드 파일에는 클래스 정의와 유사한 코드가 들어 있습니다. 그러나 이 코드는 완전한 클래스 정의가 아니라 페이지를 구성하는 완전한 클래스의 일부만 포함된 "partial 클래스"입니다. 특히 코드 파일에 정의된 partial 클래스에는 이벤트 처리기와 작성한 기타 사용자 지정 코드가 포함되어 있습니다. 런타임 시 ASP.NET은 사용자 코드가 포함된 다른 partial 클래스를 생성합니다. 이 완전한 클래스는 페이지 렌더링에 사용되는 기본 클래스가 됩니다. 자세한 내용은 ASP.NET 페이지 클래스 개요를 참조하십시오.

참고:
Microsoft Visual Studio .NET 2003에서 사용되는 코드 숨김 모델을 잘 알고 있는 경우 새 모델의 코드 숨김 클래스에 클래스 정의 범위를 벗어나서 생성된 코드가 없음을 확인할 수 있습니다. 예를 들어, 페이지의 컨트롤에 대한 인스턴스 변수가 클래스에 포함되어 있지 않습니다. 이 유형의 생성된 코드는 더 이상 필요 없습니다.

Microsoft Visual Studio .NET 2003에서 사용되는 코드 숨김 모델을 잘 알고 있는 경우 새 모델의 코드 숨김 클래스에 클래스 정의 범위를 벗어나서 생성된 코드가 없음을 확인할 수 있습니다. 예를 들어, 페이지의 컨트롤에 대한 인스턴스 변수가 클래스에 포함되어 있지 않습니다. 이 유형의 생성된 코드는 더 이상 필요 없습니다.

페이지 실행

이제 페이지를 테스트할 수 있습니다.

페이지를 실행하려면

Ctrl+F5를 눌러 브라우저에서 페이지를 실행합니다.

ASP.NET Development Server를 사용하여 페이지가 실행됩니다.

참고:
브라우저에 페이지를 표시할 수 없다는 오류나 502 오류가 표시되면 로컬 요청에 대해 프록시 서버를 사용하지 않도록 브라우저를 구성해야 할 수도 있습니다. 자세한 내용은 방법: 로컬 웹 요청에 대해 프록시 서버 건너뛰기를 참조하십시오.

텍스트 상자에 이름을 입력하고 단추를 클릭합니다.

입력한 이름이 Label 컨트롤에 표시됩니다.
브라우저에서 실행 중인 페이지의 소스를 봅니다.
브라우저를 닫습니다.

이 페이지는 단일 파일 페이지와 정확히 같은 방식으로 실행됩니다. 연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 단일 파일 페이지를 만든 경우 두 페이지를 비교하여 같은 방식으로 실행됨을 확인할 수 있습니다.

다음 단계

이 연습에서는 코드 분리를 사용하는 웹 페이지를 만들고 편집하는 방법에 대해 설명했습니다. 페이지를 만들고 실행할 때는 단일 파일 페이지와 코드 분리를 사용하는 페이지 간에 큰 차이가 없습니다.

다른 기능을 확인할 수도 있습니다. 예를 들어, 다음과 같은 경우입니다.

다른 유형의 웹 사이트를 만듭니다. 이 연습처럼 파일 시스템 웹 사이트를 만드는 것 외에도 Microsoft IIS(인터넷 정보 서비스), SharePoint 및 FTP를 사용하여 웹 사이트 작업을 할 수 있습니다. 자세한 내용은 Visual Web Developer의 웹 사이트 형식을 참조하십시오.
웹 페이지에 데이터 액세스를 추가합니다. 자세한 내용은 연습: 웹 페이지의 기본 데이터 액세스를 참조하십시오.
웹 페이지의 디버거에 대해 알아봅니다. 자세한 내용은 연습: Visual Web Developer에서 웹 페이지 디버깅을 참조하십시오.
마스터 페이지를 사용하여 일관성 있는 사이트 레이아웃을 만듭니다. 자세한 내용은 연습: Visual Web Developer에서 ASP.NET 마스터 페이지 생성 및 사용을 참조하십시오.