Visual Basic 개발자를 위한 ASP.NET 2.0 소개

Scott Swigart

2006년 8월

적용 대상:
ASP.NET 2.0
Visual Studio 2005

요약: 이 기사에서는 Visual Basic .NET과 Visual Basic 6 개발자에게 ASP.NET 2.0으로 웹 응용 프로그램을 만드는 방법에 대해 소개합니다. 이 기사는 데스크톱 응용 프로그램과 웹 응용 프로그램 사이의 주요 차이점에 초점을 맞추고 있습니다.

소개

여러분이 필자와 마찬가지로 데스크톱 응용 프로그램을 주로 개발하는 개발자라 할지라도 웹 응용 프로그램을 개발해야 하는 경우가 자주 있을 것입니다. 이 기사의 목적은 Visual Basic .NET 및 Visual Basic 6 개발자가 ASP.NET 2.0으로 웹 응용 프로그램을 신속하게 개발할 수 있도록 하는 것입니다. 따라서 이 기사에서는 데스크톱 응용 프로그램 개발자의 언어를 기준으로 설명하며 이 언어가 웹 개발 언어와 다른 점에 초점을 맞출 것입니다. 이 기사에서는 또한 개발자의 주 목적이 데이터를 기반으로 하는 웹 페이지를 만드는 것이며 사용자가 데이터베이스의 정보를 웹 페이지에 표시할 수 있도록 하는 기능에 특히 관심이 있다고 가정합니다. 이러한 내용이 여러분의 상황과 비슷하다면 이 기사가 도움이 될 것입니다.

시작하기

이 기사에서 설명하는 단계를 따라해 보려면 Visual Studio 2005가 필요하며 Visual Studio 2005 Web Application Projects (영문) 추가 기능을 다운로드해야 합니다. 데이터베이스의 정보를 표시하는 연습을 위해서는 SQL Server 2005 Express Edition과 Northwind 샘플 데이터베이스 (영문)도 필요합니다.

Visual Studio 2005는 완전한 기능의 ASP.NET 웹 사이트를 만들 수 있는 기능을 갖추고 있습니다. 그러나 Visual Studio 2005는 기본적으로 프로젝트를 사용하지 않고 웹 사이트를 만들 수 있는 시스템과 함께 제공되므로 데스크톱 응용 프로그램 개발을 주로 하던 개발자는 웹 사이트의 개발이 데스크톱 응용 프로그램 개발과 여러모로 다르다고 느끼게 됩니다. 이러한 두 개발 방식의 차이를 줄여 유사한 방식으로 개발할 수 있도록 하기 위한 것이 바로 Visual Studio 2005 Web Application Projects입니다. 이 기사의 연습에서는 여러분이 이 추가 기능을 설치했다고 가정합니다.

연습: 간단한 웹 응용 프로그램 만들기

Visual Studio 2005 Web Application Projects 추가 기능이 있는지 확인하고, 그렇지 않다면 다운로드하여 설치합니다.
Visual Studio 2005를 시작합니다.
파일 메뉴에서 새로 만들기를 클릭한 다음 프로젝트를 클릭합니다.
프로젝트 형식으로 Visual Basic을 선택합니다.
템플릿으로 ASP.NET 웹 응용 프로그램을 선택합니다.
하나의 웹 페이지가 포함된 새 웹 응용 프로그램이 만들어집니다. 디자이너에는 웹 페이지의 태그 코드가 표시되며 페이지의 내용은 소스 뷰나 WYSIWYG 편집기를 사용하여 편집할 수 있습니다.

그림 1. 새 웹 응용 프로그램(더 큰 이미지를 보려면 이미지를 클릭하십시오.)
코드 편집기 아래쪽에 있는 디자인 단추를 클릭하여 WYSIWYG 뷰로 전환합니다.
일단 아직까지는 웹 응용 프로그램을 만드는 것이 데스크톱 응용 프로그램을 만들 때와 비슷함을 알 수 있습니다.
디자인 화면을 클릭하고 Enter your name: 이라고 입력합니다.
도구 상자에서 Textbox 컨트롤을 디자인 화면의 방금 입력한 텍스트 바로 옆으로 끌어옵니다.
Textbox 컨트롤 옆을 클릭하여 커서를 표시하고 ENTER 키를 눌러 한 줄을 새로 만듭니다.
도구 상자에서 Button 컨트롤을 디자인 화면으로 끌어옵니다.
Button 컨트롤 옆을 클릭하여 커서를 표시하고 ENTER 키를 눌러 줄 바꿈을 하나 더 만듭니다.
도구 상자에서 Label 컨트롤을 디자인 화면의 단추 아래로 끌어옵니다.
완성된 페이지는 그림 2와 같습니다.

그림 2. 컨트롤이 추가된 웹 응용 프로그램

페이지 레이아웃

웹 페이지 만들 때 한 가지 분명한 것은 원하는 곳이라고 해서 어디든지 컨트롤을 배치할 수는 없다는 점입니다. 데스크톱 응용 프로그램은 원하는 픽셀 위치 어디든지 컨트롤을 배치할 수 있도록 디자인되지만, 웹 페이지는 이와 달리 "차례로 표시되도록" 디자인됩니다. 이는 페이지의 레이아웃이 동적으로 지정된다는 것을 의미합니다. 브라우저는 공간의 여유가 있으면 다음 내용을 붙여서 더 긴 줄로 표시하고, 반대로 공간이 부족하면 줄 바꿈을 합니다.

따라서 레이블과 텍스트 상자를 제대로 배치하려면 웹 컨트롤의 정렬을 제어할 수 있도록 표 안에 넣어야 합니다.

연습: 컨트롤 배치

페이지 내용을 선택하고 DELETE 키를 눌러 모든 내용을 지웁니다.
레이아웃 메뉴에서 표 삽입을 클릭합니다.
행 개수로 2를 입력합니다.
열개수로 2를 입력합니다.
확인을 클릭합니다.
표의 셀에 직접 컨트롤을 입력할 수도 있고 셀 안으로 컨트롤을 끌어올 수도 있습니다. 표 안에 있는 텍스트 상자는 셀의 왼쪽 가장자리에 맞추어 깔끔하게 정렬됩니다. 웹 페이지의 레이아웃을 제어하는 데 표가 아주 유용함을 알 수 있습니다.
표의 셀 안에 입력하거나 도구 상자에서 컨트롤을 끌어와서 그림 3과 같은 사용자 인터페이스를 만듭니다.

그림 3. 표를 사용하여 레이아웃을 조정한 웹 응용 프로그램

이벤트 기반 작동

ASP.NET의 프로그래밍 모델은 Windows Forms 응용 프로그램을 만들 때와 상당히 비슷합니다. 간단한 말해 “웹” 응용 프로그램이 가지는 특성을 내부에서 자동으로 처리하여 데스크톱 응용 프로그램 개발과 유사한 방식으로 개발할 수 있도록 해줍니다.

연습: 이벤트 처리기 연결

디자인 화면에서 Button 컨트롤을 두 번 클릭하여 단추의 Click 이벤트를 위한 코드를 만듭니다.
다음과 같은 코드를 입력합니다.
```
Label1.Text = "Welcome " & TextBox1.Text
```
F5 키를 눌러 웹 응용 프로그램을 "실행"합니다.
User Name 입력란에 사용자 이름을 입력합니다.
Button 단추를 클릭합니다. 그림 4와 같은 모양이 나타날 것입니다.

그림 4. 이벤트 처리기 테스트

상당히 논리적으로 보이지만 내부적으로 어떤 일이 일어나는지 이해하는 것이 중요합니다. 코드는 웹 서버에서 실행되어 HTML 페이지를 생성하며, 생성된 웹 페이지는 브라우저로 보내져 표시됩니다. 이것이 Windows 응용 프로그램이라면 컨트롤이 속한 폼은 아직 실행 중일 것이며 변수도 아직 유효할 것입니다. 그러나 웹 응용 프로그램에서는 사용자 인터페이스가 브라우저에 표시될 때쯤이면 서버는 이미 페이지 클래스의 처리를 마치고 언로드한 상태가 됩니다.

상태 관리

사용자와 상호 작용할 때마다 응용 프로그램을 종료하고 다시 시작해야 하는 데스크톱 응용 프로그램을 만든다고 가정하면 그 차이를 알 수 있을 것입니다. 즉, 사용자에게 폼을 표시하고 곧바로 실행을 종료하는 것입니다. 사용자가 폼에 있는 단추를 클릭하면 응용 프로그램은 조용히 다시 시작되어 입력을 처리하고, 화면에 표시할 새 폼을 만든 다음 또 종료됩니다. 한마디로 상태를 전혀 유지하지 않고 이전 상태를 계속 잊어버리는 응용 프로그램이라고 할 수 있습니다. 종료할 때 저장하고 시작할 때 로드하도록 코딩하지 않은 데이터는 손실되며 폼 수준의 변수는 응용 프로그램이 종료되고 시작될 때 그 값을 잃기 때문에 사실상 쓸모없게 됩니다. 이상하게 들리겠지만 웹 응용 프로그램은 원래 이러한 방식으로 작동합니다. 다음 연습을 통해 이러한 방식에 대해 알아보겠습니다.

Visual Studio 2005 솔루션 탐색기에서 Default.aspx를 마우스 오른쪽 단추로 클릭한 다음 코드 보기를 클릭합니다.
Inherits System.Web.UI.Page 다음 줄에 다음과 같은 코드를 입력합니다.
```
Public previousUser As String
```
이는 사용자가 전에 입력한 사용자 이름을 저장하는 페이지 수준의 변수입니다.
Button1_Click 이벤트 처리기 코드를 다음과 같이 수정합니다.
```
Label1.Text = "You were " & previousUser & ", and now you're " & TextBox1.Text
previousUser = TextBox1.Text
```
응용 프로그램을 실행하여 Fred라는 이름을 입력하고 단추를 클릭한 다음 Jim이라는 이름을 입력하고 다시 단추를 클릭하면, You were Fred, and now you're Jim이라는 메시지가 표시될 것으로 예상할 것입니다. 물론 데스크톱 응용 프로그램에서는 예상한 대로 코드가 작동합니다. 하지만 웹 응용 프로그램에서는 그렇지 않습니다.
F5 키를 눌러 응용 프로그램을 실행합니다.
Fred를 입력하고 단추를 클릭합니다.
Jim을 입력하고 단추를 클릭합니다.
previousUser 값은 표시되지 않으며 항상 You were , and now you're Jim과 같이 표시됩니다. 이유가 무엇일까요?
문제는 단추를 클릭할 때마다 페이지 클래스가 소멸되고 다시 만들어진다는 데 있습니다. 즉, previousUser를 만들고 빈 문자열로 초기화한 다음 텍스트 상자에 입력된 값을 할당하지만 페이지 처리가 완료되면 페이지 클래스가 소멸되므로 previousUser 변수는 그 값을 잃게 됩니다. 이 과정은 단추를 클릭할 때마다 반복됩니다.
따라서 사용자와 상호 작용하는 과정에 기억할 필요가 있는 정보를 저장하는 데는 페이지가 적당하지 않습니다. 대신 ASP.NET에서는 "Session" 변수를 사용하여 이러한 정보를 저장할 수 있습니다.

Button1_Click 이벤트 처리기 코드를 다음과 같이 수정합니다.

Label1.Text = "You were " & Session("previousUser") & ", and now you're " & TextBox1.Text
Session("previousUser") = TextBox1.Text

F5 키를 눌러 응용 프로그램을 실행합니다.
Fred를 입력하고 단추를 클릭합니다.
Jim을 입력하고 단추를 클릭합니다.
이제 기대하던 대로 작동함을 알 수 있습니다(그림 5 참조). 웹 사이트에서는 Session 변수를 사용하여 사용자와 상호 작용하는 과정의 정보를 기억할 수 있습니다.

그림 5. Session 변수를 사용한 상태 관리

상태 관리는 웹 응용 프로그램 개발과 데스크톱 응용 프로그램 개발 사이의 가장 큰 차이점 중 하나입니다. 웹 사이트에서는 사용자의 입력을 기억해야 하는 경우가 자주 발생하며, 이러한 경우 단순히 변수를 사용해서는 그 정보를 저장할 수 없습니다. 대신 Session 변수와 같은 것을 사용하여 웹 서버에 값을 기억하라고 명시적으로 지시해야 합니다.

데이터 중심 사이트

대부분의 웹 사이트는 주로 사용자가 데이터베이스의 정보와 상호 작용할 수 있는 사용자 인터페이스의 기능을 합니다. ASP.NET 2.0은 이러한 종류의 사이트를 간소화하기 위해 발전을 거듭해 왔습니다. 다음 연습을 통해 이 부분을 살펴보겠습니다. 완전한 데이터 중심 사이트를 만드는 과정은 간단하지 않으므로 이 기사에서 완전하게 다룰 수 없습니다. 추가 리소스 섹션에 소개된 곳을 방문하여 더 많은 지식과 자세한 내용을 얻기 바랍니다.

다음 연습을 수행하려면 SQL Express와 Northwind 샘플 데이터베이스를 다운로드하여 설치해야 합니다. 다운로드할 수 있는 링크는 추가 리소스 섹션에서 찾을 수 있습니다.

솔루션 탐색기의 프로젝트 메뉴에서 새 항목 추가를 클릭합니다.
템플릿으로 WebForm을 선택한 다음 추가를 클릭합니다.
코드 편집기 창 아래쪽에 있는 디자인 탭을 클릭합니다.
도구 상자의 데이터 섹션에서 GridView 컨트롤을 디자이너로 끌어옵니다.
GridView 작업 스마트 태그에서 데이터 소스 선택을 클릭한 다음 <새 데이터 소스>를 클릭합니다.
데이터 소스 형식 선택 대화 상자에서 데이터베이스를 선택한 다음 확인을 클릭합니다.
새 연결을 클릭합니다.
SQL Server를 설치했으면 서버 이름으로 localhost를 입력합니다. SQL Express를 설치했으면 .\sqlexpress를 입력합니다.
데이터베이스 이름 선택 또는 입력란에 Northwind를 입력합니다.
연결 테스트를 클릭하여 데이터베이스에 연결할 수 있는지 확인합니다.
확인을 클릭합니다.
다음을 클릭합니다.
연결 문자열과 같은 정보는 단순히 응용 프로그램에 하드 코딩되지는 않고, 대신 이러한 정보는 app.config 웹 파일에 저장되므로 소스 코드를 변경하지 않고도 이 파일에서 쉽게 변경할 수 있습니다. 여기서 연결 문자열에 쓰일 이름을 입력하라는 메시지가 표시됩니다.
연결 문자열 저장 대화 상자에서 다음을 클릭합니다.
다음은 표시할 데이터의 소스를 입력하라는 메시지가 표시됩니다. 특정한 SQL 문을 입력하거나, 저장 프로시저를 사용하거나, 특정 테이블 또는 뷰를 선택할 수 있습니다.
이름 드롭다운 목록에서 Orders를 클릭합니다.
열로 *을 선택합니다.
다음을 클릭합니다.
쿼리 테스트를 클릭하여 데이터베이스와의 통신이 예상한 대로 작동하는지 확인합니다.
마침을 클릭합니다.
GridView 컨트롤의 데이터베이스 열은 디자인할 때에도 나타나므로 표가 렌더링되는 방식을 완벽하게 제어할 수 있습니다. 웹 사이트에 일관된 모양과 스타일을 적용하기 위해서는 CSS(Cascading Style Sheet)라는 표준 웹 기술을 사용하는데, Microsoft Office에서 자동 서식을 선택하는 것과 마찬가지로 표에 자동으로 서식을 지정하면 더 간단합니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 자동 서식을 클릭합니다.
전문가와 같은 서식 중 하나를 선택합니다.
GridView 컨트롤은 또한 정렬, 페이징과 같은 많은 고급 기능을 지원하며 이를 위해 코딩이 필요하지 않습니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 속성을 클릭합니다.
속성 창에서 AllowPaging 속성을 True로 설정합니다.
AllowSorting 속성을 True로 설정합니다.
F5 키를 눌러 웹 응용 프로그램을 실행합니다.
응용 프로그램이 그림 6과 같은 모양으로 나타날 것입니다.

그림 6. 데이터 중심 웹 응용 프로그램(더 큰 이미지를 보려면 이미지를 클릭하십시오.)

열 머리글을 클릭하면 해당 열을 기준으로 정렬할 수 있으며, 아래쪽에 있는 페이지 번호를 클릭하면 페이지를 넘기며 결과를 볼 수 있습니다.

ASP.NET 2.0의 다른 중요한 기능

ASP.NET에는 생산성을 높이고 일반적인 개발 시나리오를 지원하는 다른 많은 기능이 있습니다.

마스터 페이지

데스크톱 응용 프로그램에서는 개별 폼에 적절한 메뉴와 도구 모음을 쉽고 간단하게 배치할 수 있습니다. 그러나 웹 사이트에서는 탐색을 위한 컨트롤이 전체 페이지에 필요한 경우가 많습니다. 즉 하나의 탐색 모음을 사이트의 모든 페이지에 표시해야 하는 경우가 종종 있습니다. ASP.NET에서는 마스터 페이지를 통해 이 기능을 지원합니다. 마스터 페이지를 사용하려면 솔루션의 한 항목으로 추가하기만 하면 됩니다. 마스터 페이지의 표를 사용하여 머리글, 탐색 모음, 바닥글, 기본 페이지 내용 등이 배치되어야 하는 위치를 조정해 두면 다른 콘텐츠 페이지에서는 마스터 페이지를 참조하게 됩니다. 페이지의 콘텐츠는 마스터 페이지의 콘텐츠 영역 안에 표시됩니다. 그림 7은 간단한 예를 보여 줍니다. 마스터 페이지 사용에 대한 자세한 내용은 추가 리소스 섹션을 참조하십시오.

그림 7. 마스터 페이지(더 큰 이미지를 보려면 이미지를 클릭하십시오.)

인증 및 권한 부여

사이트나 사이트의 일부를 액세스하기 위해 사용자 이름과 암호가 필요한 경우가 자주 있습니다. ASP.NET 2.0에서는 이러한 시나리오를 폭넓게 지원합니다. 간단한 예로, ASP.NET은 사이트에 액세스할 수 있는 멤버 자격 구성 과정을 안내하는 마법사를 포함하는 사이트 관리 도구를 제공합니다(그림 8 참조).

그림 8. 보안 설정 마법사(더 큰 이미지를 보려면 이미지를 클릭하십시오.)

웹 사이트 보안에 대한 자세한 내용은 추가 리소스 섹션을 참조하십시오.

결론

웹 응용 프로그램 개발은 데스크톱 응용 프로그램 개발과 다릅니다. 그러나 ASP.NET 프로그래밍 모델을 통해 비슷한 방식으로 개발을 진행할 수 있습니다. 웹 사이트를 만들 때도 데스크톱 응용 프로그램에서 하던 것처럼 컨트롤에 이벤트 처리기를 연결하기만 하면 됩니다. 웹 페이지는 요청할 때마다 만들어지고 소멸되지만 ASP.NET에서는 Session 변수를 제공하여 서버의 메모리에 정보를 유지할 수 있도록 하기 때문에 상태 관리도 가능합니다. ASP.NET은 또한 데이터 중심 웹 사이트 구축과 같은 일반적인 시나리오를 지원하는, 사용하기 쉽고 강력한 기능을 가진 컨트롤을 포함하고 있습니다. 마지막으로 ASP.NET은 인증 및 권한 부여와 같은 복잡한 작업을 위한 사이트 구성을 단계적으로 안내하는 완벽한 기능의 마법사를 포함하고 있습니다.

추가 리소스

이 기사의 연습을 실행하기 위한 필수 구성 요소

SQL Server 2005 Express Edition은 개발 컴퓨터에 무료로 설치하고 응용 프로그램과 함께 무료로 배포할 수도 있는 SQL Server의 경량 버전입니다.
SQL Server 2000용 Northwind 및 pubs 샘플 데이터베이스 (영문)도 다운로드할 수 있습니다. 이 기사에서는 연습을 위해 Northwind 데이터베이스를 사용하므로 다운로드하여 SQL Express에 설치해야 합니다.
Visual Studio 2005 Web Application Projects (영문)는 Windows 응용 프로그램과 매우 비슷한 프로젝트 시스템을 제공하며 이 기사의 연습 단계를 실행하기 위해 필요합니다.

Visual Studio 없이 시작하기

Visual Web Developer 2005는 ASP.NET 2.0 개발을 위한 소규모의 무료 개발 환경입니다. Visual Studio 2005를 사용할 수 없다면 Visual Web Developer를 사용해 보십시오.

도움말 얻기

Absolute Beginner's Guide to ASP.NET 2.0 (영문)은 ASP.NET 2.0의 필수적인 기본 개념을 소개하는 입문용 가이드입니다.
ASP.NET 2.0 QuickStart Tutorial (영문)은 모든 일반적인 ASP.NET 프로그래밍 작업에 대한 풍부한 예제를 제공합니다. ASP.NET 2.0으로 새로운 무언가를 시도하고자 한다면 먼저 이 자습서에서 도움말, 지침 및 예제를 찾아보십시오.
ASP.NET 2.0 "How Do I..." Video Series (영문)는 구체적인 웹 개발 작업에 대한 자세한 정보를 보여 줍니다.

교육 과정

웹 E-Learning 과정은 합리적인 가격으로 Visual Studio를 배울 수 있는 교육 과정입니다. 깊이 있는 자기 주도 교육 과정이 필요하다면 방문해 보십시오.

미래 전망

Mix 06 Presentations (영문)에서는 웹 개발과 데스크톱 응용 프로그램 개발의 미래에 대해 살펴 봅니다. 기술의 발전 방향을 보려면 이 사이트를 참조하십시오.

저자 소개

Scott Swigart는 새롭게 떠오르는 신기술에 대해 컨설팅을 하고 글을 쓰고 강연을 하며 지냅니다. Scott는 15년 정도의 개발 경력을 가지고 있으며 미래의 소프트웨어 개발 기술에 대한 지속적인 연구를 통해 조직에서 미래의 기술을 활용할 준비를 하거나 현재 기술을 최대한 활용할 수 있도록 돕는 전문가입니다. Scott는 또한 몇 권의 .NET 서적을 집필했으며 MCT(Microsoft Certified Trainer)와 MCSD(Microsoft Certified Solution Developer) 및 Microsoft MVP이기도 합니다. 개인 전자 메일 주소는 scott@swigartconsulting.com이며 blog.swigartconsulting.com (영문)에서 그의 최신 글을 볼 수 있습니다.