튜토리얼: Visual Studio Code 시작하기

이 튜토리얼에서는 Visual Studio Code의 주요 기능을 살펴보고 코딩을 빠르게 시작할 수 있도록 돕습니다. 사용자 인터페이스의 다양한 구성 요소와 이를 원하는 대로 사용자 지정하는 방법을 알아봅니다. 그런 다음 코드를 작성하고 IntelliSense 및 코드 액션과 같은 내장 코드 편집 기능을 사용하며 코드 실행 및 디버깅 방법을 배웁니다. 언어 확장을 설치하여 다른 프로그래밍 언어에 대한 지원을 추가합니다.

전제 조건

• 컴퓨터에 Visual Studio Code 다운로드 및 설치

VS Code에서 폴더 열기

VS Code를 사용하여 개별 파일에서 작업하여 빠르게 편집하거나, 폴더(작업 영역이라고도 함)를 열 수 있습니다.

먼저 폴더를 만들고 VS Code에서 열어 보겠습니다. 이 폴더를 튜토리얼 전체에서 사용하게 됩니다.

1. Visual Studio Code를 엽니다.

   VS Code를 처음 열면 시작하기 위한 다양한 작업이 있는 시작 페이지가 표시됩니다.

2. 메뉴에서 파일 > 폴더 열기...를 선택하여 폴더를 엽니다.

   

3. 새 폴더를 선택하고 `vscode101`이라는 새 폴더를 만든 다음 폴더 선택(macOS에서는 열기)을 선택합니다.

   생성한 폴더는 작업 영역의 루트입니다.

4. 작업 영역 신뢰 대화 상자에서 예, 작성자를 신뢰합니다를 선택하여 작업 영역의 모든 기능을 활성화합니다.

   

   컴퓨터에서 폴더를 만들었으므로 폴더 안의 코드를 신뢰할 수 있습니다.

   중요

   작업 영역 신뢰 기능을 사용하면 프로젝트 폴더 안의 코드를 VS Code에서 실행할 수 있는지 여부를 결정할 수 있습니다. 인터넷에서 코드를 다운로드할 때 실행하기에 안전한지 먼저 검토해야 합니다. 작업 영역 신뢰에 대한 자세한 정보를 얻으십시오.

5. 이제 왼쪽에 탐색기 보기가 표시되며 폴더 이름이 표시됩니다.

   탐색기 보기를 사용하여 작업 영역의 파일 및 폴더를 보고 관리합니다.

사용자 인터페이스 탐색

이제 VS Code에서 폴더가 열렸으니 사용자 인터페이스를 빠르게 둘러보겠습니다.

활동 표시줄로 보기 전환

1. 활동 표시줄을 사용하여 다른 보기 간에 전환합니다.

   

   팁

   활동 표시줄에 마우스를 올리면 각 보기의 이름과 해당 바로 가기 키가 표시됩니다. 보기를 다시 선택하거나 바로 가기 키를 눌러 보기를 열고 닫을 수 있습니다.

2. 활동 표시줄에서 보기를 선택하면 기본 사이드바가 열리고 보기별 정보가 표시됩니다.

   예를 들어, 실행 및 디버그 보기를 사용하면 디버그 세션을 구성하고 시작할 수 있습니다.

   

편집기로 파일 보기 및 편집

1. 활동 표시줄에서 탐색기 보기를 선택하고 새 파일... 버튼을 선택하여 작업 영역에 새 파일을 만듭니다.

   

2. `index.html` 이름을 입력하고 Enter를 누릅니다.

   파일이 작업 영역에 추가되고 창의 메인 영역에 편집기가 열립니다.

   

3. `index.html` 파일에 HTML 코드를 입력하기 시작합니다.

   입력하면 코드를 완성하는 데 도움이 되는 제안(IntelliSense)이 나타납니다. 위 및 아래 키를 사용하여 제안을 탐색하고 Tab을 사용하여 선택한 제안을 삽입할 수 있습니다.

4. 작업 영역에 파일을 더 추가하고 각 파일이 새 편집기 탭으로 열리는 것을 확인합니다.

   원하는 만큼 편집기를 열고 세로 또는 가로로 나란히 볼 수 있습니다. 나란히 편집에 대해 자세히 알아보십시오.

   

패널 영역에서 터미널 액세스

1. VS Code에는 통합 터미널이 있습니다. ⌃` (Windows, Linux Ctrl+`)를 눌러 엽니다.

   운영 체제 구성에 따라 PowerShell, 명령 프롬프트 또는 Bash와 같은 다른 셸을 선택할 수 있습니다.

   

2. 터미널에서 다음 명령을 입력하여 작업 영역에 새 파일을 만듭니다.

   echo "Hello, VS Code" > greetings.txt
   

   기본 작업 폴더는 작업 영역의 루트입니다. 탐색기 보기가 자동으로 새 파일을 감지하고 표시하는 것을 확인합니다.

   

3. 동시에 여러 터미널을 열 수 있습니다. 시작 프로필 드롭다운을 선택하여 사용 가능한 셸을 보고 하나를 선택합니다.

   

명령 팔레트로 명령 액세스

1. ⇧⌘P (Windows, Linux Ctrl+Shift+P)를 눌러 명령 팔레트를 엽니다. 보기 > 명령 팔레트... 메뉴 항목을 사용할 수도 있습니다.

   VS Code의 많은 명령은 명령 팔레트를 통해 사용할 수 있습니다. 확장을 설치하면 명령 팔레트에 명령을 추가할 수도 있습니다.

   

   팁

   명령 팔레트는 명령에 대한 기본 바로 가기 키가 있는 경우 이를 보여줍니다. 바로 가기 키를 사용하여 명령을 직접 실행할 수 있습니다.

2. 명령 팔레트는 다른 작동 모드를 지원합니다

   1. > 기호 뒤에 명령 목록을 필터링하기 위해 입력하기 시작합니다. 예를 들어, 터미널을 새 창으로 이동하는 명령을 찾으려면 터미널 이동을 입력합니다.

      

   2. > 문자를 제거하고 입력하여 작업 영역에서 파일을 검색합니다. ⌘P (Windows, Linux Ctrl+P) 바로 가기 키를 사용하여 명령 팔레트를 열고 파일 검색을 직접 시작할 수 있습니다.

      

VS Code 설정 구성

설정을 구성하여 VS Code의 거의 모든 부분을 사용자 지정할 수 있습니다. 설정 편집기를 사용하여 VS Code의 설정을 수정하거나 settings.json 파일을 직접 수정할 수 있습니다.

1. ⌘, (Windows, Linux Ctrl+,)를 눌러 설정 편집기를 열거나 (또는 파일 > 기본 설정 > 설정 메뉴 항목을 선택합니다).

   

   팁

   검색 상자를 사용하여 표시되는 설정 목록을 필터링합니다.

2. 기본적으로 VS Code는 수정된 파일을 자동으로 저장하지 않습니다. 자동 저장 드롭다운에서 값을 선택하여 이 동작을 변경합니다.

   

   VS Code는 설정을 자동으로 적용합니다. 작업 영역에서 파일을 수정하면 자동으로 저장됩니다.

3. 설정을 기본값으로 되돌리려면 설정 옆의 톱니바퀴 아이콘을 선택하고 설정 다시 설정을 선택합니다.

   

   팁

   검색 상자에 @modified를 입력하거나 수정됨 필터를 선택하여 수정된 모든 설정을 빠르게 찾을 수 있습니다.

4. 설정 편집기의 탭을 사용하여 사용자 설정과 작업 영역 설정 간에 전환할 수 있습니다.

   사용자 설정은 모든 작업 영역에 적용됩니다. 작업 영역 설정은 현재 작업 영역에만 적용됩니다. 작업 영역 설정은 사용자 설정을 재정의합니다. VS Code의 설정에 대한 자세한 정보를 얻으십시오.

코드 작성

VS Code는 JavaScript, TypeScript, HTML, CSS 등에 대한 내장 지원을 제공합니다. 이 튜토리얼에서는 샘플 JavaScript 파일을 만들고 VS Code가 제공하는 코드 편집 기능 중 일부를 사용합니다.

VS Code는 많은 프로그래밍 언어를 지원하며 다음 단계에서는 언어 확장을 설치하여 Python과 같은 다른 언어에 대한 지원을 추가합니다.

1. 탐색기 보기에서 `app.js`라는 새 파일을 만들고 다음 JavaScript 코드를 입력하기 시작합니다.

   function sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   sayHello('VS Code');
   

   입력하면 코드를 완성하는 데 도움이 되는 제안(IntelliSense)이 나타납니다. 위 및 아래 키를 사용하여 제안을 탐색하고 Tab을 사용하여 선택한 제안을 삽입할 수 있습니다.

   코드의 다른 부분을 구별하는 데 도움이 되는 코드 서식(구문 강조)도 확인합니다.

   

2. 문자열 Hello,에 커서를 놓으면 코드 액션이 있음을 나타내는 전구 아이콘이 나타나는 것을 볼 수 있습니다.

   ⌃Space (Windows, Linux Ctrl+Space) 바로 가기 키를 사용하여 전구 메뉴를 열 수도 있습니다.

3. 전구 아이콘을 선택한 다음 템플릿 문자열로 변환을 선택합니다.

   

   코드 액션은 코드에 대한 빠른 수정을 적용하는 제안입니다. 이 경우 코드 액션은 ""Hello, " + name을 템플릿 문자열 `Hello, ${name}`로 변환합니다. 이는 문자열에 표현식을 포함하기 위한 특수 JavaScript 구문입니다.

VS Code의 코드 편집 기능, IntelliSense, 코드 탐색 및 리팩터링에 대해 자세히 알아보십시오.

소스 제어 사용

Visual Studio Code는 통합 소스 제어 관리(SCM) 기능을 제공하며 Git 지원을 기본적으로 포함합니다.

이전 변경 사항을 커밋하기 위해 내장 Git 지원을 사용해 보겠습니다.

1. 활동 표시줄에서 소스 제어 보기를 선택하여 소스 제어 보기를 엽니다.

   

2. 컴퓨터에 Git이 설치되어 있는지 확인합니다. Git이 설치되어 있지 않으면 소스 제어 보기에 설치 버튼이 표시됩니다.

3. 저장소 초기화를 선택하여 작업 영역에 새 Git 저장소를 만듭니다.

   

   저장소를 초기화하면 소스 제어 보기가 작업 영역에서 수행한 변경 사항을 표시합니다.

4. 파일 위에 마우스를 올리고 파일 옆에 있는 +를 선택하여 개별 변경 사항을 스테이징할 수 있습니다.

   

   팁

   모든 변경 사항을 스테이징하려면 변경 사항 위에 마우스를 올리고 모두 스테이징 버튼을 선택합니다.

5. 커밋 메시지를 입력하고(예: hello 함수 추가) 커밋을 선택하여 변경 사항을 Git 저장소에 커밋합니다.

   

   팁

   소스 제어 보기에서 그래프를 선택하여 Git 저장소의 커밋 기록을 시각적으로 표시합니다.

VS Code의 소스 제어에 대해 더 많이 탐색할 수 있습니다. VS Code의 소스 제어에 대한 자세한 정보를 얻으십시오.

언어 확장 설치

VS Code는 특정 개발 워크플로를 지원하기 위해 설치에 언어, 디버거 및 도구를 추가할 수 있는 풍부한 확장 프로그램 생태계를 보유하고 있습니다. Visual Studio Marketplace에서 수천 개의 확장 프로그램을 사용할 수 있습니다.

Python 또는 관심 있는 다른 프로그래밍 언어에 대한 지원을 추가하기 위해 언어 확장을 설치해 보겠습니다.

1. 활동 표시줄에서 확장 보기를 선택합니다.

   확장 보기를 사용하면 VS Code 내에서 확장을 검색하고 설치할 수 있습니다.

   

2. 확장 보기 검색 상자에 Python을 입력하여 Python 관련 확장을 검색합니다. Microsoft에서 게시한 Python 확장을 선택한 다음 설치 버튼을 선택합니다.

   

3. 이제 작업 영역에 `hello.py`라는 새 Python 파일을 만들고 다음 Python 코드를 입력하기 시작합니다.

   def say_hello(name):
       print("Hello, " + name)
   
   say_hello("VS Code")
   

   이제 Python 코드에 대한 제안 및 IntelliSense도 제공되는 것을 확인합니다.

   

코드 실행 및 디버깅

VS Code는 Node.js 애플리케이션을 실행하고 디버깅하기 위한 내장 지원을 제공합니다. 이 튜토리얼에서는 이전 단계에서 설치한 Python 확장을 사용하여 Python 프로그램을 디버그합니다.

이전 단계에서 만든 `hello.py` 프로그램을 디버그해 보겠습니다.

1. 컴퓨터에 Python 3이 설치되어 있는지 확인합니다.

   컴퓨터에 Python 인터프리터가 설치되어 있지 않으면 창의 오른쪽 하단에 알림이 표시됩니다. 인터프리터 선택을 선택하여 명령 팔레트를 열고 사용하려는 Python 인터프리터를 선택하거나 설치합니다.

2. `hello.py` 파일에서 print 줄에 커서를 놓고 F9를 눌러 중단점을 설정합니다.

   편집기의 왼쪽 여백에 빨간색 점이 나타나 중단점이 설정되었음을 나타냅니다. 중단점을 사용하면 특정 코드 줄에서 프로그램 실행을 일시 중지할 수 있습니다.

   

3. F5를 눌러 디버그 세션을 시작합니다.

   1. Python 디버거 선택

      

   2. 현재 Python 파일 실행 선택

      

4. 프로그램이 시작되고 설정한 중단점에서 실행이 중지되는 것을 확인합니다.

   

   팁

   실행이 일시 중지된 동안 편집기에서 name 변수에 마우스를 올려 값을 검사합니다. 실행 및 디버그 보기의 변수 보기에서 언제든지 변수 값을 볼 수 있습니다.

5. 디버그 도구 모음에서 계속 버튼을 누르거나 F5를 눌러 실행을 계속합니다.

   

VS Code에는 감시 변수, 조건부 중단점, 시작 구성과 같은 더 많은 디버깅 기능이 있습니다. VS Code에서 디버깅에 대한 자세한 내용을 알아보십시오.

AI 및 GitHub Copilot으로 코딩 향상

GitHub Copilot은 코드를 더 빠르게 작성하는 데 도움이 되는 AI 기반 지원으로, 코드 완성, 코드 리팩터링, 오류 수정과 같은 다양한 작업을 도와줍니다.

Copilot의 코드 제안을 받는 것부터 시작하겠습니다.

1. VS Code에서 Copilot을 설정했는지 확인합니다. Copilot 설정 가이드의 단계를 따르십시오.

   팁

   아직 Copilot 구독이 없는 경우 Copilot 무료 플랜에 가입하여 Copilot을 무료로 사용할 수 있으며 월별 완료 및 채팅 상호 작용 제한을 받을 수 있습니다.

2. `hello.py` 파일에서 파일 끝에 커서를 놓고 다음 함수 헤더를 입력합니다.

   def say_day_of_week(date)
   

   GitHub Copilot이 나머지 함수를 자동으로 제안합니다. Tab을 눌러 코드 제안을 수락합니다.

3. 다음으로 새 함수를 호출해 보겠습니다.

   say_day_of_week(date.today())
   

   date 키워드에 물결선이 표시되어 오류가 있음을 나타냅니다.

4. date 키워드에 커서를 놓고 전구 아이콘을 선택한 다음 Copilot으로 수정을 선택합니다.

   

   GitHub Copilot이 오류에 대한 수정을 제안합니다. 제안이 마음에 들면 수락을 선택합니다.

   팁

   ⌘. (Windows, Linux Ctrl+.) 바로 가기 키를 사용하여 빠른 수정을 수동으로 트리거할 수도 있습니다.

VS Code에서 Copilot으로 할 수 있는 일은 훨씬 더 많습니다. Copilot 빠른 시작으로 VS Code의 GitHub Copilot에 대해 자세히 알아보십시오.

다음 단계

축하합니다! 튜토리얼을 완료하고 Visual Studio Code의 주요 기능을 살펴보았습니다. Visual Studio Code의 기본 사항을 배웠으므로 이제 어떻게 하는지에 대한 자세한 정보를 얻으십시오.

• 코드에 대한 단위 테스트 검색 및 실행

• 통합 터미널 사용

• 원격 개발 환경 설정