연습: Visual Web Developer에서 웹 페이지의 코드 편집

  • 아티클

업데이트: 2007년 11월

많은 ASP.NET 웹 페이지에서는 Visual Basic, C# 또는 다른 언어로 코드를 작성합니다. Visual Web Developer의 코드 편집기를 사용하면 오류가 발생하지 않도록 하면서 코드를 빠르게 작성할 수 있습니다. 또한 이 편집기는 재사용이 가능한 코드를 만들어 수행해야 하는 작업의 양을 줄이는 방법도 제공합니다.

이 연습에서는 코드 편집기의 다양한 기능을 보여 줍니다. 코드 편집기의 일부 기능은 코딩 중인 언어에 따라 달라지므로 이 연습에서는 프로그래밍 언어로 Visual Basic 및 C#을 각각 사용하여 2개의 페이지를 만듭니다.

이 연습을 통해 다음과 같은 작업 방법을 배웁니다.

  • 오류 수정(Visual Basic).

  • 코드 리팩터링 및 이름 바꾸기(C#)

  • 기호 이름 바꾸기

  • 코드 조각 삽입(Visual Basic 및 C#)

사전 요구 사항

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

  • Visual Studio 또는 Visual Web Developer

Visual Web Developer에 대한 소개를 보려면 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 참조하십시오.

웹 사이트 및 페이지 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따르는 등 Visual Web Developer에서 웹 사이트를 이미 만든 경우 해당 웹 사이트를 사용하고 다음 단원으로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

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

  1. Visual Web Developer를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

  3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

  4. 위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

  5. 언어 목록에서 Visual Basic을 클릭합니다.

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

  6. 확인을 클릭합니다.

    Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지가 만들어집니다.

Visual Basic에서 오류 수정

Visual Web Developer의 코드 편집기는 코딩 시 오류가 발생하지 않도록 해 주며 오류가 발생할 경우 오류를 수정하도록 도와 줍니다. 이 연습 부분에서는 편집기의 오류 수정 기능을 보여 주는 몇 줄의 코드를 작성합니다.

코드 편집기의 동작은 코딩 언어에 따라 달라집니다. 일반적으로 Visual Basic 2008의 코드 편집기는 코딩 시 보다 자세한 오류 정보를 제공합니다.

Visual Basic에서 오류 수정 작업을 테스트하려면

  1. 디자인 뷰에서 빈 페이지를 두 번 클릭하여 페이지에 대해 Load 이벤트의 처리기를 만듭니다.

    이 이벤트 처리기는 코드 작성을 위한 위치로만 사용합니다.

  2. 처리기 내에서 오류가 포함된 다음 줄을 입력합니다.

    dim var1 as inger

    Enter 키를 누르면 코드 편집기는 단어 inger에 밑줄을 그어 인식할 수 없는 단어임을 나타냅니다. 밑줄 오른쪽 끝에 짧은 밑줄 두 개가 표시됩니다.

  3. 단어 inger 위에 마우스 포인터를 놓고 오류가 무엇인지를 설명하는 도구 설명을 확인합니다.

  4. 밑줄 안에 포함된 밑줄 위에 마우스 포인터를 놓습니다.

    그러면 포함된 밑줄이 아이콘으로 확장됩니다.

  5. 해당 아이콘을 클릭합니다.

    단어 inger에 대한 추천 단어 목록이 표시됩니다.

  6. 'inger'을(를) 'Integer'(으)로 변경합니다.를 선택합니다.

C#에서 리팩터링 및 이름 바꾸기

리팩터링은 코드의 원래 기능은 유지하면서 보다 이해하기 쉽고 유지 관리하기 쉽도록 코드를 다시 생성하는 소프트웨어 방법입니다. 간단한 예로 이벤트 처리기에 코드를 작성하여 데이터베이스에서 데이터를 가져오는 경우를 들 수 있습니다. 페이지를 개발할 때는 여러 다른 처리기의 데이터에 액세스해야 합니다. 따라서 페이지에서 데이터 액세스 함수를 만든 후 처리기에 해당 함수에 대한 호출을 삽입하여 페이지의 코드를 리팩터링합니다.

코드 편집기에는 다양한 리팩터링 작업을 수행하는 데 도움이 되는 도구가 포함되어 있습니다. 이 연습에서는 기호 이름 바꾸기 및 메서드 추출이라는 두 가지 리팩터링 기술을 사용합니다. 다른 리팩터링 옵션으로는 필드 캡슐화, 지역 변수를 메서드 매개 변수로 승격 및 메서드 매개 변수 관리 등이 있습니다. 이러한 리팩터링 옵션의 사용 가능 여부는 코드에서의 위치에 따라 달라집니다. 예를 들어 필드 선언이 아닌 코드를 강조 표시할 경우 필드 캡슐화 옵션을 선택할 수 없습니다. 이벤트 메서드에서 변수를 강조 표시할 경우에는 이벤트 처리기 시그너처가 상수이므로 지역 변수를 매개 변수로 승격을 선택할 수 없습니다.

코드 리팩터링

일반적인 리팩터링 시나리오는 코드에서 다른 멤버 내에 있는 메서드를 만들거나 추출하는 것입니다. 이렇게 하면 원래 멤버의 크기가 줄어들며 추출한 코드를 다시 사용할 수 있습니다.

이 연습 부분에서는 간단한 코드를 작성한 후 해당 코드에서 메서드를 추출합니다. C#에 대해 리팩터링이 지원되므로 프로그래밍 언어로 C#을 사용하는 페이지를 만듭니다.

C# 페이지를 만들려면

  1. 솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.

  3. 언어 목록에서 C#을 클릭합니다.

    참고:

    이름 Default2.aspx를 그대로 둘 수 있습니다.

  4. 추가를 클릭하여 새 페이지를 만들어 엽니다.

C# 페이지에서 메서드를 추출하려면

  1. 디자인 뷰로 전환합니다.

  2. 도구 상자의 표준 탭에서 Button 컨트롤을 페이지로 끕니다.

  3. Button 컨트롤을 두 번 클릭하여 해당 Click 이벤트에 대한 처리기를 만든 후 다음의 강조 표시된 코드를 추가합니다.

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist =         new System.Collections.ArrayList();    int i;    string arrayValue;    for(i=0; i<5; i++)    {        arrayValue = "i = " + i.ToString();        alist.Add(arrayValue);    }    for(i=0; i<alist.Count; i++)    {        Response.Write("<br />" + alist[i]);    }
}

    이 코드는 ArrayList 개체를 만들고 루프를 사용하여 해당 값과 함께 개체를 로드한 후 다른 루프를 사용하여 ArrayList 개체의 내용을 표시합니다.

  4. Ctrl+F5를 눌러 페이지를 실행한 다음 단추를 클릭하여 다음 출력이 표시되는지 확인합니다.

    i = 0
i = 1
i = 2
i = 3
i = 4

  5. 코드 편집기로 돌아간 다음 이벤트 처리기에서 다음 줄을 선택합니다.

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

  6. 선택한 항목을 마우스 오른쪽 단추로 클릭하고 리팩터링을 클릭한 후 메서드 추출을 선택합니다.

    메서드 추출 대화 상자가 나타납니다.

  7. 새 메서드 이름 상자에 DisplayArray를 입력하고 확인을 클릭합니다.

    코드 편집기는 이름이 DisplayArray인 새 메서드를 만들고 루프가 원래 있던 Click 처리기에 새 메서드에 대한 호출을 추가합니다.

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

  8. Ctrl+F5를 눌러 페이지를 다시 실행하고 단추를 클릭합니다.

    해당 페이지는 이전과 동일하게 작동합니다.

기호 이름 바꾸기

변수 및 개체(기호로 통칭)를 사용하여 작업할 때 코드에서 이미 참조된 기호의 이름을 바꾸려고 할 수 있습니다. 그러나 기호의 이름을 바꾼 다음 기호에 대한 참조 중 하나의 이름을 바꾸지 않으면 코드 실행이 중단될 수 있습니다. 따라서 리팩터링을 사용하여 이름을 바꿀 수 있습니다.

리팩터링을 사용하여 기호의 이름을 바꾸려면

  1. Click 이벤트 처리기에서 다음 줄을 찾습니다.

    System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

  2. 변수 이름 alist를 마우스 오른쪽 단추로 클릭하고 리팩터링을 선택한 다음 이름 바꾸기를 선택합니다.

    이름 바꾸기 대화 상자가 표시됩니다.

  3. 새 이름 상자에 ArrayList1을 입력한 다음 Enter 키를 누릅니다.

    변경 내용 미리 보기 대화 상자가 나타나고 이름을 바꾸려는 기호에 대한 모든 참조가 들어 있는 트리가 표시됩니다.

  4. 적용을 클릭하여 변경 내용 미리 보기 대화 상자를 닫습니다.

    선택한 인스턴스를 명확히 참조하는 변수의 이름이 바뀝니다. 그러나 다음 줄에 있는 변수 alist의 이름은 바뀌지 않습니다.

    private int DisplayArray(System.Collections.ArrayList alist, 
    int i)

    이 줄의 변수 alist는 사용자가 이름을 바꾼 변수 alist와 같은 값을 나타내지 않으므로 이름이 바뀌지 않습니다. DisplayArray 선언의 변수 alist는 해당 메서드에 대한 지역 변수입니다. 여기에서는 리팩터링을 사용하여 기호의 이름을 바꾸는 것과 편집기에서 간단히 찾기 및 바꾸기 작업을 수행하는 것이 어떻게 다른지 보여 줍니다. 리팩터링을 수행하면 작업 중인 기호의 의미 체계에 따라 기호의 이름이 바뀝니다.

코드 조각 삽입

웹 페이지 개발자는 자주 수행해야 하는 코딩 작업이 많이 있으므로 코드 편집기에서는 코드 조각 라이브러리 또는 미리 작성한 코드 블록을 제공합니다. 페이지에 이러한 코드 조각을 삽입할 수 있습니다.

Visual Studio에서 사용하는 각 언어마다 코드 조각을 삽입하는 방법에 약간씩 차이가 있습니다. Visual Basic에서 코드 조각을 삽입하는 방법에 대한 자세한 내용은 방법: 사용자 코드에 코드 조각 삽입(Visual Basic)을 참조하십시오. Visual C#에서 코드 조각을 삽입하는 방법에 대한 자세한 내용은 방법: 코드 조각 사용(C#)을 참조하십시오.

다음 단계

이 연습에서는 코드의 오류를 수정하고, 코드를 리팩터링하고, 기호 이름을 바꾸고, 코드에 코드 조각을 삽입하는 Visual Studio 2008 코드 편집기의 기본 기능에 대해 설명했습니다. 편집기의 추가 기능을 사용하면 빠르고 쉽게 응용 프로그램을 개발할 수 있습니다. 예를 들어, 다음과 같은 경우입니다.

  • IntelliSense 옵션 수정, 코드 조각 관리 및 온라인으로 코드 조각 검색 등의 IntelliSense 기능에 대해 좀 더 자세히 알아봅니다. 자세한 내용은 IntelliSense 사용을 참조하십시오.

  • 사용자 고유의 코드 조각을 만드는 방법을 배웁니다. 자세한 내용은 IntelliSense 코드 조각 만들기 및 사용을 참조하십시오.

  • 코드 조각 사용자 지정 및 관련 문제 해결과 같은 IntelliSense 코드 조각의 Visual Basic 특정 기능에 대해 좀 더 자세히 알아봅니다. 자세한 내용은 Visual Basic IntelliSense 코드 조각을 참조하십시오.

  • 리팩터링 및 코드 조각과 같은 IntelliSense의 C# 특정 기능에 대해 좀 더 자세히 알아봅니다. 자세한 내용은 Visual C# 코드 편집기 기능을 참조하십시오.

참고 항목

개념

Visual Basic IntelliSense 코드 조각

리팩터링

코드 조각(C#)

기타 리소스

텍스트, 코드 및 태그 편집

IntelliSense 사용