# GitHub 웹용 VS Code 사용

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

> \[!NOTE]
> `github.dev`에서 리포지토리를 열면 VS Code for the Web의 브라우저 기반 버전인 VS Code에서 열립니다. 자세한 내용은 설명서를 참조 [VS Code for the Web](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/remote/vscode-web)VS 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 의 설정을 공유할 수도 있습니다. 설명서에서 [설정 동기화](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/editor/settings-sync) 를 VS Code 참조하세요.

VS Code for the Web 는 브라우저의 샌드박스에서 완전히 실행됩니다. 편집기에서 리포지토리를 복제하지 않고 대신 [GitHub 리포지토리 확장](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/editor/github#_github-repositories-extension)을 사용하여 사용할 대부분의 기능을 수행합니다. 작업은 커밋할 때까지 브라우저의 로컬 스토리지에 저장됩니다. 항상 액세스할 수 있도록 변경 내용을 정기적으로 커밋해야 합니다.

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

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

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

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

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

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

* 파일을 볼 때 드롭다운 메뉴를 선택하고 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-triangle-down" aria-label="More edit options" role="img"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg>**github.dev** 클릭합니다.

  ![편집 아이콘 드롭다운 메뉴의 스크린샷입니다. "github.dev" 옵션은 진한 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/github-dev-dropdown-option.png)

## Codespaces 및 VS Code for the Web

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

<div class="ghd-tool rowheaders">

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

</div>

## 원본 제어 사용

사용하는 VS Code for the Web경우 모든 작업은 왼쪽의 작업 표시줄에 있는 "소스 제어" 보기를 통해 관리됩니다. "소스 제어" 보기에 대한 자세한 내용은 설명서의 [버전 제어](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/editor/versioncontrol) 를 VS Code 참조하세요.

VS Code for the Web GitHub 리포지토리 확장을 사용하여 기능을 강화하므로 변경 내용을 숨기지 않고도 분기를 전환할 수 있습니다. 설명서의 [GitHub 리포지토리](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/editor/github#_github-repositories-extension)를 VS Code 참조하세요.

### 새 분기 만들기

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

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

   ![VS Code의 상태 표시줄에 표시된 분기 이름의 스크린샷.](/assets/images/help/codespaces/branch-in-status-bar.png)

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

   ![VS Code에서 새 분기를 만들기 위한 드롭다운의 스크린샷.](/assets/images/help/codespaces/create-new-branch.png)
   이전 분기에서 커밋되지 않은 변경 내용은 새 분기에서 사용할 수 있습니다.

### 변경 내용을 커밋합니다

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

   ![원본 제어 단추가 있는 VS Code 작업 막대의 스크린샷으로, 분기 아이콘으로 레이블이 지정되고 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/githubdotdev-source-control-activity-bar-button.png)

2. 변경 내용을 스테이징하려면 변경한 파일 옆을 클릭하거나 여러 파일을 변경했으며 모두 스테이징하려는 경우 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-plus" aria-label="Stage changes" role="img"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path></svg> 옆을 클릭합니다\*\*\*\*.

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

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

   !["커밋" 단추 위의 텍스트 상자에 입력한 커밋 메시지가 있는 "원본 제어" 사이드바의 스크린샷입니다.](/assets/images/help/codespaces/githubdotdev-codespaces-commit-message.png)

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

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

### 끌어오기 요청 만들기

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

   !["원본 제어" 사이드바 위쪽의 스크린샷. 끌어오기 요청 아이콘이 진한 주황색 윤곽선으로 강조 표시되어 있습니다.](/assets/images/help/codespaces/codespaces-commit-pr-button.png)

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

   !["제목" 및 "설명" 필드를 포함하여 끌어오기 요청을 만들기 위한 양식이 있는 "GitHub 끌어오기 요청" 사이드바의 스크린샷.](/assets/images/help/codespaces/codespaces-commit-pr.png)

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

### 기존 끌어오기 요청 작업

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

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

## 확장 사용

VS Code for the Web 는 VS Code 웹에서 실행되도록 특별히 만들거나 업데이트된 확장을 지원합니다. 이러한 확장은 “웹 확장”으로 알려져 있습니다. 웹 확장을 만들거나 웹에서 작동하도록 기존 확장을 업데이트하는 방법을 알아보려면 설명서의 VS Code[웹 확장을](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/api/extension-guides/web-extensions) 참조하세요.

VS Code for the Web에서 실행할 수 있는 확장은 확장 보기에 표시되며 설치할 수 있습니다. 설정 동기화를 사용하는 경우 호환되는 확장도 자동으로 설치됩니다. 자세한 내용은 설명서의 [설정 동기화](http://gfffhebfdb2e504e84d52snpoqpq6f9pp96wxq.ffgi.yc2.bjmu.edu.cn/docs/editor/settings-sync) 를 VS Code 참조하세요.