9단계: 코드 검토, 주석 처리 및 테스트Step 9: Review, Comment, and Test Your Code

다음으로 코드에 주석을 추가합니다.You next add a comment to your code. 주석은 프로그램 동작에 영향을 주지 않는 일종의 메모로서A comment is a note that doesn't change the way the program behaves. 코드를 읽는 사용자가 코드에서 수행하는 작업을 보다 쉽게 이해할 수 있도록 도와줍니다.It makes it easier for someone who is reading your code to understand what it does. 코드에 주석을 추가하는 것은 좋은 습관입니다.Adding comments to your code is a good habit to get into. Visual C#에서는 두 개의 슬래시(//)를 사용하여 주석 줄을 표시하고,In Visual C#, two forward slashes (//) mark a line as a comment. Visual Basic에서는 작은따옴표(')를 사용하여 주석 줄을 표시합니다.In Visual Basic, a single quotation mark (') is used to mark a line as a comment. 주석을 추가한 후에는 프로그램을 테스트합니다.After you add a comment, you test your program. 프로젝트에서 작업하는 동안 자주 코드를 실행하고 테스트하는 것은 좋은 습관이며, 코드가 더 복잡해지기 전에 조기에 문제를 파악하고 해결할 수 있습니다.It's good practice to run and test your code frequently while you're working on your projects, so you can catch and fix any problems early, before the code gets more complicated. 이를 반복적 테스트라고 합니다.This is called iterative testing.

이제 아직 완성되지는 않았지만 그림을 로드할 수 있는 프로그램이 빌드되었습니다.You just built something that works, and although it's not done yet, it can already load a picture. 코드에 주석을 추가하고 테스트하려면 먼저 이러한 작업에 자주 사용될 다음과 같은 코드 개념을 알아야 합니다.Before you add a comment to your code and test it, take time to review the code concepts, because you will use these concepts frequently:

  • Windows Forms 디자이너에서 그림 표시 단추를 두 번 클릭하면 IDE에서 자동으로 메서드를 프로그램의 코드에 추가합니다.When you double-clicked the Show a picture button in Windows Forms Designer, the IDE automatically added a method to your program's code.

  • 메서드는 코드 구성 방법, 즉 코드 그룹화 방법을 결정합니다.Methods are how you organize your code: It's how your code is grouped together.

  • 대부분의 경우 메서드는 특정 순서로 적은 수의 작업을 수행합니다. 예를 들어 showButton_Click() 메서드는 대화 상자를 연 다음 그림을 로드합니다.Most of the time, a method does a small number of things in a specific order, like how your showButton_Click() method shows a dialog box and then loads a picture.

  • 메서드는 코드 또는 코드 줄로 구성됩니다.A method is made up of code statements, or lines of code. 메서드는 여러 개의 코드 문을 하나로 묶는 기능으로 간주될 수 있습니다.Think of a method as a way to bundle code statements together.

  • 메서드가 실행되거나 호출되면 해당 메서드의 문이 첫 번째 문부터 차례대로 실행됩니다.When a method is executed, or called, the statements in the method are executed in order, one after another, starting with the first one.

    다음은 문의 예제입니다.The following is an example of a statement.

    pictureBox1.Load(openFileDialog1.FileName);  
    
    pictureBox1.Load(openFileDialog1.FileName)  
    

    문은 특정 작업을 수행하도록 프로그램에 지시합니다.Statements are what make your programs do things. Visual C#에서는 문이 항상 세미콜론으로 끝나고,In Visual C#, a statement always ends in a semicolon. Visual Basic에서는 줄의 끝이 문의 끝입니다.In Visual Basic, the end of a line is the end of a statement. Visual Basic에서는 세미콜론이 필요하지 않습니다. 위의 문은 사용자가 OpenFileDialog 구성 요소를 사용하여 선택한 파일을 로드하도록 PictureBox 컨트롤에 지시합니다.(No semicolon is needed in Visual Basic.) The preceding statement tells your PictureBox control to load the file that the user selected with the OpenFileDialog component.

    비디오 링크이 항목의 비디오 버전을 보려면 자습서 1: Visual Basic에서 사진 뷰어 만들기 - 비디오 5 또는 자습서 1: C#에서 사진 뷰어 만들기 - 비디오 5를 참조하세요.link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 5 or Tutorial 1: Create a Picture Viewer in C# - Video 5. 이러한 비디오에서는 이전 버전의 Visual Studio를 사용하므로 일부 메뉴 명령과 기타 사용자 인터페이스 요소가 약간 다를 수 있습니다.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. 그러나 개념 및 절차는 Visual Studio의 현재 버전에서 비슷하게 작동합니다.However, the concepts and procedures work similarly in the current version of Visual Studio.

주석을 추가하려면To add comments

  1. 다음 주석을 코드에 추가합니다.Add the following comment to your code.

    Private Sub showButton_Click() Handles showButton.Click
    
        ' Show the Open File dialog. If the user clicks OK, load the
        ' picture that the user chose.
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    
    private void showButton_Click(object sender, EventArgs e)
    {
        // Show the Open File dialog. If the user clicks OK, load the
        // picture that the user chose.
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);
        }
    }
    

    참고

    이제 showButton 단추의 Click 이벤트 처리기가 완성되어 작동합니다.Your showButton button's Click event handler is now finished, and it works. if 문으로 시작하는 코드 작성을 시작했습니다.You have started writing code, starting with an if statement. if 문은 "한 가지 사항을 확인하고 true일 경우 해당 작업을 수행"하라고 프로그램에 지시합니다.An if statement is how you tell your program, "Check this one thing, and if it's true, do these actions." 이 자습서에서는 파일 열기 대화 상자를 연 다음 사용자가 파일을 선택하고 확인 단추를 선택하면 PictureBox에 파일을 로드하도록 프로그램에 지시합니다.In this case, you tell your program to open the Open File dialog box, and if the user selects a file and chooses the OK button, load that file in the PictureBox.

    IDE는 사용자가 코드를 손쉽게 작성할 수 있도록 하기 위한 것으로, 코드 조각이라는 기능을 제공합니다.The IDE is built to make it easy for you to write code, and code snippets are one way it does that. 조각은 작은 코드 블록으로 확장되는 바로 가기입니다.A snippet is a shortcut that gets expanded into a small block of code.

    사용 가능한 모든 코드 조각을 볼 수 있습니다.You can see all of the snippets available. 메뉴 모음에서 도구, 코드 조각 관리자를 차례로 선택합니다.On the menu bar, choose Tools, Code Snippets Manager. Visual C#의 경우 if 코드 조각이 Visual C#에 있습니다.For Visual C#, the if snippet is in Visual C# . Visual Basic의 경우 if 코드 조각이 조건 및 루프, 코드 패턴에 있습니다.For Visual Basic, the if snippets are in Conditionals and Loops, Code Patterns. 이 관리자를 사용하여 기존 조각을 찾거나 사용자 고유의 조각을 추가할 수 있습니다.You can use this manager to browse existing snippets or add your own snippets.

    코드를 입력할 때 코드 조각을 활성화하려면 코드를 입력하고 Tab 키를 선택합니다.To activate a snippet when typing code, type it and choose the TAB key. IntelliSense 창에 여러 코드 조각이 표시되므로 Tab 키를 두 번 선택해야 하는데, 첫 번째는 IntelliSense 창에서 코드 조각을 선택하기 위한 것이고 두 번째는 이 코드 조각을 사용하도록 IDE에 지시하기 위한 것입니다.Many snippets appear in the IntelliSense window, which is why you choose the TAB key twice: first to select the snippet from the IntelliSense window, and then to tell the IDE to use the snippet. IntelliSense에서는 if 조각은 지원하지만 ifelse 조각은 지원하지 않습니다.(IntelliSense supports the if snippet, but not the ifelse snippet.)

  2. 프로그램을 실행하기 전에 다음과 같은 모두 저장 도구 모음 단추를 선택하여 프로그램을 저장합니다.Before you run your program, save your program by choosing the Save All toolbar button, which appears as follows.

    모두 저장 도구 모음 단추Save All toolbar button
    모두 저장 단추Save All button

    또는 메뉴 모음에서 파일, 모두 저장을 차례로 선택하여 프로그램을 저장합니다.Alternatively, to save your program, on the menu bar, choose File, Save All. 프로그램은 초기에 자주 저장하는 것이 좋습니다.It's a best practice to save early and often.

    실행 중인 프로그램은 다음과 같습니다.When it's running, your program should look like the following picture.

    그림 뷰어Picture Viewer
    Picture ViewerPicture Viewer

프로그램을 테스트하려면To test your program

  1. F5 키를 선택하거나 디버깅 시작 도구 모음 단추를 선택합니다.Choose the F5 key or choose the Start Debugging toolbar button.

  2. 그림 표시 단추를 선택하여 방금 작성한 코드를 실행합니다.Choose the Show a picture button to run the code you just wrote. 프로그램에서 파일 열기 대화 상자가 열립니다.First, the program opens an Open File dialog box. 대화 상자의 맨 아래에 있는 파일 형식 드롭다운 목록에 사용자의 필터가 있는지 확인합니다.Verify that your filters appear in the Files of type drop-down list at the bottom of the dialog box. 그런 다음 그림을 찾아서 엽니다.Then navigate to a picture and open it. 일반적으로 내 문서 폴더의 My Pictures\Sample Pictures 폴더에서 Windows 운영 체제와 함께 제공되는 샘플 그림을 찾을 수 있습니다.You can usually find sample pictures that ship with the Windows operating system in your My Documents folder, inside the My Pictures\Sample Pictures folder.

    참고

    그림 파일 선택 대화 상자에 이미지가 표시되지 않는 경우 대화 상자 오른쪽 아래에 있는 드롭다운 목록에서 "모든 파일(.*)" 필터가 선택되어 있는지 확인하십시오.If you don't see any images in the **Select a picture file* dialog box, be sure that the "All files (*.*)" filter is selected in the drop-down list on the lower right side of the dialog box.

  3. 그림을 로드합니다. 로드된 그림은 PictureBox에 표시됩니다.Load a picture, and it appears in your PictureBox. 그런 다음 폼 테두리를 끌어서 폼 크기를 조정해 봅니다.Then try resizing your form by dragging its borders. 자동으로 폼 안에 도킹되는 TableLayoutPanel 안에 PictureBox가 도킹되기 때문에 그림 영역은 폼과 같은 너비로 폼의 위쪽 90퍼센트를 차지하도록 크기가 조정됩니다.Because you have your PictureBox docked inside a TableLayoutPanel, which itself is docked inside the form, your picture area will resize itself so that it's as wide as the form, and fills the top 90 percent of the form. TableLayoutPanel 및 FlowLayoutPanel 컨테이너를 사용하는 것은 바로 이러한 이유 때문입니다. 이러한 컨테이너는 사용자가 폼의 크기를 조정할 때 폼의 크기가 올바로 조정되도록 합니다.That's why you used the TableLayoutPanel and FlowLayoutPanel containers: They keep your form sized correctly when the user resizes it.

    지금은 더 큰 사진이 사진 뷰어 프로그램 테두리 밖으로 나갑니다.Right now, larger pictures go beyond the borders of your picture viewer. 다음 단계에서는 그림을 창 크기에 맞추는 코드를 추가합니다.In the next step, you'll add code to make pictures fit in the window.

계속하거나 검토하려면To continue or review