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