여러분이 Visual Studio를 실행하고 새로운 웹 서버를 만들면 새로운 웹 폼 페이지가 자동으로 생성됩니다. (Visual Studio.NET Version 2003에서 코드를 작성하기 위한 기본 model은 code-behind model 입니다.) 새로운 웹 폼 페이지가 생성될 때 Visual Studio는 markup을 작성하기 위한 .aspx 페이지와 프로그램 코드를 위한 .vb 또는 .cs 확장자를 가진 분리된 Code-behind file을 생성합니다. (Solution Explorer에서 생성된 웹 폼 페이지의 확장탭을 클릭하면 .cs파일을 볼수 있습니다.)

Code-behind 파일은 Page class로 부터 파생되어진 완전한 class로 정의되어 있으며, Visual Studio Web Page 디자이너는 이러한 .aspx페이지와 Code-Behind 파일을 동시에 유지하고 있습니다.
자세한 것은 Visual Studio를 직접 실행해 보면 알게 될 것 입니다.

금일부터는 이러한 경험을 기초로 Visual Studio를 이용하여 다양한 예제를 만들어 보고 이를 통해 ASP.NET의 주요한 기능에 대해 조금씩 접근해보고자 합니다.

Visual Studio를 이용한 Web Pages 코드 편집하기

이번 강좌에서는 아래의 두 가지 사항에 대해 다루어 보겠습니다.

    Visual Basic을 이용한 에러수정
    C#파일을 사용하여 Refactoring

아래의 순서로 작업을 진행합니다.
1. Visual Studio 실행
2. File 메뉴에서 New Web Site 클릭

3. Project Types에서 Visual Basic을 선택합니다.
4. 그리고 Visual Studio installed templates 에서 ASP.NET Web Site를 선택합니다.
5. 프로젝트을 생성할 폴더와 파일의 이름을 임의로 정합니다.(저는 d:/testwww/vs2005_aspnet 으로 했습니다.)
6. 그리고 Ok를 누릅니다.

이제 실습을 하기 위한 준비를 마쳤습니다. 바로 이어서 Visual Basic을 이용하여 에러를 일으키겠습니다.
1. markup 페이지의 Source탭 옆에 있는 Design 탭을 클릭합니다.
2. 바탕(문서)를 마우스로 연속해서 두 번 클릭합니다. (Solution Explorer에 Code-Behind 파일(.vb) 활성화 된 것을 볼수 있습니다.)
3. .vb파일을 마우스로 두 번 클릭하고 아래의 코드를 입력합니다.
Dim var1 as inger
4. 입력하고 엔터키를 누르면 inger 라는 단어 밑에 조그만 네모박스가 나타나는 것을 볼수 있습니다.
5. 그 곳에 마우스 커서를 올리고 1초 정도 기다립니다.
6. 아래의 그림처럼 화면이 바뀌면 Shift + Alt + F10 키나 혹은 마우스로 를 클릭합니다.


(이하 파란 테두리의 그림은 클릭하시면 크게 보실 수 있습니다.)

7. 다음에 제시된 4가지의 적절한 코드를 판별하여 마우스로 클릭합니다.


8. 에러가 편집된 코드


이와 같이 편리하게 에러를 편집해 낼수 있습니다.

다음은 이어서 C#코드를 이용하여 Refactoring(코드의 결함을 없애기 위해 코드를 재구성하는 작업) 을 해보겠습니다.

1. 먼저 위에서 설명한 순서대로 새로운 Web Form 페이지를 만듭니다.
2. 파일을 만들 때 .cs파일을 분리시켜야 합니다. (아래의 그림 참조)



3. markup Source 화면을 Design 화면으로 전환합니다.
4. 왼쪽의 Toolbox에서 Button 컨트롤을 선택한 후 마우스로 끌어 이동합니다.


5. Button 컨트롤을 두 번 클릭하고 Code-behind 파일로 이동합니다.
6. 아래의 내용을 입력합니다.
void Button1_Click(object sender, EventArgs e)
{
     System.Collections.ArrayList alist = new System.Collections.ArrayList();

     int i;
     string arrValue;
     for (i = 0; i < 5; i++)
     {
       arrValue = "i=" + i.ToString();
       alist.Add(arrValue);
     }

     for (i = 0; i < alist.Count; i++)
     {
       Response.Write("
" + alist[i]);
     }
}

7. 코드를 저장하고 실행해 봅니다.
8. 0 부터 4까지 출력된 결과를 볼 수 있습니다.

9. 이제 위의 결과를 반환한 코드를 Refactoring 해 보겠습니다.
10. editor로 돌아가서 아래의 그림처럼 handler를 select 하고, 마우스 오른쪽을 클릭하여 Refactor를 선택하고 Extract Method를 선택합니다.
11. Extract Method dialog box가 나타나면 DisplayResult 라고 입력합니다.
12. Ok를 클릭합니다.

[결과화면]

변수와 객체의 이름도 일괄적으로 변경이 가능합니다. 이름을 변경할 때 조심하지 않으면 프로그램의 정지를 유발할 수 있습니다. 따라서 참고된 객체라던가, 이름 변경 전에 Refactoring을 실시하여 이상유무를 확인하는 것이 안전합니다.그럼, 객체의 이름을 변경해 보겠습니다.

아래의 그림과 같이 한 후 객체의 이름을 임의로 정하고 변경합니다.(저는 변경할 이름을 seti로 하겠습니다.)

이름을 넣고 확인을 누르면 바꾸고자 하는 이름과 연관된 변수,객체 등이 표현됩니다.
Apply를 클릭합니다.


이름이 바뀐 소스를 확인할 수 있습니다.

+ Recent posts