codespace에서 개발

브라우저, Visual Studio Code, JetBrains IDE 또는 명령 셸을 사용하여 codespace에서 작업할 수 있습니다.

이 문서의 내용

참고:

  • GitHub Codespaces을(를) JetBrains IDE와 함께 사용하는 것은 현재 공개 미리 보기 버전이며 변경될 수 있습니다.
  • JetBrains IDE에서 codespace에서 작업하려면 JetBrains 게이트웨이의 릴리스 2023.3.* 또는 2024.1.*를 사용해야 합니다.

GitHub Codespaces를 사용한 개발 정보

선택한 도구를 사용하여 codespace에서 코드를 개발할 수 있습니다.

  • GitHub CLI을(를) 사용하여 시작된 SSH 연결을 통한 명령 셸
  • JetBrains 게이트웨이를 통해 JetBrains IDE 중 하나임
  • Visual Studio Code 데스크톱 응용 프로그램
  • 브라우저 기반 버전의 Visual Studio Code

이 문서의 탭을 사용하면 이러한 각 작업 방식에 대한 정보 간에 전환할 수 있습니다. 현재 웹 브라우저 버전의 Visual Studio Code의 탭에 있습니다.

브라우저의 codespace에서 작업

브라우저에서 Codespaces을(를) 사용하면 완전한 기능을 갖춘 개발 환경을 제공합니다. 코드를 편집하고, 디버그하고, Git 명령을 사용하고, 애플리케이션을 실행할 수 있습니다.

사이드바, 작업 표시줄, 편집기, 패널, 상태 막대 등 사용자 인터페이스의 5가지 기본 구성 요소에 주석이 추가된 스크린샷

사용자 인터페이스의 주요 구성 요소는 다음과 같습니다.

  1. 사이드바 - 기본적으로 Explorer의 이 영역에는 프로젝트 파일이 표시됩니다.
  2. 작업 표시줄 - 보기를 표시하고 보기 간에 전환하는 방법을 제공합니다. 보기를 끌어서 놓으면 보기의 순서를 변경할 수 있습니다.
  3. 편집기 - 파일을 편집하는 위치입니다. 탐색기에서 파일 찾기와 같은 옵션에 액세스하려면 파일의 탭을 마우스 오른쪽 단추로 클릭하십시오.
  4. 패널 - 통합 터미널의 기본 위치뿐만 아니라 출력 및 디버그 정보를 볼 수 있습니다.
  5. 상태 표시줄 - 이 영역에서는 codespace 및 프로젝트에 대한 유용한 정보를 제공합니다. 예를 들어 분기 이름, 구성된 포트 등이 있습니다. 최상의 GitHub Codespaces 환경을 위해 Google Chrome 또는 Microsoft Edge와 같은 Chromium 기반 브라우저를 사용하는 것이 좋습니다. 자세한 내용은 "GitHub 코드스페이스 클라이언트 문제 해결"(을)를 참조하세요.

리포지토리에 대한 codespace 사용자 지정

리포지토리에 대한 개발 컨테이너 구성을 만들거나 업데이트하여 리포지토리에 대해 만들어진 codespace를 사용자 지정할 수 있습니다. codespace 내에서 이 작업을 수행할 수 있습니다. 개발 컨테이너 구성이 변경된 후 codespace에 대한 Docker 컨테이너를 다시 빌드하여 현재 codespace에 대한 변경 내용을 적용할 수 있습니다. 자세한 내용은 "개발 컨테이너 소개"을(를) 참조하세요.

codespace 맞춤화

dot 파일 리포지토리 및 설정 동기화를 사용하여 사용자가 만든 모든 codespace에 대한 codespace 환경의 측면을 개인 설정할 수 있습니다. 개인 설정에는 셸 기본 설정 및 추가 도구가 포함될 수 있습니다. 자세한 내용은 "계정에 맞게 GitHub Codespaces 개인 설정"을(를) 참조하세요.

codespace에서 앱 실행

codespace의 포트를 전달하여 애플리케이션을 테스트하고 디버그할 수 있습니다. 포트 프로토콜을 관리하고 조직 내에서 또는 공개적으로 포트를 공유할 수도 있습니다. 자세한 내용은 "codespace의 포트 전달"을(를) 참조하세요.

변경 내용 커밋

새 코드 또는 구성 변경을 통해 codespace를 변경한 후에 변경 내용을 커밋할 수 있습니다. 리포지토리에 구성 변경 내용을 커밋하면 이 리포지토리에서 codespace를 만드는 다른 모든 사용자가 동일한 구성을 갖게 됩니다. 모든 사용자에게 VS Code 확장 추가와 같은 모든 사용자 지정이 표시됨을 의미합니다.

이 자습서에서는 템플릿 리포지토리에서 codespace를 만들었으므로 codespace의 코드는 아직 리포지토리에 저장되지 않습니다. 현재 분기를 GitHub에 게시하여 리포지토리를 만들 수 있습니다.

자세한 내용은 "codespace에서 원본 제어 사용"을 참조하세요.

Visual Studio Code Command Palette 사용

Visual Studio Code Command Palette를 사용하면 Codespaces 및 Visual Studio Code에 대한 많은 기능에 액세스하고 관리할 수 있습니다. 자세한 내용은 "Github Codespaces에서 Visual Studio Code 명령 팔레트 사용"을(를) 참조하세요.

기존 codespace로 이동

  1. "내 codespaces" 페이지에서 자신이 만든 사용 가능한 모든 codespace를 볼 수 있습니다. 이 페이지를 표시하려면 GitHub의 왼쪽 위 모서리에서 을(를) 선택한 다음 Codespaces를 클릭합니다. 이렇게 하면 github.com/codespaces로 이동합니다.

  2. 개발하려는 codespace의 이름을 클릭합니다.

    https://github.com/codespaces 페이지의 세 codespace 목록 스크린샷.

또는 해당 리포지토리로 이동하여 Code 버튼을 클릭하고 Codespaces 탭을 선택하여 특정 리포지토리에 대한 codespace를 볼 수 있습니다. 드롭다운 메뉴에는 리포지토리에 대한 모든 활성 코드스페이스가 표시됩니다.

이 문서의 탭을 사용하면 이러한 각 작업 방식에 대한 정보 간에 전환할 수 있습니다. 현재 Visual Studio Code의 탭에 있습니다.

VS Code에서 codespace 작업

GitHub Codespaces는 Visual Studio Code의 전체 개발 경험을 제공합니다. VS Code를 사용하여 codespace에서 개발하는 동안 코드를 편집하고, 디버그하고, Git 명령을 사용할 수 있습니다. 자세한 내용은 VS Code 설명서를 참조하세요.

사이드바, 작업 표시줄, 편집기, 패널, 상태 막대 등 사용자 인터페이스의 5가지 기본 구성 요소에 주석이 추가된 스크린샷

사용자 인터페이스의 주요 구성 요소는 다음과 같습니다.

  1. 사이드바 - 기본적으로 Explorer의 이 영역에는 프로젝트 파일이 표시됩니다.
  2. 작업 표시줄 - 보기를 표시하고 보기 간에 전환하는 방법을 제공합니다. 보기를 끌어서 놓으면 보기의 순서를 변경할 수 있습니다.
  3. 편집기 - 파일을 편집하는 위치입니다. 탐색기에서 파일 찾기와 같은 옵션에 액세스하려면 파일의 탭을 마우스 오른쪽 단추로 클릭하십시오.
  4. 패널 - 통합 터미널의 기본 위치뿐만 아니라 출력 및 디버그 정보를 볼 수 있습니다.
  5. 상태 표시줄 - 이 영역에서는 codespace 및 프로젝트에 대한 유용한 정보를 제공합니다. 예를 들어 분기 이름, 구성된 포트 등이 있습니다.

VS Code 사용에 대한 자세한 내용은 VS Code 설명서에서 사용자 인터페이스 가이드를 참조하세요.

VS Code에서 직접 codespace에 연결할 수 있습니다. 자세한 내용은 "Visual Studio Code에서 Github Codespaces 사용"을(를) 참조하세요.

문제 해결 정보는 "GitHub 코드스페이스 클라이언트 문제 해결"을(를) 참조하세요.

리포지토리에 대한 codespace 사용자 지정

리포지토리에 대한 개발 컨테이너 구성을 만들거나 업데이트하여 리포지토리에 대해 만들어진 codespace를 사용자 지정할 수 있습니다. codespace 내에서 이 작업을 수행할 수 있습니다. 개발 컨테이너 구성이 변경된 후 codespace에 대한 Docker 컨테이너를 다시 빌드하여 현재 codespace에 대한 변경 내용을 적용할 수 있습니다. 자세한 내용은 "개발 컨테이너 소개"을(를) 참조하세요.

codespace 맞춤화

dot 파일 리포지토리 및 설정 동기화를 사용하여 사용자가 만든 모든 codespace에 대한 codespace 환경의 측면을 개인 설정할 수 있습니다. 개인 설정에는 셸 기본 설정 및 추가 도구가 포함될 수 있습니다. 자세한 내용은 "계정에 맞게 GitHub Codespaces 개인 설정"을(를) 참조하세요.

codespace에서 앱 실행

codespace의 포트를 전달하여 애플리케이션을 테스트하고 디버그할 수 있습니다. 포트 프로토콜을 관리하고 조직 내에서 또는 공개적으로 포트를 공유할 수도 있습니다. 자세한 내용은 "codespace의 포트 전달"을(를) 참조하세요.

변경 내용 커밋

새 코드 또는 구성 변경을 통해 codespace를 변경한 후에 변경 내용을 커밋할 수 있습니다. 리포지토리에 구성 변경 내용을 커밋하면 이 리포지토리에서 codespace를 만드는 다른 모든 사용자가 동일한 구성을 갖게 됩니다. 모든 사용자에게 VS Code 확장 추가와 같은 모든 사용자 지정이 표시됨을 의미합니다.

이 자습서에서는 템플릿 리포지토리에서 codespace를 만들었으므로 codespace의 코드는 아직 리포지토리에 저장되지 않습니다. 현재 분기를 GitHub에 게시하여 리포지토리를 만들 수 있습니다.

자세한 내용은 "codespace에서 원본 제어 사용"을 참조하세요.

Visual Studio Code Command Palette 사용

Visual Studio Code Command Palette를 사용하면 Codespaces 및 Visual Studio Code에 대한 많은 기능에 액세스하고 관리할 수 있습니다. 자세한 내용은 "Github Codespaces에서 Visual Studio Code 명령 팔레트 사용"을(를) 참조하세요.

기존 codespace로 이동

  1. "내 codespaces" 페이지에서 자신이 만든 사용 가능한 모든 codespace를 볼 수 있습니다. 이 페이지를 표시하려면 GitHub의 왼쪽 위 모서리에서 을(를) 선택한 다음 Codespaces를 클릭합니다. 이렇게 하면 github.com/codespaces로 이동합니다.

  2. 개발하려는 codespace의 이름을 클릭합니다.

    https://github.com/codespaces 페이지의 세 codespace 목록 스크린샷.

또는 해당 리포지토리로 이동하여 Code 버튼을 클릭하고 Codespaces 탭을 선택하여 특정 리포지토리에 대한 codespace를 볼 수 있습니다. 드롭다운 메뉴에는 리포지토리에 대한 모든 활성 코드스페이스가 표시됩니다.

이 문서의 탭을 사용하면 이러한 각 작업 방식에 대한 정보 간에 전환할 수 있습니다. 현재 JetBrains IDE 탭에 있습니다.

JetBrains IDE의 codespace에서 작업

JetBrains에서 GitHub Codespaces을 사용하려면 JetBrains 게이트웨이에 이미 JetBrains IDE가 설치되어 있어야 합니다. JetBrains 게이트웨이 설치에 대한 자세한 내용은 JetBrains 웹사이트를 참조하세요.

선택한 JetBrains IDE를 사용하여 codespace에서 작업할 수 있습니다. codespace를 만든 후 JetBrains 게이트웨이 응용 프로그램을 사용하여 선호하는 IDE에서 codespace를 열 수 있습니다.

JetBrains IDE를 사용하여 codespace에서 개발하는 동안 코드를 편집하고, 디버그하고, Git 명령을 사용할 수 있습니다. 다양한 JetBrains IDE에 대한 자세한 내용은 JetBrains 설명서를 참조하세요.

IntelliJ IDEA 사용자 인터페이스

GitHub Codespaces 설명서 내에서 IntelliJ IDEA를 대표적인 JetBrains IDE로 사용합니다. JetBrains IDE에 따라 레이아웃이 다를 수 있습니다.

JetBrains IntelliJ IDEA에 대한 사용자 인터페이스의 6개 기본 구성 요소에 대한 주석이 추가된 스크린샷

사용자 인터페이스의 주요 구성 요소는 다음과 같습니다.

  1. 탐색 모음 - 현재 선택한 파일 또는 디렉터리의 경로가 표시됩니다. 탐색 모음 오른쪽에 있는 단추를 사용하여 프로젝트 빌드, 실행 또는 디버깅, Git 명령 실행 등 다양한 작업을 수행하여 변경 내용을 커밋하고 푸시합니다.
  2. 프로젝트 도구 창 - 프로젝트의 구조를 보여 줍니다. 그러면 편집기에서 파일을 열 수 있습니다.
  3. GitHub Codespaces 도구 창 - 도구 창 왼쪽의 막대에서 GitHub Codespaces 플러그 인을 클릭하여 표시됩니다. 표시 이름 및 컴퓨터 형식을 포함하여 codespace에 대한 정보를 표시합니다. 이 도구 창의 맨 위에 있는 단추를 사용하여 다음을 수행할 수 있습니다.
    • 활성 codespace에 대한 도구 창의 세부 정보 새로 고침
    • "사용자 codespace" 웹 페이지 표시
    • codespace 만들기 로그 보기
  4. 편집기 - 파일을 편집하는 위치입니다. 탭을 새 창으로 이동하는 등의 옵션에 액세스하려면 파일의 탭을 마우스 오른쪽 단추로 클릭할 수 있습니다.
  5. 터미널 - 주 창 아래쪽의 도구 창 표시줄에서 터미널을 클릭하여 표시됩니다(상태 표시줄 바로 위). 통합 터미널을 사용하면 전용 터미널 응용 프로그램으로 전환하지 않고도 명령줄 작업을 수행할 수 있습니다.
  6. 상태 표시줄 - 도구 목록을 보려면 상태 표시줄 왼쪽의 아이콘을 마우스로 가리킵니다. 아이콘을 클릭하여 도구 창 표시줄을 숨기거나 표시합니다. 상태 표시줄의 오른쪽에는 현재 Git 분기를 포함하여 프로젝트에 대한 정보가 표시됩니다.

IntelliJ IDEA 사용자 인터페이스에 대한 자세한 내용은 IntelliJ IDEA에 대한 JetBrains 설명서를 참조하세요.

리포지토리에 대한 codespace 사용자 지정

리포지토리에 대한 개발 컨테이너 구성을 만들거나 업데이트하여 리포지토리에 대해 만들어진 codespace를 사용자 지정할 수 있습니다. codespace 내에서 이 작업을 수행할 수 있습니다. 개발 컨테이너 구성이 변경된 후 codespace에 대한 Docker 컨테이너를 다시 빌드하여 현재 codespace에 대한 변경 내용을 적용할 수 있습니다. 자세한 내용은 "개발 컨테이너 소개"을(를) 참조하세요.

codespace 맞춤화

dot 파일 리포지토리 및 설정 동기화를 사용하여 사용자가 만든 모든 codespace에 대한 codespace 환경의 측면을 개인 설정할 수도 있습니다. 자세한 내용은 "계정에 맞게 GitHub Codespaces 개인 설정"을(를) 참조하세요.

변경 내용 커밋

새 코드 또는 구성 변경을 통해 codespace를 변경한 후에 변경 내용을 커밋하고 푸시할 수 있습니다. 리포지토리에 변경 내용을 푸시하면 이 리포지토리에서 codespace를 만드는 다른 모든 사용자가 동일한 구성을 갖게 됩니다. 이는 리포지토리에 대해 생성된 codespace의 구성을 수정하기 위해 수행하는 모든 사용자 지정을 리포지토리를 사용하는 모든 사용자가 사용할 수 있음을 의미합니다.

자세한 정보는 "codespace에서 원본 제어 사용" 항목을 참조하세요.

추가 참고 자료

이 문서의 탭을 사용하면 이러한 각 작업 방식에 대한 정보 간에 전환할 수 있습니다. 현재 GitHub CLI의 탭에 있습니다.

명령 셸의 codespace에서 작업

Dependabot alerts의 자세한 내용은 “GitHub CLI 정보”를 참조하세요.

GitHub CLI을(를) 사용하여 새 codespace를 만들거나 기존 코드스페이스를 시작한 다음 SSH를 수행할 수 있습니다. 연결되면 기본 명령줄 도구를 사용하여 명령줄에서 작업할 수 있습니다.

GitHub CLI을(를) 설치하고 GitHub 계정으로 인증한 후에는 이 명령 gh codespace [<SUBCOMMAND>...] --help을 사용하여 도움말 정보를 찾아볼 수 있습니다. 또는 https://cli.github.com/manual/gh_codespace에서 동일한 참조 정보를 볼 수 있습니다.

자세한 내용은 "GitHub CLI에서 GitHub Codespaces 사용"을(를) 참조하세요.