GitHub 웹용 VS Code 사용

VS Code for the Web에서 직접 GitHub로 리포지토리 또는 풀 리퀘스트를 열어 코드를 살펴보고, 파일을 편집하고, 변경 내용을 커밋할 수 있습니다.

이 기사에서

참고

github.dev에서 리포지토리를 열면 VS Code for the Web의 브라우저 기반 버전인 VS Code에서 열립니다. 자세한 내용은 설명서를 참조 VS Code for the WebVS Code 하세요.

정보 VS Code for the Web

VS Code for the Web 는 브라우저에서 완전히 실행되는 간단한 편집 환경입니다. 를 사용하여 VS Code for the Web파일 및 소스 코드 리포지토리를 GitHub탐색하고 코드를 변경하고 커밋할 수 있습니다. 편집기에서 리포지토리, 포크 또는 끌어오기 요청을 열 수 있습니다.

VS Code for the Web는 GitHub.com에서 누구나 무료로 이용할 수 있습니다.

VS Code for the Web 는 검색, 구문 강조 표시 및 소스 제어 뷰와 같은 많은 이점을 Visual Studio Code제공합니다. 설정 동기화를 사용하여 편집기에서 사용자 고유 VS Code 의 설정을 공유할 수도 있습니다. 설명서에서 설정 동기화 를 VS Code 참조하세요.

VS Code for the Web 는 브라우저의 샌드박스에서 완전히 실행됩니다. 편집기에서 리포지토리를 복제하지 않고 대신 GitHub 리포지토리 확장을 사용하여 사용할 대부분의 기능을 수행합니다. 작업은 커밋할 때까지 브라우저의 로컬 스토리지에 저장됩니다. 항상 액세스할 수 있도록 변경 내용을 정기적으로 커밋해야 합니다.

GitHub를 사용하려면 VS Code for the Web에 로그인해야 합니다.

VS Code for the Web을(를) GitHub에서 여는 중

GitHub 리포지토리를 VS Code for the Web에서 다음 방법 중 하나로 열 수 있습니다.

  • 동일한 브라우저 탭에서 리포지토리를 열려면 .를 누릅니다. GitHub에서 리포지토리나 풀 리퀘스트를 살펴보는 동안.

    새 브라우저 탭에서 리포지토리를 열려면 >를 누릅니다.

  • URL을 “github.com”에서 “github.dev”로 변경합니다.

  • 파일을 볼 때 드롭다운 메뉴를 선택하고 github.dev 클릭합니다.

    편집 아이콘 드롭다운 메뉴의 스크린샷입니다. "github.dev" 옵션은 진한 주황색 윤곽선으로 강조 표시됩니다.

Codespaces 및 VS Code for the Web

VS Code for the Web와 GitHub Codespaces 모두 리포지토리에서 바로 코드를 편집할 수 있게 해줍니다. 그러나 사용 사례에 따라 둘 다 약간 다른 이점이 있습니다.

VS Code for the WebGitHub Codespaces
비용무료.개인 계정의 무료 월별 사용 할당량은 GitHub Codespaces 청구을(를) 참조하세요.
가용성GitHub.com의 모든 사용자가 사용할 수 있습니다.GitHub.com의 모든 사용자가 사용할 수 있습니다.
시작VS Code for the Web 키를 누르면 즉시 열리고 추가 구성 또는 설치를 기다리지 않고 바로 사용할 수 있습니다.codespace를 만들거나 다시 시작하면 codespace에 VM이 할당되고 파일 내용 devcontainer.json에 따라 컨테이너가 구성됩니다. 이 설정은 환경을 만드는 데 몇 분 정도 걸릴 수 있습니다. 리포지토리에 대한 codespace 만들기을(를) 참조하세요.
컴퓨팅연결된 컴퓨팅이 없으므로 코드를 빌드 및 실행하거나 통합 터미널을 사용할 수 없습니다.이 GitHub Codespaces기능을 사용하면 애플리케이션을 실행하고 디버그할 수 있는 전용 VM의 기능을 얻을 수 있으며, 로컬 환경에서와 똑같이 터미널을 사용할 수 있습니다.
확장 기능웹에서 실행할 수 있는 확장의 하위 집합만 확장 보기에 표시되며 설치할 수 있습니다. 확장 사용을 참조하세요.GitHub Codespaces를 사용하면 Visual Studio Code Marketplace의 대부분의 확장을 사용할 수 있습니다.

원본 제어 사용

사용하는 VS Code for the Web경우 모든 작업은 왼쪽의 작업 표시줄에 있는 "소스 제어" 보기를 통해 관리됩니다. "소스 제어" 보기에 대한 자세한 내용은 설명서의 버전 제어 를 VS Code 참조하세요.

VS Code for the Web GitHub 리포지토리 확장을 사용하여 기능을 강화하므로 변경 내용을 숨기지 않고도 분기를 전환할 수 있습니다. 설명서의 GitHub 리포지토리를 VS Code 참조하세요.

새 분기 만들기

  1. 현재 분기가 상태 표시줄에 표시되지 않으면 codespace 아래쪽에서 상태 표시줄을 마우스 오른쪽 단추로 클릭하고 소스 제어를 선택합니다.

  2. 상태 표시줄에서 분기 이름을 클릭합니다.

    VS Code의 상태 표시줄에 표시된 분기 이름의 스크린샷.

  3. 드롭다운에서 전환하려는 분기를 클릭하거나 새 분기의 이름을 입력하고 새 분기 만들기를 클릭합니다.

    VS Code에서 새 분기를 만들기 위한 드롭다운의 스크린샷. 이전 분기에서 커밋되지 않은 변경 내용은 새 분기에서 사용할 수 있습니다.

변경 내용을 커밋합니다

  1. 작업 표시줄에서 Source Control(원본 제어) 보기를 클릭합니다.

    원본 제어 단추가 있는 VS Code 작업 막대의 스크린샷으로, 분기 아이콘으로 레이블이 지정되고 주황색 윤곽선으로 강조 표시됩니다.

  2. 변경 내용을 스테이징하려면 변경한 파일 옆을 클릭하거나 여러 파일을 변경했으며 모두 스테이징하려는 경우 옆을 클릭합니다****.

    "변경 내용" 항목 오른쪽에 있는 스테이징 단추(더하기 기호)이 진한 주황색 윤곽선으로 강조된 "원본 제어" 사이드바의 스크린샷입니다.

  3. 변경 내용을 설명하는 커밋 메시지를 텍스트 상자에 입력합니다.

    "커밋" 단추 위의 텍스트 상자에 입력한 커밋 메시지가 있는 "원본 제어" 사이드바의 스크린샷입니다.

  4. 커밋 & 푸시를 클릭합니다.

    변경 사항이 자동으로 GitHub의 회원님의 브랜치로 푸시됩니다.

끌어오기 요청 만들기

  1. 리포지토리의 로컬 복사본에 대한 변경 내용을 커밋한 후 "소스 제어" 사이드바의 제일 위에서 끌어오기 요청 아이콘을 클릭합니다.

    "원본 제어" 사이드바 위쪽의 스크린샷. 끌어오기 요청 아이콘이 진한 주황색 윤곽선으로 강조 표시되어 있습니다.

  2. 병합하려는 로컬 분기 및 리포지토리와 병합하려는 원격 분기 및 리포지토리가 올바른지 확인합니다. 그런 다음 끌어오기 요청에 제목과 설명을 제공합니다.

    "제목" 및 "설명" 필드를 포함하여 끌어오기 요청을 만들기 위한 양식이 있는 "GitHub 끌어오기 요청" 사이드바의 스크린샷.

  3. 만들기를 클릭합니다.

기존 끌어오기 요청 작업

기존 풀 리퀘스트로 작업하려면 VS Code for the Web을(를) 사용할 수 있습니다.

  1. VS Code for the Web에서 열려는 pull request로 이동합니다.
  2. .를 눌러 VS Code for the Web에서 풀 리퀘스트를 엽니다.
  3. 변경 내용을 적용했으면 변경 내용 커밋의 단계를 사용하여 커밋합니다. 변경 내용이 브랜치에 직접 커밋되므로 변경 내용을 푸시할 필요가 없습니다.

확장 사용

VS Code for the Web 는 VS Code 웹에서 실행되도록 특별히 만들거나 업데이트된 확장을 지원합니다. 이러한 확장은 “웹 확장”으로 알려져 있습니다. 웹 확장을 만들거나 웹에서 작동하도록 기존 확장을 업데이트하는 방법을 알아보려면 설명서의 VS Code웹 확장을 참조하세요.

VS Code for the Web에서 실행할 수 있는 확장은 확장 보기에 표시되며 설치할 수 있습니다. 설정 동기화를 사용하는 경우 호환되는 확장도 자동으로 설치됩니다. 자세한 내용은 설명서의 설정 동기화 를 VS Code 참조하세요.