VS Code에서 GitHub 사용하기

GitHub는 소스 코드를 저장하고 공유하는 클라우드 기반 서비스입니다. Visual Studio Code와 GitHub를 함께 사용하면 편집기 내에서 바로 소스 코드를 공유하고 다른 사람들과 협업할 수 있습니다. GitHub와 상호 작용하는 방법은 여러 가지가 있습니다. 예를 들어, 웹사이트 https://github.com 또는 Git 명령줄 인터페이스(CLI)를 사용할 수 있지만, VS Code에서는 풍부한 GitHub 통합을 GitHub Pull Requests and Issues 확장을 통해 제공합니다.

이 토픽에서는 VS Code를 벗어나지 않고도 GitHub의 즐겨 사용하는 기능 중 일부를 사용하는 방법을 보여드리겠습니다.

전제 조건

VS Code에서 GitHub를 시작하려면 다음이 필요합니다.

• 컴퓨터에 Git이 설치되어 있어야 합니다. 컴퓨터에 Git 버전 2.0.0 이상을 설치하세요.

• GitHub 계정.

• VS Code에 GitHub Pull Requests and Issues 확장이 설치되어 있어야 합니다.

• 변경 사항을 커밋할 때 Git은 구성된 사용자 이름과 이메일을 사용합니다. 다음 명령으로 이러한 값을 설정할 수 있습니다.

  git config --global user.name "Your Name"
  git config --global user.email "your.email@example.com"
  

GitHub Pull Request 및 이슈 시작하기

GitHub Pull Requests and Issues 확장을 설치한 후에는 로그인해야 합니다.

1. 활동 표시줄에서 GitHub 아이콘을 선택합니다.

2. 로그인을 선택하고 브라우저에서 GitHub 인증을 위한 안내를 따릅니다.

   

3. VS Code로 다시 리디렉션되어야 합니다.

VS Code로 리디렉션되지 않으면 인증 토큰을 수동으로 추가할 수 있습니다.

1. 브라우저 창에서 인증 토큰을 복사합니다.
2. VS Code에서 상태 표시줄의 github.com에 로그인 중...을 선택합니다.
3. 토큰을 붙여넣고 Enter 키를 눌러 로그인 프로세스를 완료합니다.

리포지토리 설정

리포지토리 복제

명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))의 Git: Clone 명령을 사용하거나 소스 제어 보기의 리포지토리 복제 버튼(폴더가 열려 있지 않을 때 사용 가능)을 사용하여 GitHub에서 리포지토리를 검색하고 복제할 수 있습니다.

GitHub 리포지토리 드롭다운에서 로컬로 복제하려는 리포지토리를 필터링하고 선택할 수 있습니다.

리포지토리 복제 및 원격 작업에 대해 자세히 알아보세요.

기존 리포지토리에 인증

GitHub를 통한 인증은 VS Code에서 GitHub 인증이 필요한 Git 작업을 실행할 때(예: 멤버인 리포지토리에 푸시하거나 비공개 리포지토리를 복제할 때) 활성화됩니다. 인증을 위해 특별한 확장을 설치할 필요는 없습니다. 리포지토리를 효율적으로 관리할 수 있도록 VS Code에 내장되어 있습니다.

GitHub 인증이 필요한 작업을 수행하면 VS Code에서 로그인하라는 메시지가 표시됩니다. GitHub에 로그인하고 VS Code로 돌아가기 위한 단계를 따르세요.

개인 액세스 토큰(PAT)을 사용한 로그인은 GitHub Enterprise Server에서만 지원됩니다. GitHub Enterprise Server를 사용하고 PAT를 사용하려면 PAT에 대한 프롬프트가 표시될 때까지 로그인 프롬프트에서 취소를 선택하면 됩니다.

GitHub에 인증하는 방법에는 여러 가지가 있습니다. 두 단계 인증(2FA)을 사용한 사용자 이름 및 암호, 개인 액세스 토큰 또는 SSH 키를 사용하는 방법 등이 있습니다. 자세한 내용은 GitHub 인증 정보를 참조하세요.

편집기 통합

호버

리포지토리가 열려 있고 사용자 이름이 @-멘션된 경우(예: 코드 주석에서) 해당 사용자 이름을 마우스로 가리키면 사용자의 세부 정보가 포함된 GitHub 스타일의 호버를 볼 수 있습니다.

#-멘션된 이슈 번호, 전체 GitHub 이슈 URL 및 지정된 리포지토리 이슈에 대해서도 유사한 호버가 있습니다.

제안

사용자 제안은 "@" 문자를 입력하여 트리거되고 이슈 제안은 "#" 문자를 입력하여 트리거됩니다. 제안은 편집기와 소스 제어 커밋 메시지 입력란에서 사용할 수 있습니다.

제안에 표시되는 이슈는 GitHub Issues: Queries (githubIssues.queries) 설정을 통해 구성할 수 있습니다. 쿼리는 GitHub 검색 구문을 사용합니다.

또한 GitHub Issues: Ignore Completion Trigger (githubIssues.ignoreCompletionTrigger) 및 GitHub Issues: Ignore User Completion Trigger (githubIssues.ignoreUserCompletionTrigger) 설정을 사용하여 이러한 제안을 표시할 파일 형식을 구성할 수 있습니다. 이러한 설정은 파일 형식을 지정하기 위해 언어 식별자 배열을 사용합니다.

// Languages that the '#' character should not be used to trigger issue completion suggestions.
"githubIssues.ignoreCompletionTrigger": [
  "python"
]

풀 리퀘스트

Pull Requests 보기에서 풀 리퀘스트를 보고, 관리하고, 만들 수 있습니다.

풀 리퀘스트를 표시하는 데 사용되는 쿼리는 GitHub Pull Requests: Queries (githubPullRequests.queries) 설정을 통해 구성할 수 있으며 GitHub 검색 구문을 사용합니다.

"githubPullRequests.queries": [
    {
        "label": "Assigned To Me",
        "query": "is:open assignee:${user}"
    },

풀 리퀘스트 만들기

포크 또는 브랜치에 대한 변경 사항을 커밋한 후에는 GitHub Pull Requests: Create Pull Request 명령 또는 Pull Requests 보기의 Create Pull Request 버튼을 사용하여 풀 리퀘스트를 만들 수 있습니다.

새로운 Create 보기에서 풀 리퀘스트의 대상이 될 기본 리포지토리 및 기본 브랜치를 선택하고 제목과 설명을 입력할 수 있습니다. 리포지토리에 풀 리퀘스트 템플릿이 있는 경우 설명에 자동으로 사용됩니다.

상단의 작업 표시줄에 있는 버튼을 사용하여 담당자, 검토자, 레이블 및 마일스톤을 추가합니다.

Create 버튼 메뉴를 사용하면 Draft 만들기와 같은 대체 생성 옵션을 선택하거나 자동 병합 방법을 활성화할 수 있습니다.

Create를 선택하면 아직 브랜치를 GitHub 원격으로 푸시하지 않은 경우 브랜치를 게시할지 묻는 메시지가 표시되고 특정 원격에 대한 드롭다운이 제공됩니다.

Create Pull Request 보기에서 이제 Review Mode로 전환됩니다. 여기서 PR 세부 정보를 검토하고, 주석을 추가하고, 준비되면 PR을 병합할 수 있습니다. PR이 병합된 후 원격 및 로컬 브랜치를 모두 삭제하는 옵션이 제공됩니다.

검토

풀 리퀘스트는 Pull Requests 보기에서 검토할 수 있습니다. 검토자 및 레이블을 할당하고, 주석을 추가하고, 승인, 닫기, 병합하는 모든 작업을 풀 리퀘스트 Description에서 수행할 수 있습니다.

Description 페이지에서 Checkout 버튼을 사용하여 풀 리퀘스트를 로컬로 쉽게 체크아웃할 수도 있습니다. 이렇게 하면 VS Code가 풀 리퀘스트의 포크 및 브랜치(상태 표시줄에 표시됨)를 검토 모드로 열고 현재 변경 사항뿐만 아니라 모든 커밋 및 해당 커밋 내의 변경 사항을 볼 수 있는 새로운 Changes in Pull Request 보기가 추가됩니다. 주석이 달린 파일에는 다이아몬드 아이콘이 표시됩니다. 디스크의 파일을 보려면 인라인 작업인 Open File을 사용할 수 있습니다.

이 보기의 diff 편집기는 로컬 파일을 사용하므로 파일 탐색, IntelliSense 및 편집이 정상적으로 작동합니다. 이러한 diff에 대한 주석을 편집기 내에 추가할 수 있습니다. 단일 주석 추가 및 전체 검토 생성 모두 지원됩니다.

풀 리퀘스트 변경 사항 검토를 마쳤으면 PR을 병합하거나 Exit Review Mode를 선택하여 이전에 작업하던 브랜치로 돌아갈 수 있습니다.

이슈

이슈 만들기

이슈는 Issues 보기의 + 버튼과 GitHub Issues: Create Issue from Selection 및 GitHub Issues: Create Issue from Clipboard 명령을 사용하여 만들 수 있습니다. "TODO" 주석에 대한 코드 액션을 사용하여 만들 수도 있습니다. 이슈를 만들 때 기본 설명을 사용하거나 오른쪽 상단의 Edit Description 연필 아이콘을 선택하여 이슈 본문 편집기를 열 수 있습니다.

코드 액션에 대한 트리거는 GitHub Issues: Create Issue Triggers (githubIssues.createIssueTriggers) 설정을 사용하여 구성할 수 있습니다.

기본 이슈 트리거는 다음과 같습니다.

"githubIssues.createIssueTriggers": [
  "TODO",
  "todo",
  "BUG",
  "FIXME",
  "ISSUE",
  "HACK"
]

이슈 작업

Issues 보기에서 자신의 이슈를 보고 작업할 수 있습니다.

기본적으로 이슈 작업을 시작할 때(Start Working on Issue 컨텍스트 메뉴 항목) 상태 표시줄에 표시되는 것처럼 브랜치가 자동으로 생성됩니다.

상태 표시줄은 활성 이슈를 표시하며, 해당 항목을 선택하면 GitHub 웹사이트에서 이슈 열기 또는 풀 리퀘스트 만들기 등과 같은 이슈 작업 목록을 사용할 수 있습니다.

브랜치 이름은 GitHub Issues: Issue Branch Title (githubIssues.issueBranchTitle) 설정을 사용하여 구성할 수 있습니다. 워크플로우에 브랜치 생성이 포함되지 않거나 브랜치 이름을 매번 입력하라는 메시지를 표시하려면 GitHub Issues: Use Branch For Issues (githubIssues.useBranchForIssues) 설정을 꺼서 해당 단계를 건너뛸 수 있습니다.

이슈 작업을 마치고 변경 사항을 커밋하려는 경우, Source Control 보기의 커밋 메시지 입력란에 커밋 메시지가 채워지며, 이는 GitHub Issues: Working Issue Format SCM (githubIssues.workingIssueFormatScm)으로 구성할 수 있습니다.

GitHub Repositories 확장

GitHub Repositories 확장을 사용하면 리포지토리를 로컬로 복제할 필요 없이 Visual Studio Code 내에서 직접 원격 GitHub 리포지토리를 빠르게 탐색, 검색, 편집 및 커밋할 수 있습니다. 이는 소스 코드를 검토하거나 파일 또는 에셋을 약간 변경하기만 하면 되는 여러 시나리오에서 빠르고 편리할 수 있습니다.

리포지토리 열기

GitHub Repositories 확장을 설치한 후에는 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 GitHub Repositories: Open Repository... 명령을 실행하거나 상태 표시줄의 왼쪽 하단에 있는 원격 표시기를 클릭하여 리포지토리를 열 수 있습니다.

Open Repository 명령을 실행하면 GitHub에서 리포지토리를 열지, GitHub에서 풀 리퀘스트를 열지, 또는 이전에 연결했던 리포지토리를 다시 열지 선택할 수 있습니다.

VS Code에서 GitHub에 이전에 로그인한 적이 없다면 GitHub 계정으로 인증하라는 메시지가 표시됩니다.

리포지토리 URL을 직접 제공하거나 텍스트 상자에 입력하여 리포지토리를 GitHub에서 검색할 수 있습니다.

리포지토리 또는 풀 리퀘스트를 선택하면 VS Code 창이 다시 로드되고 파일 탐색기에서 리포지토리 콘텐츠가 표시됩니다. 그런 다음 파일(전체 구문 강조 표시 및 괄호 일치 포함)을 열고, 편집하고, 커밋을 수행할 수 있습니다. 이는 로컬 리포지토리 복제본에서 작업하는 것과 같습니다.

로컬 리포지토리 작업과의 한 가지 차이점은 GitHub Repository 확장을 사용하여 변경 사항을 커밋할 때, GitHub 웹 인터페이스에서 작업하는 것과 마찬가지로 변경 사항이 원격 리포지토리로 직접 푸시된다는 것입니다.

GitHub Repositories 확장의 또 다른 기능은 리포지토리 또는 브랜치를 열 때마다 GitHub에서 최신 소스를 사용할 수 있다는 것입니다. 로컬 리포지토리에서와 같이 새로 고침을 위해 풀하는 것을 잊지 않아도 됩니다.

GitHub Repositories 확장은 로컬에 Git LFS(Large File System)를 설치할 필요 없이 LFS 추적 파일의 보기를 지원하고 커밋도 가능합니다. LFS로 추적하려는 파일 유형을 .gitattributes 파일에 추가한 다음 소스 제어 보기를 사용하여 변경 사항을 GitHub에 직접 커밋합니다.

브랜치 전환

상태 표시줄의 브랜치 표시기를 클릭하여 브랜치 간에 쉽게 전환할 수 있습니다. GitHub Repositories 확장의 큰 장점은 커밋되지 않은 변경 사항을 스테이시 하지 않고도 브랜치를 전환할 수 있다는 것입니다. 확장은 변경 사항을 기억하고 브랜치를 전환할 때 다시 적용합니다.

원격 탐색기

활동 표시줄에서 사용 가능한 원격 탐색기를 사용하여 원격 리포지토리를 빠르게 다시 열 수 있습니다. 이 보기에는 이전에 열었던 리포지토리 및 브랜치가 표시됩니다.

풀 리퀘스트 만들기

워크플로우에서 직접 리포지토리에 커밋하는 대신 풀 리퀘스트를 사용하는 경우, 소스 제어 보기에서 새 PR을 만들 수 있습니다. 제목을 입력하고 새 브랜치를 만들라는 메시지가 표시됩니다.

풀 리퀘스트를 만든 후에는 GitHub Pull Request and Issues 확장을 사용하여 PR을 검토, 편집 및 병합할 수 있습니다. 이 토픽의 이전 섹션에 설명되어 있습니다.

가상 파일 시스템

로컬 컴퓨터에 리포지토리 파일이 없으면 GitHub Repositories 확장은 메모리에 가상 파일 시스템을 만들어 파일 내용을 보고 편집할 수 있도록 합니다. 가상 파일 시스템을 사용하면 로컬 파일이라고 가정하는 일부 작업 및 확장이 비활성화되거나 기능이 제한될 수 있습니다. 작업, 디버깅, 통합 터미널과 같은 기능은 비활성화되며 원격 표시기 호버의 기능을 사용할 수 없음 링크를 통해 가상 파일 시스템에 대한 지원 수준을 확인할 수 있습니다.

확장 작성자는 가상 워크스페이스 확장 작성자 가이드에서 가상 파일 시스템 및 워크스페이스에서 실행하는 방법에 대해 자세히 알아볼 수 있습니다.

계속 작업하기

때로는 로컬 파일 시스템 및 전체 언어 및 개발 도구 지원이 있는 개발 환경에서 리포지토리를 작업하는 환경으로 전환하고 싶을 수 있습니다. GitHub Repositories 확장을 사용하면 쉽게 다음을 수행할 수 있습니다.

• GitHub Codespace 만들기 (GitHub Codespaces extension이 설치된 경우).
• 리포지토리를 로컬로 복제합니다.
• 리포지토리를 Docker 컨테이너로 복제합니다. (Docker 및 Microsoft Container Tools extension이 설치된 경우).

개발 환경을 전환하려면 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 사용 가능한 Continue Working On 명령을 사용하거나 상태 표시줄의 원격 표시기를 클릭하여 사용합니다.

브라우저 기반 편집기를 사용하는 경우, "Continue Working On" 명령에는 리포지토리를 로컬에서 열거나 GitHub Codespaces의 클라우드 호스팅 환경에서 열 수 있는 옵션이 있습니다.

커밋되지 않은 변경 사항이 있는 상태에서 Continue Working On을 처음 사용하는 경우, 설정 동기화에 사용되는 것과 동일한 VS Code 서비스에 보류 중인 변경 사항을 저장하는 Cloud Changes를 사용하여 선택한 개발 환경으로 편집 내용을 가져오는 옵션이 제공됩니다.

이러한 변경 사항은 대상 개발 환경에 적용되면 서비스에서 삭제됩니다. 보류 중인 변경 사항 없이 계속 진행하기로 선택한 경우, ` "workbench.cloudChanges.continueOn": "prompt" ` 설정을 구성하여 나중에 이 기본 설정을 변경할 수 있습니다.

보류 중인 변경 사항이 대상 개발 환경에 자동으로 적용되지 않는 경우, Cloud Changes: Show Cloud Changes 명령을 사용하여 저장된 변경 사항을 보고, 관리하고, 삭제할 수 있습니다.

다음 단계

• VS Code의 AI에 대해 자세히 알아보기 - VS Code의 AI 기능에 대해 알아보세요.