GitHub Codespaces
GitHub Codespaces는 장기 프로젝트든, 풀 리퀘스트 검토와 같은 단기 작업이든 모든 활동을 위한 클라우드 기반 개발 환경을 제공합니다. Visual Studio Code 또는 브라우저 기반 편집기에서 이러한 환경으로 작업할 수 있습니다.
환경
환경은 GitHub Codespaces의 "백엔드" 부분입니다. 소프트웨어 개발과 관련된 모든 컴퓨팅이 이루어지는 곳 입니다: 컴파일, 디버깅, 복원 등. 새로운 프로젝트에서 작업하거나 새로운 작업을 시작하거나 PR을 검토해야 할 때, 클라우드 호스팅 환경을 간단히 생성할 수 있으며, GitHub Codespaces가 이를 올바르게 구성합니다. 프로젝트에 필요한 모든 것을 자동으로 구성합니다: 소스 코드, 런타임, 컴파일러, 디버거, 편집기, 사용자 정의 도트파일 구성, 관련 편집기 확장 등.
사용자 정의
GitHub Codespaces는 프로젝트별로 완전히 사용자 정의할 수 있습니다. 이는 프로젝트의 리포지토리에 devcontainer.json 파일을 포함시켜 VS Code Dev Containers 개발과 유사하게 이루어집니다.
예시 사용자 정의 항목은 다음과 같습니다:
- 사용할 리눅스 기반 운영 체제 설정.
- 다양한 도구, 런타임 및 프레임워크 자동 설치.
- 일반적으로 사용되는 포트 포워딩.
- 환경 변수 설정.
- 편집기 설정 구성 및 선호하는 확장 설치.
코드스페이스에 특정한 devcontainer.json 설정에 대한 자세한 내용은 Configuring Codespaces 문서를 참조하세요.
사용자별 도트파일 구성
도트파일은 파일 이름이 점(.)으로 시작하는 파일입니다. 일반적으로 애플리케이션의 구성 정보를 포함하며, 터미널, 편집기, 소스 제어 및 다양한 도구의 동작 방식을 제어할 수 있습니다. .bashrc, .gitignore, .editorconfig는 개발자들이 일반적으로 사용하는 도트파일의 예입니다.
코드스페이스를 생성할 때 도트파일이 포함된 GitHub 리포지토리, 파일의 대상 위치 및 설치 명령을 지정할 수 있습니다.
코드스페이스에 도트파일 구성을 추가하는 방법은 Personalizing Codespaces 문서를 참조하세요.
시작하기
GitHub Codespaces 클라이언트에 대한 시작하기 주제가 있습니다. 이 주제들은 GitHub Codespaces에 로그인하고, 첫 번째 코드스페이스를 생성하고, 선호하는 클라이언트로 연결하는 과정을 빠르게 안내합니다:
- VS Code에서의 코드스페이스 - GitHub Codespaces 확장을 사용하여 환경에 연결하고 작업합니다.
- 브라우저에서의 코드스페이스 - 브라우저 기반 편집기를 통해 코드스페이스에 연결합니다.
확장 작성자
VS Code 확장 API는 원격 실행의 대부분의 구현 세부정보를 숨기므로 많은 확장 기능이 수정 없이 GitHub Codespaces 환경에서 작동합니다. 그러나 모든 기능이 예상대로 작동하는지 확인하기 위해 코드스페이스에서 확장을 테스트하는 것을 권장합니다. 자세한 내용은 Supporting Remote Development and GitHub Codespaces 기사를 참조하세요.
브라우저 기반 편집기
브라우저에서 완전히 무료이고 가벼운 Visual Studio Code 경험을 제공합니다. 웹 기반 편집기를 사용하면 GitHub의 소스 코드 리포지토리를 안전하고 빠르게 탐색하고 가벼운 코드 변경을 할 수 있습니다. 편집기에서 모든 리포지토리, 포크 또는 풀 리퀘스트를 열 수 있으며, VS Code의 많은 기능(검색 및 구문 강조 포함)을 사용할 수 있습니다. 코드를 실행하거나 디버깅하려면 클라우드 호스팅 환경 또는 VS Code 데스크톱으로 전환할 수 있습니다.
이 브라우저 기반 편집기에 접근하려면 github.com에서 리포지토리로 이동한 후 kbstyle(.) (마침표 키)를 누르거나 리포지토리의 URL을 github.dev/org/repo로 변경하여 github.com을 github.dev로 바꾸면 됩니다.
제한 사항: 인코그니토 모드에서 브라우저를 실행하거나 광고 차단기가 활성화된 경우 웹 기반 편집기를 사용할 수 없을 수 있습니다.
참고: 이 편집기는 현재 기술 미리보기 상태입니다. 오늘 사용해보고 https://github.co/browser-editor-feedback에서 피드백을 제공할 수 있습니다.
알려진 제한 사항 및 적응
Codespaces 및 특히 웹에서 VS Code로 작업할 때 염두에 두어야 할 특정 제한 사항이 있습니다. 이러한 제한 사항 중 일부는 일관된 개발 경험을 제공하기 위해 해결 방법이나 적응이 마련되어 있습니다.
여러 문제(특히 키보드 단축키 또는 데스크톱에 대한 해결 방법이 나열된 문제)에 대해, 진보적인 웹 애플리케이션 (PWA)으로서 코드스페이스를 설치하고 사용할 수 있습니다.
| 문제 | 이유 | 해결 방법 |
|---|---|---|
kbstyle(Ctrl+Shift+P)가 Firefox에서 명령 팔레트를 실행하지 않습니다. | kbstyle(Ctrl+Shift+P)는 Firefox에서 예약되어 있습니다. | kbstyle(F1)을 사용하여 명령 팔레트를 실행하세요. |
| 특정 기본 키보드 단축키(디버깅용)가 웹에서 다릅니다. | 브라우저에서 이미 해당 키보드 단축키에 대한 동작이 등록되어 있을 수 있으므로, 웹에서 VS Code의 기본값을 조정합니다. | 조정된 기본값을 사용하세요. 디버그 작업 위에 툴팁을 호버하면 나타납니다.
|
웹 또는 데스크톱에서 디버깅을 위한 kbstyle(F11)이 macOS에서 작동하지 않습니다. | 이는 알려진 비브라우저 특정 제한 사항입니다. 자세한 정보는 문제 #5102에서 확인할 수 있습니다. | macOS에서 데스크톱을 표시하기 위해 kbstyle(F11)을 비활성화하세요.
|
웹에서 새 파일을 위한 kbstyle(Ctrl+N)이 작동하지 않습니다. | kbstyle(Ctrl+N)은 대신 새 창을 엽니다. | 새 파일을 위한 kbstyle(Ctrl+N)은 데스크톱에서 작동합니다. |
웹에서 편집기를 닫기 위한 kbstyle(Ctrl+W)가 작동하지 않습니다. | kbstyle(Ctrl+W)는 브라우저에서 현재 탭을 닫습니다. | kbstyle(Ctrl+W)는 데스크톱에서 작동합니다. |
브라우저에서 즐겨찾기 바를 전환하기 위한 kbstyle(Ctrl+Shift+B)가 작동하지 않습니다. | Codespaces가 이를 재정의하고 명령 팔레트의 "Build" 메뉴로 리디렉션합니다. | 현재 해결 방법은 없습니다. |
| VS Code에서 코드스페이스로 파일을 드래그 앤 드롭하는 것이 작동하지 않습니다. | 문제 #115535에서 더 많은 맥락을 확인할 수 있습니다. | 몇 가지 옵션이 있습니다:
|
| 웹에서 Angular 앱 디버깅이 지원되지 않습니다. | 브라우저에서 실행되는 코드는 보안상의 이유로 다른 브라우저 인스턴스를 디버그 모드로 실행할 수 없습니다. | 몇 가지 옵션이 있습니다:
|
| 브라우저에서 확장자가 없는 파일을 다운로드하면 자동으로 ".txt"가 추가됩니다. | 이는 Chrome 및 Edge의 동작 방식입니다. | 문제 #118436에서 맥락과 잠재적인 향후 솔루션을 확인하세요. |
| 원격(코드스페이스 포함)에서 파일을 다운로드할 때 실행 비트와 같은 속성이 제거됩니다. | 문제 #112099에서 맥락과 잠재적인 향후 솔루션을 확인할 수 있습니다. | 현재 해결 방법은 없습니다. |
코드스페이스에서 특정 폴더를 다운 로드하려고 할 때 "Your_codespace_name이 시스템 파일을 포함하고 있어 이 폴더를 열 수 없습니다."라는 메시지가 표시될 수 있습니다. | 사용자 에이전트는 민감한 디렉토리에 대한 제한 수준을 부과할 수 있습니다. 더 많은 정보는 이 사양 및 Chromium의 차단 목록에서 확인할 수 있습니다. | 사양 및 차단 목록 외에 추가적인 해결 방법은 없습니다. |
수동으로 http://localhost:forwarded_port를 방문해도 웹에서 코드스페이스의 포워딩된 포트에 접근할 수 없습니다. | 이는 Codespaces가 포트 포워딩을 처리하고 웹에 대한 올바른 URL을 생성하는 방식에 기반합니다. | 포트 포워딩 알림에서 링크를 클릭하여 앱을 열거나, Ports view에서 지구 아이콘을 클릭하여 올바르게 생성된 링크를 제공합니다. 더 많은 정보는 Codespaces 문서에서 확인할 수 있습니다. |
일부 확장은 웹에서 다르게 작동합니다
| 확장 | 문제 / 이유 | 해결 방법 |
|---|---|---|
브라우저 단축키와 겹치는 키보드 단축키가 있는 확장, 예를 들어 kbstyle(Ctrl+R)를 사용하여 새로 고침하는 Git Graph. | 키보드 단축키가 기존 브라우저 단축키와 겹칠 수 있습니다. 예를 들어 kbstyle(Ctrl+R)는 Safari에서 창을 새로 고칩니다. | 웹 기반 코드스페이스가 아닌 데스크톱 기반 코드스페이스를 사용하여 키보드 단축키를 완전히 활용할 수 있습니다. 다른 브라우저는 다르게 작동할 수 있습니다(Chrome에서 Git Graph를 새로 고칠 수 있습니다). |
| 언어 팩, 예를 들어 Visual Studio Code용 일본어 언어 팩 | 언어 팩 확장은 현재 웹 기반 코드스페이스에서 지원되지 않습니다. | 언어 팩을 사용하고 표시 언어를 구성하려면 데스크톱 기반 코드스페이스를 사용할 수 있습니다. |
| Bracket Pair Colorizer 2 | 브라우저에서는 설치 위치 종속성을 도입하므로 작동하지 않습니다. | Bracket Pair Colorizer를 사용하세요. |
| 브라우저 디버거, 예를 들어 Firefox 디버거. | UI/데스크톱 확장 호 스트가 필요한 확장은 브라우저에서 로드되지 않습니다. | 이러한 확장은 로컬 VS Code(코드스페이스에 연결되지 않음)에서 사용할 수 있습니다. 또는 앱이 코드스페이스에서 실행되는 동안 Chrome DevTools와 같은 대안을 사용하여 요소를 검사하고 중단점을 설정할 수 있습니다. |
| 브라우저를 여는 확장, 예를 들어 open in browser. | UI/데스크톱 확장 호스트가 필요한 확장은 브라우저에서 로드되지 않습니다. | 가능하다면 대체 확장을 사용하세요. 예를 들어 Live Server를 사용할 수 있습니다. |
| Project Manager | Project Manager는 사용자 정의 projects.json 파일을 동기화하는 데 의존하는데, 이는 현재 지원되지 않습니다. | 데스크톱 코드스페이스 또는 로컬 VS Code에서 이 확장을 사용하여 프로젝트를 저장하고 관리할 수 있습니다. 이러한 옵션은 사용자 정의 파일을 동기화할 필요가 없습니다. |
| Chrome에 의존하는 확장, 예를 들어 Protractor Test Runner 및 Browser Preview. | Chrome은 코드스페이스에 포함되어 있지 않습니다. | 대체 경험을 찾아보거나, 로컬 VS Code(코드스페이스에 연결되지 않음)에서 프로젝트에 이러한 확장을 사용할 수 있습니다. |
| Flutter (및 Flutter 개발 전반) | Flutter 워크플로의 여러 측면은 Docker 컨테이너와 코드스페이스의 특성으로 인해 제한됩니다.
| 로컬 VS Code에서 Flutter 개발을 할 수 있습니다. |
| LaTeX Workshop | 이 확장은 LaTeX 저작을 돕기 위해 세 가지 종류의 기능을 제공합니다: 1) 일반 명령을 표시하는 뷰 세트, 2) PDF 미리보기기, 3) 스니펫 및 IntelliSense와 같은 언어 기능. 이 확장은 상당히 기능적으로 사용할 수 있지만, 웹 또는 보안 제한이 있습니다. | 다음 해결 방법은 뷰 및 미리보기 기능 영역의 제한을 해결합니다:
|
| Git Graph | 일부 Git Graph 웹뷰 기능은 코드스페이스에서 제한될 수 있습니다. 예를 들어, 커밋의 파일과 Git Graph 웹뷰 간 전환 시 웹뷰가 비어 있을 수 있습니다. | Git Graph를 VS Code 데스크톱 내에서 완전히 사용할 수 있습니다. |
| 기타 원격 개발 확장 (WSL, Dev Containers, Remote - SSH)는 코드스페이스에 설치할 수 없습니다. | 코드스페이스는 이미 원격 컨텍스트입니다. | 다른 원격 컨텍스트(예: WSL 또는 원격 SSH 컴퓨터)에서 실행하려면 VS Code 데스크톱(코드스페이스에 연결되지 않음)을 열고 다른 원격 확장을 실행하세요. 사용자 정의 dev 컨테이너를 사용하려면 코드스페이스와 Dev Containers 모두에서 동일한 .devcontainer를 사용할 수 있습니다. |
| My_Favorite_Extension이 작동하지 않으며 위에 나열되지 않았습니다. | 원격 컨텍스트에서 기능이 예상대로 작동하지 않도록 방해하는 몇 가지 다른 문제가 있습니다. | 경우에 따라 다른 명령을 사용하여 문제를 해결할 수 있지만, 다른 경우에는 확장을 수정해야 할 수도 있습니다. 일반적인 원격 문제 및 해결 방법에 대한 팁은 원격 확장 팁을 확인하세요. |
자주 묻는 질문
브라우저에서 확장을 설치할 수 없는 이유는 무엇인가요?
내장된 가정이 있거나 데스크톱에서 실행해야 하는 확장이 소수 존재합니다. 예를 들어, 확장이 데스크톱의 VS Code 설치에서 파일에 접근하거나 실행해야 하는 실행 파일에 의존하는 경우입니다. 이러한 확장을 브라우저에서 설치하려고 하면 해당 확장이 사용 가능하지 않다는 알림을 받게 됩니다.
알림: 이러한 확장은 여전히 데스크톱에서 실행되는 VS Code에서 코드스페이스에 연결할 때 사용할 수 있습니다.
VS Code가 내 클립보드에 접근할 수 있도록 허용하려면 어떻게 하나요?
경우에 따라 VS Code가 클립보드에서 읽기 위해 접근 권한을 요청할 수 있습니다. 브라우저의 설정(“사이트 권한” 검색) 또는 주소 표시줄 오른쪽에서 이 옵션을 찾아 클립보드 접근을 허용할 수 있습니다:
VS Code에 클립보드 접근을 허용한 후, 작업을 다시 시도할 수 있습니다.
VS Code가 항상 새 탭과 창을 열 수 있도록 허용하려면 어떻게 하나요?
때때로 브라우저는 보안 예방 조치로 VS Code가 새 탭이나 창을 여는 것을 차단할 수 있습니다. 이 경우 VS Code는 차단된 동작을 감지하고 사용자에게 명시적으로 알립니다. 그러나 브라우저 탐색 모음의 컨텍스트 메뉴를 통해 사이트 설정을 열고 팝업 창을 허용하여 VS Code가 항상 새 창과 탭을 열 수 있도록 허용할 수 있습니다.
브라우저에서 VS Code가 로컬 파일과 폴더에 접근할 수 있도록 허용하려면 어떻게 하나요?
브라우저에서 VS Code로 로컬 파일과 폴더를 여는 것은 브라우저가 파일 시스템 접근 API를 지원해야 합니다. 현재 Microsoft Edge와 Google Chrome이 이 수준의 지원을 제공합니다. 브라우저에서 VS Code를 사용할 때 로컬 파일과 폴더에 접근하려면 이 두 브라우저 중 하나로 전환하는 것을 고려하세요.