Visual Studio 2013의 코드 편집 ASP.NET Web Forms

아티클
2023-07-13

많은 ASP.NET 웹 양식 페이지에서 Visual Basic, C#또는 다른 언어로 코드를 작성합니다. Visual Studio의 코드 편집기를 사용하면 오류를 방지하면서 코드를 빠르게 작성할 수 있습니다. 또한 편집기는 다시 사용할 수 있는 코드를 만들어 필요한 작업량을 줄이는 방법을 제공합니다.

이 연습에서는 Visual Studio 코드 편집기의 다양한 기능을 보여 줍니다.

이 연습에서는 다음 작업을 수행하는 방법을 배웁니다.

인라인 코딩 오류를 수정합니다.
코드를 리팩터링하고 이름을 바꿉니다.
변수 및 개체의 이름을 바꿉니다.
코드 조각을 삽입합니다.

사전 요구 사항

이 연습을 완료하려면 다음 사항이 필요합니다.

Microsoft Visual Studio 2013 또는 Microsoft Visual Studio Express 2013 for Web. .NET Framework 자동으로 설치됩니다.

참고

Microsoft Visual Studio 2013 및 Microsoft Visual Studio Express 2013 for Web은 이 자습서 시리즈 전체에서 Visual Studio라고도 합니다.

Visual Studio를 사용하는 경우 이 연습에서는 Visual Studio를 처음 시작할 때 웹 개발 설정 컬렉션을 선택했다고 가정합니다. 자세한 내용은 방법: 웹 개발 환경 설정 선택을 참조하세요.

웹 애플리케이션 프로젝트 및 페이지 만들기

연습의 이 부분에서는 웹 애플리케이션 프로젝트를 만들고 새 페이지를 추가합니다.

웹 애플리케이션 프로젝트를 만들려면

Microsoft Visual Studio를 엽니다.
파일 메뉴에서 새 프로젝트를 선택합니다.

새 프로젝트 대화 상자가 나타납니다.
왼쪽에 있는 템플릿 ->Visual C# ->웹 템플릿 그룹을 선택합니다.
가운데 열에서 ASP.NET 웹 애플리케이션 템플릿을 선택합니다.
프로젝트 이름을 BasicWebApp 으로 지정하고 확인 단추를 클릭합니다.
다음으로, Web Forms 템플릿을 선택하고 확인 단추를 클릭하여 프로젝트를 만듭니다.

Visual Studio는 Web Forms 템플릿을 기반으로 미리 빌드된 기능을 포함하는 새 프로젝트를 만듭니다.

새 ASP.NET Web Forms 페이지 만들기

ASP.NET 웹 애플리케이션 프로젝트 템플릿을 사용하여 새 Web Forms 애플리케이션을 만들 때 Visual Studio는 Default.aspx라는 ASP.NET 페이지(Web Forms 페이지)와 다른 여러 파일 및 폴더를 추가합니다. Default.aspx 페이지를 웹 애플리케이션의 홈페이지로 사용할 수 있습니다. 그러나 이 연습에서는 새 페이지를 만들고 작업합니다.

웹 애플리케이션에 페이지를 추가하려면

솔루션 탐색기 웹 애플리케이션 이름(이 자습서에서는 애플리케이션 이름이 BasicWebSite임)을 마우스 오른쪽 단추로 클릭한 다음 추가 ->새 항목을 클릭합니다.
새 항목 추가 대화 상자가 표시됩니다.
왼쪽에서 Visual C# ->Web 템플릿 그룹을 선택합니다. 그런 다음 가운데 목록에서 웹 양식을 선택하고 이름을 FirstWebPage.aspx로 지정합니다.
추가를 클릭하여 프로젝트에 Web Forms 페이지를 추가합니다.
Visual Studio에서 새 페이지를 만들어 엽니다.
다음으로 이 새 페이지를 기본 시작 페이지로 설정합니다. 솔루션 탐색기FirstWebPage.aspx라는 새 페이지를 마우스 오른쪽 단추로 클릭하고 시작 페이지로 설정을 선택합니다. 다음에 이 애플리케이션을 실행하여 진행률을 테스트할 때 브라우저에 이 새 페이지가 자동으로 표시됩니다.

인라인 코딩 오류 수정

Visual Studio의 코드 편집기를 사용하면 코드를 작성할 때 오류를 방지할 수 있으며 오류가 발생한 경우 코드 편집기에서 오류를 수정하는 데 도움이 됩니다. 연습의 이 부분에서는 편집기의 오류 수정 기능을 설명하는 코드 줄을 작성합니다.

Visual Studio에서 간단한 코딩 오류를 수정하려면

디자인 보기에서 빈 페이지를 두 번 클릭하여 페이지에 대한 Load 이벤트에 대한 처리기를 만듭니다.
이벤트 처리기를 일부 코드를 작성하는 위치로만 사용하고 있습니다.
처리기 내에서 오류가 포함된 다음 줄을 입력하고 Enter 키를 누릅니다.
```
string myStr = "Loading..."
```
Enter 키를 누르면 코드 편집기에서 문제가 있는 코드 영역 아래에 녹색 및 빨간색 밑줄(일반적으로 "물결선"이라고 함)을 배치합니다. 녹색 밑줄은 경고를 나타냅니다. 빨간색 밑줄은 수정해야 하는 오류를 나타냅니다.

마우스 포인터를 길게 myStr 눌러 경고에 대해 알려주는 도구 설명을 확인합니다. 또한 빨간색 밑줄 위에 마우스 포인터를 놓으면 오류 메시지가 표시됩니다.

다음 이미지는 밑줄이 있는 코드를 보여 줍니다.

줄 끝에 세미콜론 ; 을 추가하여 오류를 수정해야 합니다. 경고는 변수를 아직 사용하지 myStr 않았음을 알 수 있습니다.

참고

도구 -옵션 ->>글꼴 및 색을 선택하여 Visual Studio에서 현재 코드 서식 설정을 볼 수 있습니다.

리팩터링 및 이름 바꾸기

리팩터링 은 기능을 유지하면서 쉽게 이해하고 유지 관리할 수 있도록 코드를 재구성하는 소프트웨어 방법론입니다. 간단한 예는 이벤트 처리기에서 코드를 작성하여 데이터베이스에서 데이터를 가져오는 것입니다. 페이지를 개발할 때 여러 처리기의 데이터에 액세스해야 한다는 것을 알게 됩니다. 따라서 페이지에서 데이터 액세스 메서드를 만들고 처리기에서 메서드에 대한 호출을 삽입하여 페이지의 코드를 리팩터링합니다.

코드 편집기는 다양한 리팩터링 작업을 수행하는 데 도움이 되는 도구를 포함합니다. 이 연습에서는 변수 이름 바꾸기 및 메서드 추출이라는 두 가지 리팩터링 기술을 사용합니다. 다른 리팩터링 옵션으로는 필드 캡슐화, 지역 변수를 메서드 매개 변수로 승격, 메서드 매개 변수 관리 등이 있습니다. 이러한 리팩터링 옵션의 가용성은 코드의 위치에 따라 달라집니다.

코드 리팩터링

일반적인 리팩터링 시나리오는 메서드와 같은 다른 멤버 내에 있는 코드에서 메서드를 생성(추출)하는 것입니다. 이렇게 하면 원래 멤버의 크기가 줄어들고 추출된 코드를 재사용할 수 있습니다.

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

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

디자인 보기로 전환합니다.
도구 상자의 표준 탭에서 단추 컨트롤을 페이지로 끕니다.

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 개체의 내용을 표시합니다.

Ctrl+F5를 눌러 페이지를 실행한 다음 단추를 클릭하여 다음 출력이 표시되는지 확인합니다.
```
i = 0
i = 1
i = 2
i = 3
i = 4
```
코드 편집기로 돌아가서 이벤트 처리기에서 다음 줄을 선택합니다.
```
for(i=0; i<alist.Count; i++) 
{
      Response.Write("<br />" + alist[i]);
}
```
선택 영역을 마우스 오른쪽 단추로 클릭하고 리팩터링, 메서드 추출을 차례로 선택합니다.

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

새 메서드 이름 상자에 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);
}

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

페이지는 이전과 동일하게 작동합니다. DisplayArray 이제 페이지 클래스의 어디에서나 메서드를 호출할 수 있습니다.

변수 이름 바꾸기

변수 및 개체를 사용하는 경우 코드에서 이미 참조된 후 이름을 바꿀 수 있습니다. 그러나 변수 및 개체의 이름을 변경하면 참조 중 하나의 이름을 바꾸는 것을 놓치면 코드가 중단될 수 있습니다. 따라서 리팩터링을 사용하여 이름 바꾸기를 수행할 수 있습니다.

리팩터링을 사용하여 변수 이름을 바꾸려면

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

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

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

이름 바꾸기 대화 상자가 나타납니다.
새 이름 상자에 ArrayList1을 입력하고 참조 변경 내용 미리 보기 확인란이 선택되어 있는지 확인합니다. 그런 후 OK를 클릭합니다.

변경 내용 미리 보기 대화 상자가 나타나고 이름을 바꾸는 변수에 대한 모든 참조가 포함된 트리가 표시됩니다.
적용을 클릭하여 변경 내용 미리 보기 대화 상자를 닫습니다.

선택한 instance 특별히 참조하는 변수의 이름이 바뀝니다. 그러나 다음 줄의 변수 alist 는 이름이 바뀌지 않습니다.
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
이 줄의 변수는 이름을 바꾼 변수 alistalist 와 동일한 값을 나타내지 않으므로 이름이 바뀌지 않습니다. 선언의 DisplayArray 변수 alist 는 해당 메서드의 지역 변수입니다. 이는 리팩터링을 사용하여 변수 이름을 바꾸는 것은 단순히 편집기에서 찾기 및 바꾸기 작업을 수행하는 것과 다르다는 것을 보여 줍니다. 리팩터링하면 작업 중인 변수의 의미 체계에 대한 지식이 있는 변수의 이름이 바뀝니다.

조각 삽입

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

Visual Studio에서 사용하는 각 언어는 코드 조각을 삽입하는 방식에 약간의 차이가 있습니다. 코드 조각을 삽입하는 방법에 대한 자세한 내용은 Visual Basic IntelliSense 코드 조각을 참조하세요. Visual C#에서 코드 조각을 삽입하는 방법에 대한 자세한 내용은 Visual C# 코드 조각을 참조하세요.

다음 단계

이 연습에서는 코드의 오류를 수정하고, 코드를 리팩터링하고, 변수 이름을 변경하고, 코드 조각 삽입을 위한 Visual Studio 2010 코드 편집기의 기본 기능을 보여 줍니다. 편집기에서 추가 기능을 사용하면 애플리케이션을 빠르고 쉽게 개발할 수 있습니다. 예를 들어, 다음을 수행합니다.

IntelliSense 옵션 수정, 코드 조각 관리, 온라인 코드 조각 검색 등 IntelliSense의 기능에 대해 자세히 알아봅니다. 자세한 내용은 Using IntelliSense을 참조하세요.
사용자 고유의 코드 조각을 만드는 방법을 알아봅니다. 자세한 내용은 IntelliSense 코드 조각 만들기 및 사용을 참조하세요.
코드 조각 사용자 지정 및 문제 해결과 같은 IntelliSense 코드 조각의 Visual Basic 관련 기능에 대해 자세히 알아봅니다. 자세한 내용은 Visual Basic IntelliSense 코드 조각을 참조하세요.
리팩터링 및 코드 조각과 같은 IntelliSense의 C#관련 기능에 대해 자세히 알아봅니다. 자세한 내용은 Visual C# IntelliSense를 참조하세요.