Visual Studio Code와 Git을 위한 초보자 가이드

튜토리얼
Terraform

Visual Studio (VS) Code에 익숙하지 않은 사람들은 그냥 코드 편집기만 보일 수도 있습니다. VS Code의 진정한 힘은 확장 기능, 통합 터미널 및 기타 기능에 있습니다. 이 실습 튜토리얼에서는 Git 리포지토리와 함께 Visual Studio Code를 사용하는 방법을 배우게 됩니다.

관련 자료:Visual Studio Code에 대해 알아야 할 사항: 튜토리얼

내장된 VS Code 도구와 몇 가지 확장 기능을 사용하여 코드를 작성하고 해당 코드를 소스 제어에 커밋하는 방법을 배우게 될 것입니다.

이 블로그 포스트는 eBook 관리자에서 DevOps로: Azure에서 DevOps하는 BS 방법의 일부입니다. 이 장을 좋아하고 Azure에서 DevOps에 대해 배우고 싶다면 확인해보세요!

튜토리얼 개요

이 튜토리얼에서는 Visual Studio Code와 Git을 사용하여 Windows에서 다양한 VS Code 기능을 사용하는 방법을 배우게 됩니다. 작은 개념 증명 (POC) 프로젝트로 Terraform을 사용하여 Azure VM을 구축하는 방법을 알아내는 것이 과제로 주어졌습니다. VS Code를 가지고 있고, 전체 IDE로서의 기능을 들어본 적이 있으며 이를 테스트하고 싶습니다.

다음을 수행하게 될 것입니다:

  • 팀과 공유할 수 있는 VS Code 워크스페이스 만들기
  • Terraform 확장 기능 설치
  • 이름 규칙과 Azure 구독에 맞게 Terraform 구성 파일 수정
  • 반복해서 입력해야 하는 일반 작업에 대한 스니펫을 만드세요

Terraform 구성 파일을 Git 저장소에 커밋합니다.Terraform과 Azure VM을 배포하는 방법에 대한 기사가 이미 있으므로, 이 튜토리얼은 Visual Studio Code 학습에 초점을 맞출 것입니다.

이 프로젝트가 흥미로운 프로젝트인가요? 그렇다면 시작하려면 계속 읽어보세요!

전제 조건

이 Visual Studio Code Git 튜토리얼을 따라하기 위해 다음 사항이 필요합니다:

  • VS Code – 모든 예제는 VS Code 1.44를 사용하며, 이전 버전도 작동할 가능성이 있습니다.
  • Terraform – 모든 예제는 Windows용 Terraform v0.12.24를 사용합니다.
  • Git for Windows 설치 – 모든 예제는 v2.26을 사용합니다. Git을 기본 편집기로 사용하려면 설치 시 선택해야 합니다.
Default editor for Git

Git 저장소 복제

이 튜토리얼은 GitHub 저장소의 코드 작업에 초점을 맞출 것이므로, 첫 번째 작업은 해당 GitHub 저장소를 로컬 컴퓨터에 복제하는 것입니다.

이 프로젝트에서는 VSCodeDemo라는 GitHub 저장소에서 작업할 것입니다. VS Code는 네이티브 Git 통합을 가지고 있으므로 추가 구성 없이 Git 저장소를 복제할 수 있습니다. 다음과 같이 진행하세요:

  1. Ctrl-Shift-P로 명령 팔레트를 열고, git을 입력하여 다양한 옵션을 볼 수 있습니다. 아래에 표시된 것과 같이
Cloning a Git repo with VS Code

2. Git: 복제를 선택하세요. 그러면 VS Code가 저장소의 URL을 요청합니다. 여기에 URL https://github.com/NoBSDevOps/VSCodeDemo.git 를 입력한 후 Enter를 누르세요.

3. 복제된 프로젝트 파일을 위치시킬 폴더를 선택하세요. 이 프로젝트에서는 저장소 폴더를 C:\의 루트에 위치시킬 것입니다. 저장소 위치를 선택한 후, VS Code가 백그라운드에서 git.exe를 실행하여 저장소를 컴퓨터에 복제합니다.

4. 완료되면, VS Code가 복제된 저장소를 바로 열 것인지 묻는 팝업이 표시됩니다. 아래에 표시된 것과 같이 열기를 클릭하여 열어주세요.

Opening the cloned Git repo

이제 Git 저장소에 대한 열린 폴더가 VS Code에서 열렸습니다. 이제 이 열린 폴더와 수행할 모든 설정을 워크스페이스로 “저장”해야 합니다.

워크스페이스 생성

Git 저장소가 포함된 폴더를 열었다면, 파일 메뉴로 이동하여 워크스페이스 다른 이름으로 저장…을 클릭하여 워크스페이스를 저장하세요.

Saving a VS Code workspace

프로젝트 폴더에 프로젝트로 작업 공간을 저장하세요. 그러면 VS Code는 Git 저장소 폴더에 project.code-workspace라는 파일을 생성합니다. 이 작업 공간은 이전에 열었던 폴더를 자동으로 열게 됩니다. 이제 작업 공간을 나중에 열 때는 자동으로 C:\VSCodeDemo 폴더가 열립니다.

이제 폴더 이름 대신 작업 공간의 이름이 표시됩니다.

Inspecting a VS Code workspace

확장 프로그램 설정

확장 프로그램은 VS Code의 가장 유용한 기능 중 하나입니다. 확장 프로그램을 사용하면 여러 프로젝트를 관리하는 데 도움이 되는 기능을 추가할 수 있습니다. 이 튜토리얼에서는 Terraform을 사용할 것입니다.

왼쪽 사이드바에서 Terraform 구성 파일 중 하나를 열어보세요. 텍스트가 표시되는 것만 보입니다. 일반적인 구문 강조 표시나 다른 기능이 없습니다. VS Code는 이것을 일반 텍스트 파일로 간주하여 해당 방식으로 표시합니다. 이를 해결해보겠습니다.

No syntax highlighting for a Terraform configuration file

VS Code에서 Terraform 구성 파일을 “이해”하려면 확장 프로그램이 필요합니다. 확장 프로그램은 VS Code의 큰 부분으로 새로운 기능을 열어줍니다. 이 경우, Terraform 확장 프로그램을 설치하여 Terraform 구성 파일을 작성하고 인프라를 배포하는 데 도움이 필요합니다.

Terraform 확장 프로그램을 설치하려면 작업 표시줄의 확장 프로그램 버튼을 클릭하고 terraform을 검색하세요. 여러 확장 프로그램이 표시되지만 이 프로젝트에서는 Mikael Olenfalk가 만든 최상위 결과의 설치를 클릭하세요. 그러면 VS Code에서 확장 프로그램을 설치합니다.

Installing a Terraform extension

설치한 후, 작업 공간으로 돌아가서 작업 공간에있는 TF 파일 중 하나를 클릭하십시오. 확장 기능을 사용할 때 가장 분명한 차이점 중 하나를 즉시 볼 수 있습니다. 구문 색상

이제 다음 스크린샷에서 볼 수 있듯이 VS Code가 “주석”이라고 인식합니다(녹색으로 표시), “문자열”이라고 인식합니다(빨강으로 표시) 등등. Terraform 구성 파일을 읽기가 훨씬 쉬워졌습니다.

Terraform syntax-highlighting performed by the VS Code Terraform extension

Mikael의 Terrafom 확장에는 더 많은 기능이 포함되어 있습니다. Terraform을 사용할 때이 확장에서 얻을 수있는 잠재적 이점을모두 조사하십시오.

코드 편집

인터넷에서 스크립트 또는 구성 파일을 찾을 때, 필요한 대로 정확히되지 않을 것입니다. 어떤 방식으로든 수정해야 할 것입니다.

이 자습서의 예에서는 infrastructure-before.tf라는 Terraform 구성 파일의 main 블록 레이블을아마도 project로 변경하고 싶습니다. 이를 위해 일부 텍스트를 찾아 바꿔야합니다. VS Code에서는이를 수행하는 여러 가지 방법이 있습니다.

문자열을 찾아 다른 문자열로 바꾸는 가장 일반적인 방법 중 하나는 “찾기 및 바꾸기” 기능입니다.

Ctrl-F를 누르면 다음 스크린샷과 비슷한 대화 상자가 나타납니다. 여기에 찾고자 하는 문자열을 입력하고 아래쪽 화살표를 클릭하면 대체할 문자열을 입력할 수 있는 공간이 확장됩니다. 아래 스크린샷에서는 대소문자를 구분하는 검색 및 정규식과 같은 옵션인 Aa 및 Ab|을 볼 수 있습니다.

Finding and replacing text

Ctrl-D를 사용하여 “찾고 바꾸기”도 수행할 수 있습니다. 단순히 찾고자 하는 텍스트를 선택하고 Ctrl-D를 누르기 시작하면 VS Code가 해당 문자열의 각 인스턴스를 깜빡이는 커서로 강조 표시하기 시작합니다.

모든 항목을 선택한 후에는 입력을 시작하면 VS Code가 각각 개별적으로 선택한 것처럼 한꺼번에 모든 인스턴스를 변경합니다.

Synchronizing changes with multiple cursors

스니펫으로 시간을 절약하기

예를 들어, Terraform과 Azure에 대해 깊이 파고들고 있으며 다음 코드 스니펫에서 새 Azure 리소스 그룹을 생성하는 Terraform 구성 파일 블록을 반복해서 입력하기 지겨우실 겁니다. 

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

이러한 블록을 생성하는 데 시간을 절약하기 위해 VS Code 스니펫을 만들어보세요.

관련 내용:VS Code 스니펫: 바로 가기로 코딩 속도 높이기

VS Code 스니펫을 만들려면:

  1. azurerm_resource_group 블록을 Infrastructure-before.tf Terraform 구성 파일에서 복사하세요.

2. Ctrl-Shift-P로 명령 팔레트를 엽니다.

3. “snippets”를 입력하여 옵션 목록을 필터링하세요.

4. 환경 설정: 사용자 스니펫 구성을 선택합니다. 이렇게 하면 일반적으로 언어별로 분리된 스니펫 파일 목록이 표시됩니다.

5. “terraform”을 입력하여 Terraform 스니펫으로 필터링합니다.

6. terraform (Terraform)을 선택하여 Terraform 스니펫 파일(terraform.json)을 엽니다.

Terraform 스니펫 파일이 열리면 모든 주석을 제거하고 다음과 같은 JSON 요소를 복사하여 붙여넣습니다. 

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

\t와 백슬래시 사용에 주의하십시오. 스니펫 내에서 탭 문자를 직접적으로 사용할 수 없습니다. 탭 문자를 나타내려면 \t를 사용해야 합니다. 또한, 이스케이프 문자인 큰따옴표, 달러 기호, 중괄호 및 백슬래시를 백슬래시로 이스케이프해야 합니다.

8. terraform.json 파일을 저장합니다.

9. Terraform 구성 파일로 돌아가서 “rg”를 입력합니다. 이제 스니펫을 확장할 수 있는 옵션이 표시됩니다.

Expanding a snippet

10. 그림과 같이 rg 스니펫을 선택합니다. 이제 방금 만든 스니펫으로 확장되고 세 개의 항목이 강조 표시됩니다.

VS Code는 terraform.json 스니펫 파일(${1:block label}에 정의된 변수로 인해 각 단어를 플레이스홀더로 표시합니다.

Filling in snippet placeholders

이 시점에서 Tab을 누르고 필요한 값을 입력하면 블록 자체를 만드는 방법을 걱정하지 않고 필요한 값을 입력할 수 있습니다.

스니펫 구문에 대한 자세한 내용은 Visual Studio Code 문서의 스니펫을 참조하십시오.

Git에 코드 커밋하기

이 시점에서, 몇 개의 Terraform 구성 파일이 포함된 공개 GitHub 리포지토리를 복제했습니다. 몇 개의 파일을 편집했으며, 이제 해당 변경 사항을 GitHub 리포지토리로 다시 올릴 준비가 되었습니다.

변경 사항을 GitHub 리포지토리로 다시 올리려면, 먼저 Visual Studio Code와 Git을 사용하여 로컬 복제된 Git 리포지토리에 변경 사항을 커밋해야 합니다. 이전에 GitHub 리포지토리를 복제할 때, 구성 파일뿐만 아니라 Git 리포지토리도 다운로드했습니다.

지금까지 따라오셨다면, 두 개의 보류 중인 변경 사항이 있는 복제된 Git 리포지토리가 열려 있어야 합니다. 어떻게 알 수 있을까요? 아래에 표시된 대로, 작업 표시줄의 숫자를 확인하여 알 수 있습니다.

Visual Studio Code에서 Git 리포지토리를 열면, 작업 표시줄에서 로컬 Git 리포지토리로 스테이징 및 커밋할 수 있는 파일 수를 간략히 볼 수 있습니다.

Unstaged Git commits

왼쪽의 소스 제어 항목을 클릭하면, 두 개의 항목이 표시됩니다. 하나는 변경된 Terraform 구성 파일인 infrastructure-before.tf이고, 다른 하나는 이전에 저장한 워크스페이스인 (project.code-workspace)입니다. 구성 파일은 오른쪽에 빨간색 M이 표시되어 있으므로 수정되었음을 나타냅니다. 워크스페이스 파일은 오른쪽에 초록색 U가 있습니다. 이는 해당 파일이 추적되지 않음을 의미하며, 현재 소스 제어에 포함되지 않았음을 나타냅니다.

VS Code Git change labels

이 두 파일이 GitHub 리포지토리로 돌아가도록 하려면, 먼저 이 파일들을 커밋하는 이유를 나타내는 유용한 커밋 메시지를 작성하세요. 메시지는 어떤 요약 설명이든 상관없습니다. 커밋 메시지를 작성한 후에 변경 사항을 스테이징하세요. 스테이징은 Git에서 파일 내용을 스테이징 영역에 추가하여 리포지토리에 커밋을 준비하는 작업입니다.

소스 제어 창에서 각 파일 옆의 + 아이콘을 클릭하여 파일을 스테이징하세요. 아래에 표시된 것처럼

Staging Git changes

스테이징이 완료되면 확인 표시를 클릭하여 스테이징된 변경 사항을 커밋하세요. 아래에 표시된 것처럼

Committing Git changes

사용자 이름(user.name)과 이메일(user.email)을 구성해야 한다는 오류 메시지가 표시될 수 있습니다.

Your Git user is not defined in the Git configuration

문제 없습니다. Git이 필요로 하는 정보를 제공하기만 하면 됩니다. VS Code 통합 터미널로 들어가서 다음 두 명령을 실행하되, 이메일 주소와 이름을 자신의 것으로 변경하세요.

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

이제 파일을 커밋해 보세요. 이제 파일이 리포지토리에 커밋되는 것을 확인할 수 있습니다.

VS Code에서는 모든 변경된 파일을 수동으로 각 파일 옆의 +를 클릭하지 않고 한 번에 모두 스테이징할 수 있습니다. VS Code가 자동으로 모든 파일을 스테이징합니다.

만약 여러 사람이 공유하는 저장소에서 팀으로 작업 중이라면, 다음 단계는 이러한 변경 사항을 GitHub 저장소에 push하거나 pull 요청을 열어야합니다.

결론

VS Code는 기능이 풍부한 IDE입니다. 코드를 작성하고 이해하는 데 도움뿐만 아니라 인프라를 구축하고 변경 사항을 만들고 유틸리티를 호출하는 등의 작업도 수행할 수 있습니다. VS Code는 모든 개발 작업을 관리할 수 있는 한 곳을 제공합니다.

이 튜토리얼은 VS Code가 할 수 있는 일의 일부만 다루었지만, 이 IDE는 훨씬 더 다양한 기능을 제공합니다. VS Code가 무엇을 할 수 있는지 알고 싶다면 Visual Studio Code에 대해 알아야 할 내용: 튜토리얼을 확인해보세요.

Source:
https://adamtheautomator.com/visual-studio-code-git/