이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

원격 저장소

2021년 6월 10일 Brigit Murtaugh, @BrigitMurtaugh, Eric Amodio, @eamodio 작성

참고: 이 블로그 게시물이 게시된 이후 Remote Repositories 확장 프로그램의 이름이 GitHub Repositories로 변경되었습니다. 확장 프로그램에 대한 최신 정보를 제공하는 최신 설명서도 확인할 수 있습니다.

Visual Studio Code를 위한 새로운 Remote Repositories 확장 프로그램을 선보이게 되어 기쁩니다! 이는 GitHub의 동료들과 협력하여 VS Code 내에서 소스 코드 저장소를 빠르고 안전하게 작업할 수 있도록 하기 위해 개발된 새로운 환경입니다.

Remote Repositories extension

소스 코드 저장소를 여는 더 빠른 방법

VS Code에서는 처음부터 Git에 대한 통합 지원을 제공해 왔으며, 확장을 통해 많은 다른 소스 제어 관리(SCM) 공급자를 지원해 왔습니다. 이를 통해 개발자는 VS Code 내에서 직접 저장소를 복제하고 작업할 수 있었습니다.

그러나 개발자가 매일 하는 일의 상당 부분은 다른 사람의 코드를 읽는 것을 포함합니다. 풀 요청 검토, 오픈 소스 저장소 탐색, 새로운 기술 또는 프로젝트 실험, 애플리케이션 디버깅을 위한 업스트림 종속성 검사 등입니다. 이 모든 것의 공통점은 첫 번째 단계로 일반적으로 저장소를 로컬에 복제한 다음 좋아하는 코드 편집기(VS Code이기를 바랍니다!)에서 코드를 여는 것입니다. 그러나 저장소를 복제하는 데는 시간이 걸리고, 풀하는 것을 잊으면 저장소의 오래된 버전을 검토하게 될 수 있으며, 코드에 익숙하지 않은 경우 보안 위험이 될 수도 있습니다.

GitHub에서 게시한 새로운 Remote Repositories 확장 프로그램을 사용하면 VS Code에서 소스 코드 저장소를 즉각적이고 안전하게 열 수 있습니다. 이를 통해 복제할 필요 없이 VS Code 내에서 직접 모든 원격 GitHub 저장소(및 곧 Azure Repos)를 빠르게 탐색, 검색, 편집 및 커밋할 수 있습니다!

로컬 컴퓨터에 소스 코드를 저장하지 않고 원하는 만큼 많은 저장소에서 작업할 수 있습니다. Remote Repositories는 시간과 로컬 디스크 공간을 절약하고 모든 소스 제어 작업을 VS Code 내에서 완전히 수행할 수 있도록 지원합니다.

이 블로그 게시물에서는 Remote Repositories를 시작하는 방법, 첫 번째 원격 저장소를 연 후 수행할 수 있는 작업, 이 가상 환경을 지원하는 기술 세부 정보, 그리고 오늘 저희에게 피드백을 제공하는 방법에 대해 자세히 알아보겠습니다.

VS Code에서 첫 번째 원격 저장소 열기

VS Code에서 원격 저장소를 열어 보겠습니다. 먼저 Remote Repositories 확장 프로그램을 설치했는지 확인하세요.

현재 Remote Repositories는 GitHub 저장소를 지원하며 Azure Repos 지원은 곧 제공될 예정입니다. 이 블로그 게시물에서는 VS Code 저장소 (microsoft/vscode)를 열어 보겠습니다.

Remote Repositories 확장 프로그램을 설치한 후 VS Code의 왼쪽 하단에 있는 원격 표시기를 클릭하면 Open Remote Repository 명령에 즉시 액세스할 수 있습니다(설치한 다른 Remote Development 확장 프로그램의 명령과 함께).

Remote indicator in VS Code

이전에 VS Code에서 GitHub에 로그인한 적이 없다면 GitHub 계정을 인증하라는 메시지가 표시됩니다. 로그인하면 저장소 또는 PR을 검색하고 원하는 저장소를 선택하면 준비가 된 것입니다.

아래 짧은 비디오에서는 VS Code 저장소를 검색하고 선택합니다. VS Code가 다시 로드되고 저장소의 내용이 로컬에 복제된 것처럼 로드됩니다.

Gif of using Open Remote Repository command, search for "microsoft/vscode," repo loads, open readme

VS Code를 떠나지 않고도 저장소를 탐색하고 기여할 수 있습니다. 익숙한 VS Code 인터페이스를 사용하여 로컬 코드에서 작업하는 것처럼 느껴지며 VS Code 탐색기, 검색, 타임라인 보기, 빠른 열기, 물론 소스 제어와 같은 기능을 사용할 수 있습니다.

이제 가상 워크스페이스라고 알려진 것에 연결되었습니다(가상 워크스페이스에 대한 자세한 내용은 아래 참조). 원격 표시기에는 "GitHub"라고 표시됩니다. 원격 표시기에 마우스를 올리면 가상 워크스페이스에서는 일부 기능을 사용할 수 없다는 알림이 표시됩니다.

Hover over remote indicator for limited virtual workspace message

가상 워크스페이스는 특별한 설정이며, 확장 프로그램과 같은 일부 기능은 비활성화되거나 기능이 제한됩니다. 원격 표시기에 마우스를 올렸을 때 표시되는 일부 기능 링크를 클릭하여 비활성화된 확장 프로그램을 쉽게 찾을 수 있습니다.

링크를 클릭하면 어떤 확장 프로그램이 비활성화되었고 어떤 확장 프로그램이 기능이 제한되는지 보여줍니다. 기능이 제한되는 것은 확장 프로그램에 마우스를 올렸을 때 볼 수 있습니다.

VS Code Extensions view with limited and disabled extensions

가상 워크스페이스에서 확장 프로그램을 수동으로 사용하도록 설정하려면 사용자 settings.json 파일의 extensions.supportVirtualWorkspaces 설정을 사용하면 됩니다.

    "extensions.supportVirtualWorkspaces": { "<extensionID>": true }

확장 프로그램이 로컬 파일 시스템에 액세스하지 않고 가상 워크스페이스를 처리하도록 구현되지 않았을 수 있으므로 확장 프로그램이 예상대로 작동하지 않을 수 있음을 명심하십시오.

저장소를 열었습니다. 다음은 무엇입니까?

저장소가 열리면 Remote Repositories를 통해 프로젝트에 쉽게 기여할 수 있습니다.

프로젝트를 최신 상태로 유지하는 간소화된 Git 워크플로

Remote Repositories는 복잡한 Git 명령 없이도 항상 저장소의 최신 버전을 유지하도록 도와줍니다.

새 저장소를 열 때마다 최신 버전을 엽니다. Remote Repositories가 GitHub의 새 변경 사항을 감지하면 상태 표시줄에 다운로드해야 하는 커밋 수를 표시합니다.

VS Code Status bar showing "GitHub" in remote indicator and 1 pending change

탐색기에서 수정된 파일을 강조 표시합니다.

VS Code Explorer listing files and README has 1 change

변경 사항을 커밋하면 GitHub에 자동으로 표시됩니다. 변경 사항을 푸시하거나 새로 만든 브랜치를 게시할 필요가 없습니다.

풀 요청 생성 또는 체크아웃

Remote Repositories는 GitHub Pull Requests and Issues 확장 프로그램과 잘 작동합니다. 이 확장 프로그램을 사용하면 VS Code 내에서 직접 GitHub의 풀 요청 및 문제를 검토하고 관리할 수 있습니다. 두 확장 프로그램을 병렬로 사용하여 코드를 로컬에 복제하거나 VS Code를 떠나지 않고도 PR을 빠르게 체크아웃하고 문제를 작업할 수 있습니다.

몇 번의 클릭만으로 코드 변경, 해당 변경을 기반으로 하는 새 브랜치 및 풀 요청(PR) 생성, PR 체크아웃이 가능합니다.

Gif using GitHub Pull Request extension to create branch and PR, and check out that PR

GitHub Pull Requests and Issues 확장 프로그램에 대한 자세한 내용은 Working with GitHub 문서를 참조하세요.

변경 사항을 브랜치에 격리

작업을 완료하면서 브랜치 간에 전환해야 할 수 있습니다. 일반적인 환경에서는 변경 사항을 얼마나 많이 스태시하거나 커밋할지 결정해야 할 때 까다로울 수 있습니다.

Remote Repositories를 사용하면 여러 브랜치에서 동시에 쉽게 작업할 수 있습니다. 한 브랜치에서의 작업을 일시 중지하고 새 브랜치로 전환할 때 변경 사항을 스태시할지 묻지 않습니다. 변경 사항은 이전 브랜치에 자동으로 유지됩니다. 이전 브랜치로 돌아가면 변경 사항이 그대로 있고 중단한 부분부터 다시 시작할 수 있습니다.

브랜치에 변경 사항을 푸시하는 방법을 살펴보겠습니다.

상태 표시줄에서 현재 브랜치를 선택하여 브랜치 목록을 엽니다. 예를 들어 "main"입니다.

VS Code Status bar on Main branch

+ 새 브랜치 만들기...를 선택하고 브랜치 이름을 입력합니다.

VS Code Command Palette with options to create new branch

그런 다음 해당 새 브랜치로 전환할 수 있습니다.

Remote Repositories prompt to switch to new branch

새 브랜치에는 이전 브랜치의 변경 사항이 포함되지 않습니다.

제한 사항

Remote Repositories 작업에는 몇 가지 제한 사항이 있습니다.

  • 디버깅, 터미널 및 작업 - 현재 지원되지 않습니다. 터미널은 로컬 파일 시스템에서 열리며 원격 저장소의 가상 파일 시스템에 액세스할 수 없습니다.
  • 제한된 언어 지능 - IntelliSense 및 정의로 이동과 같은 기능은 많은 언어가 아직 Remote Repositories의 가상화된 환경을 이해하지 못하기 때문에 영향을 받을 수 있습니다.
  • 검색 - GitHub 검색 자체에는 브랜치를 인덱싱하지 않는 것과 같은 제한 사항이 있습니다. Remote Repositories는 이 제한을 피하고 인덱싱을 활성화하여 전체 텍스트 검색을 수행할 수 있습니다. 인덱싱은 GitHub에서 저장소의 얕은 복제를 가져와 로컬에서 전체 검색을 수행하므로 GitHub의 퍼지 기본 브랜치 네이티브 검색보다 더 강력한 기능을 제공합니다. 검색 보기에서 Remote Repositories의 인덱싱을 활성화할 수 있습니다.
  • 확장 프로그램 제한 - 모든 확장 프로그램이 가상 워크스페이스에서 실행되는 것을 지원하지는 않지만, 시간이 지남에 따라 더 많은 확장 프로그램이 지원될 것입니다. 로컬 파일 액세스에 크게 의존하는 확장 프로그램은 이 설정을 지원할 수 없습니다. 자세한 내용은 아래 가상 워크스페이스 섹션을 참조하세요.

저희는 이 여정을 이제 막 시작했으므로 개발을 계속함에 따라 기능 세트가 성장하고 제한 사항이 줄어들 것으로 예상됩니다.

더 강력한 환경에서 계속 작업하기

Remote Repositories를 사용하면 VS Code는 물리적 파일 시스템이 없기 때문에 모든 기능을 사용할 수 없는 환경에서 작동합니다. 저장소를 빠르게 탐색하는 데는 좋지만, 다음과 같은 "고급" 작업을 할 준비가 되었을 때는 어떻게 해야 할까요?

  • 저장소에서 적극적으로 작업하고 VS Code의 전체 기능을 사용하고 싶습니다.
  • 저장소의 변경 사항을 정기적으로 원격에서 풀하여 적극적으로 추적해야 합니다.

더 고급 워크플로로 전환하기 위해 Remote Repositories는 환경을 "업그레이드"하고 현재 위치에서 작업을 계속할 수 있는 방법을 제공합니다.

왼쪽 하단의 원격 표시기를 클릭한 다음 Continue Working on...을 선택합니다.

VS Code Command Palette with "Continue Working on..." command

세 가지 옵션이 제공됩니다.

  • 로컬로 저장소 복제: 현재 저장소를 로컬 컴퓨터로 복제합니다. 로컬 파일 탐색기가 팝업되어 원격 저장소를 복제할 디스크 위치를 선택할 수 있습니다.
  • 컨테이너 볼륨에 저장소 복제: Dev Containers 확장 프로그램을 사용하여 Docker 컨테이너 볼륨에 현재 저장소를 복제합니다(Dev Containers 확장 프로그램과 Docker가 설치되어 있어야 합니다). VS Code가 다시 로드되고 Dev Containers를 사용하여 연결되며, 원격 표시기에는 Dev Container: {image name}이라고 표시됩니다.
  • Codespaces에서 열기: GitHub Codespace에서 작업을 계속합니다. 이 옵션을 선택하면 브라우저가 열리고 해당 저장소의 Codespace 목록으로 이동합니다.

VS Code Command Palette with options to continue locally, in a volume, or in Codespaces

이제 VS Code에서 Remote Repositories를 사용하는 방법을 살펴보았으므로, 이 환경을 지원하는 기술 세부 정보와 확장 프로그램이 Remote Repository 세션에서 작동하도록 보장하는 방법을 설명해 드리겠습니다.

가상 파일 시스템 및 워크스페이스

이 원격 작업을 지원하는 핵심 개념은 가상 파일 시스템과 가상 워크스페이스입니다.

최종 사용자는 작업하려는 저장소 또는 PR만 알면 됩니다. VS Code가 가상 파일 시스템을 처리하고 워크스페이스를 관리합니다. 확장 프로그램 개발자는 확장 프로그램이 예상대로 작동하도록 하려면 가상 파일 시스템 API를 채택해야 합니다.

가상 파일 시스템 작동 방식

전통적인 Git 워크플로에서는 저장소를 "git clone"하고 컴퓨터의 로컬 파일 시스템에 복사본이 저장됩니다. 그러나 Remote Repositories를 사용할 때는 코드가 로컬 컴퓨터에 있지 않습니다. 여전히 GitHub에 있습니다.

가상 파일 시스템을 통해 코드를 작업합니다. 가상 파일 시스템은 디스크에 물리적으로 존재하는 파일에서 추상화된 것입니다. 가상 파일 시스템은 GitHub와 같은 코드 호스트, 클라우드 스토리지 또는 데이터베이스에서 콘텐츠를 제공하고 이를 VS Code 사용자에게 파일로 원활하게 제공할 수 있습니다.

가상 파일 시스템에서 워크스페이스를 열면 가상 워크스페이스라고 합니다. 가상 워크스페이스에서 작업하는 동안에도 확장 프로그램을 포함한 VS Code 기능에 액세스할 수 있습니다.

확장 프로그램이 가상 워크스페이스에서 작동하도록 보장하기

확장 프로그램이 올바르게 작동하려면 가상 파일 시스템을 지원해야 합니다.

확장 프로그램에 코드가 없고 순수 테마, 키 바인딩, 스니펫 또는 문법 확장 프로그램인 경우 가상 워크스페이스에서 실행될 수 있으며 채택이 필요하지 않습니다.

실제로 코드를 실행하는 확장 프로그램(즉, 주 진입점을 정의하는 확장 프로그램)은 검토 및 잠재적인 채택이 필요합니다.

가상 파일 시스템에 대한 API 지원은 FileSystemProvider 인터페이스를 통해 이루어집니다. 파일 시스템 공급자는 새 URI 스키마(예: vscode-vfs)에 대해 등록되며 해당 파일 시스템의 리소스는 해당 스키마를 사용하는 URI(vscode-vfs://github/microsoft/vscode/package.json)로 표시됩니다.

확장 프로그램의 package.json에 capabilities 속성이 있으며, virtualWorkspaces 하위 속성은 확장 프로그램이 가상 워크스페이스와 함께 작동하는지 여부를 나타내는 데 사용됩니다.

가상 파일 시스템, 워크스페이스 및 확장 프로그램에 대한 구현 방법에 대한 자세한 내용은 가상 워크스페이스 확장 작성자 가이드에서 확인할 수 있습니다.

피드백 및 추가 자료

Remote Repositories를 사용해 보시는 것을 매우 기대하고 있으며 여러분의 피드백을 기다리고 있습니다.

Remote Repositories 확장 프로그램을 설치해 주세요. 이슈 또는 기능 요청을 제출하거나 @code로 생각을 트윗해 주세요.

Remote Repositories 확장 프로그램을 사용하는 방법에 대한 새로운 YouTube 동영상도 확인할 수 있습니다.

확장 프로그램 작성자라면 확장 작성자를 위한 가상 워크스페이스 지원 가이드를 확인하고 추적 이슈에 질문이나 피드백을 공유해 주세요. 또한 확장 작성자 커뮤니티 Slack 그룹에 참여할 수 있습니다.

행복한 코딩 되세요!

Brigit Murtaugh, VS Code 프로그램 관리자 @BrigitMurtaugh
Eric Amodio, VS Code 수석 소프트웨어 엔지니어 @eamodio

English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.