Visual Studio Code에서 GitHub Codespaces 사용

          Visual Studio Code에서 직접 개발하려면 GitHub Codespaces 확장을 GitHub 계정과 연결하세요.

이 기사에서

에 대한

로컬 설치 Visual Studio Code 를 사용하여 코드스페이스를 만들고, 관리하고, 작업하고, 삭제할 수 있습니다. VS Code에서 GitHub Codespaces를 사용하려면 Codespaces 확장을 설치해야 합니다. VS Code에서 GitHub Codespaces를 설정하는 방법에 대한 자세한 정보는 사전 준비 사항을 참조하세요.

기본적으로 새 코드스페이스를 GitHub만들면 브라우저에서 열립니다. 새 코드스페이스를 VS Code 자동으로 열려면 기본 편집기를 VS Code되도록 설정할 수 있습니다. 자세한 내용은 GitHub Codespaces에 대한 기본 편집기 설정을(를) 참조하세요.

브라우저에서 작업하는 것을 선호하지만 기존 VS Code 확장, 테마 및 바로 가기를 계속 사용하려는 경우 설정 동기화를 켤 수 있습니다. 자세한 내용은 계정에 대한 GitHub Codespace 개인 설정을 참조하세요.

필수 조건

직접 VS Code에서 코드스페이스를 개발하려면, GitHub 자격 증명을 사용하여 GitHub Codespaces 확장을 설치하고 로그인해야 합니다. GitHub Codespaces 확장에는 2020년 10월 릴리스 1.51 이상이 필요합니다VS Code.

          Visual Studio Code Marketplace를 사용하여 [GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) 확장을 설치하십시오. 자세한 내용은 설명서의 [확장 마켓플레이스](https://code.visualstudio.com/docs/editor/extension-gallery)를 VS Code참조하세요.

  1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.

    작업 표시줄의 스크린샷. "원격 탐색기" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.

    참고

    원격 탐색기가 작업 막대에 표시되지 않는 경우:

    1. 명령 팔레트에 액세스합니다. 예를 들어, Shift+Command+P(Mac)/Ctrl+Shift+P(Windows/Linux)를 누릅니다.
    2. 유형: details.
    3. Codespaces: 세부 정보를 클릭합니다.

  2. "GitHub Codespaces원격 탐색기" 사이드바의 맨 위에 있는 드롭다운에서 ""를 선택합니다(아직 선택되지 않은 경우).

  3.        **
       GitHub 로그인**을 클릭합니다.

    "GitHub에 로그인하기" 단추가 표시된 "GitHub Codespaces"의 "원격 탐색기" 사이드바에 대한 스크린샷

  4. 현재 로그인 GitHub 하지 않은 경우 로그인하라는 메시지가 표시됩니다. 편하게 로그인하세요.

  5. 권한을 부여할 항목을 지정하라는 메시지가 표시되면 "****"에 대한 GitHub 단추를 클릭합니다.

  6. 권한 부여 페이지가 표시되면 Visual-Studio-Code 권한 부여를 클릭합니다.

          VS Code에서 코드스페이스 생성하기

GitHub의 계정을 GitHub Codespaces 확장에 연결한 후 새 codespace를 만들 수 있습니다. GitHub Codespaces 확장에 대한 자세한 내용은 VS Code Marketplace을(를) 참조하세요.

  1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.

    작업 표시줄의 스크린샷. "원격 탐색기" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.

    참고

    원격 탐색기가 작업 막대에 표시되지 않는 경우:

    1. 명령 팔레트에 액세스합니다. 예를 들어, Shift+Command+P(Mac)/Ctrl+Shift+P(Windows/Linux)를 누릅니다.
    2. 유형: details.
    3. Codespaces: 세부 정보를 클릭합니다.

  2. "원격 탐색기" 사이드바를 마우스로 가리키고 을 클릭합니다.

    GitHub Codespaces의 "원격 탐색기" 사이드바 스크린샷. 더하기 기호 단추 옆에 "새 codespace 만들기" 도구 설명이 표시됩니다.

  3. 입력란에 개발하려는 리포지토리의 이름을 입력한 다음 선택합니다.

    텍스트 상자에 입력한 "octo-org/he"의 스크린샷과 이 문자열로 시작하는 4개의 리포지토리 목록입니다.

    이후 프롬프트의 오른쪽에 codespace에 대한 비용을 지불할 사람을 알려주는 메시지가 표시됩니다.

    "Hubwriter에서 지불한 사용량"이라는 메시지가 있는 분기에 대한 프롬프트의 스크린샷.

  4. 개발하려는 분기를 클릭합니다.

  5. 개발 컨테이너 구성 파일을 선택하라는 메시지가 표시되면 목록에서 파일을 선택합니다.

  6. 사용할 머신 유형을 클릭합니다.

    참고

    사용 가능한 컴퓨터 유형의 선택은 여러 가지 요인에 의해 제한될 수 있습니다. 여기에는 조직에 대해 구성된 정책 또는 리포지토리에 대한 최소 컴퓨터 유형 사양이 포함될 수 있습니다. 자세한 내용은 컴퓨터 유형에 대한 액세스 제한 및 codespace 머신에 대한 최소 사양 설정을(를) 참조하세요.

          VS Code에서 코드스페이스를 열기

  1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.

    작업 표시줄의 스크린샷. "원격 탐색기" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.

    참고

    원격 탐색기가 작업 막대에 표시되지 않는 경우:

    1. 명령 팔레트에 액세스합니다. 예를 들어, Shift+Command+P(Mac)/Ctrl+Shift+P(Windows/Linux)를 누릅니다.
    2. 유형: details.
    3. Codespaces: 세부 정보를 클릭합니다.

  2. "GitHub Codespaces"에서 개발하려는 코드스페이스를 마우스로 가리킵니다.

  3. 연결 아이콘(플러그 기호)을 클릭합니다.

    사이드 바의 원격 탐색기 스크린샷. Codespace의 연결 아이콘(플러그 기호)가 진한 주황색 윤곽선으로 강조 표시됩니다.

          VS Code에서 기계 유형 변경

          일반적으로 원격 컴퓨터 유형 선택에서 codespace를 실행할 수 있습니다. 이러한 컴퓨터 유형은 2개 코어에서 32개 코어에 이르는 하드웨어 사양을 선택할 수 있지만 전체 범위의 컴퓨터 유형을 항상 사용할 수 있는 것은 아닙니다. 각각 컴퓨터 유형에는 서로 다른 수준의 리소스와 다른 청구 계층이 있습니다. 자세한 내용은 [AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)을(를) 참조하세요.
          
          기본적으로 유효한 리소스가 가장 낮은 머신 유형은 codespace를 만들 때 사용됩니다. 언제든지 코드스페이스의 컴퓨터 유형을 변경할 수 있습니다.

참고

사용 가능한 컴퓨터 유형의 선택은 여러 가지 요인에 의해 제한될 수 있습니다. 여기에는 조직에 대해 구성된 정책 또는 리포지토리에 대한 최소 컴퓨터 유형 사양이 포함될 수 있습니다. 자세한 내용은 컴퓨터 유형에 대한 액세스 제한 및 codespace 머신에 대한 최소 사양 설정을(를) 참조하세요.

  1. VS Code 데스크톱 애플리케이션에서 Command+Shift+P(Mac) 또는 Ctrl+Shift+P(Windows/Linux)를 사용해 명령 팔레트를 엽니다.

  2. "Codespaces: Change Machine Type"을 검색하여 선택합니다.

    검색 문자열로 입력한 "머신 변경"과 드롭다운 목록에서 "Codespaces: Change Machine Type"의 스크린샷.

  3. codespace 내에서 이러한 지침을 따르지 않는 경우 변경할 codespace를 클릭합니다.

    네 개의 codespace의 드롭다운 목록 스크린샷.

    codespace에서 이러한 지침을 따르는 경우 작업 중인 codespace에 변경 내용이 적용됩니다.

  4. 사용할 컴퓨터 유형을 선택합니다.

  5. 다른 스토리지 용량을 가진 컴퓨터 유형으로 변경하는 경우, 계속할지 묻는 프롬프트가 나타납니다. 프롬프트를 읽고 [예] 를 클릭하여 수락합니다.

다른 스토리지 용량을 가진 가상 머신으로 변경한 경우(예: 32GB에서 64GB로) 머신 유형이 변경되는 동안 codespace를 잠시 동안 사용할 수 없습니다. codespace가 현재 활성 상태이면 자동으로 중지됩니다. 변경이 완료되면 새 컴퓨터 유형에서 실행 중인 codespace를 다시 시작할 수 있습니다.

스토리지 용량이 동일한 가상 머신으로 변경한 경우 다음에 codespace를 다시 시작할 때 변경 내용이 적용됩니다. 활성 코드 영역은 자동으로 중지되지 않습니다. codespace 재시작에 대한 자세한 내용은 Codespace 시작 및 중지을(를) 참조하세요.

에서 VS Code 코드스페이스 삭제

현재 codespace에서 작업하지 않는 경우 VS Code 내에서 codespace를 삭제할 수 있습니다.

  1. VS Code의 활성 바에서 원격 탐색기 아이콘을 클릭합니다.

    작업 표시줄의 스크린샷. "원격 탐색기" 사이드바의 아이콘(원으로 겹쳐진 사각형)이 주황색 윤곽선으로 강조 표시됩니다.

    참고

    원격 탐색기가 작업 막대에 표시되지 않는 경우:

    1. 명령 팔레트에 액세스합니다. 예를 들어, Shift+Command+P(Mac)/Ctrl+Shift+P(Windows/Linux)를 누릅니다.
    2. 유형: details.
    3. Codespaces: 세부 정보를 클릭합니다.

  2. "GitHub Codespaces"에서 삭제할 codespace를 마우스 오른쪽 단추로 클릭합니다.

  3. codespace 삭제를 클릭합니다.

          VS Code 웹 클라이언트에서 인사이더로 전환

웹 클라이언트를 VS Code 사용하는 경우 참가자 버전의 애플리케이션으로 전환할 수 있습니다. 이 버전의 VS Code에 대한 자세한 내용은 VS Code 블로그에서 참가자 빌드 소개를 참조하세요.

Codespace에서 버전을 전환한 후 codespace를 중지하고 다시 시작하면 웹 클라이언트가 계속해서 참가자 버전을 사용합니다. 웹 클라이언트에서 VS Code 만들고 여는 새 코드스페이스도 Insiders 버전을 사용합니다.

  1. 코드스페이스를 표시하는 브라우저 창의 왼쪽 아래에서 을 클릭합니다 .

  2. 메뉴에서 "참가자 버전으로 전환"을 선택합니다.

    VS Code 웹 클라이언트의 스크린샷 기어 아이콘이 주황색 윤곽선으로 강조 표시됩니다. 메뉴에 "참가자 버전으로 전환"이 표시됩니다.

  3.        **다시 로드**를 클릭합니다.

안정적인 버전으로 다시 전환하려면 프로세스를 반복하지만 안정적인 버전VS Code으로 전환을 선택합니다. 코드스페이스를 중지했다가 다시 시작하면 버전을 다시 전환하더라도 안정 버전을 계속 사용하게 됩니다. 웹 클라이언트에서 VS Code 만들고 여는 새 코드스페이스도 안정 버전을 사용합니다.

Insiders 데스크톱 애플리케이션 사용하기 Codespaces

Insiders 데스크톱 애플리케이션의 GitHub Codespaces 버전에서 VS Code를 사용하려면, Insiders 애플리케이션 내에서 코드스페이 VS Code스를 시작하거나 만드십시오. 자세한 내용은 이 문서의 앞부분에서 VS Code코드스페이스 만들기 및 코드스페이스 VS Code열기를 참조하세요.

추가 참고 자료

  •         [AUTOTITLE](/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)

  •         [AUTOTITLE](/codespaces/reference/using-github-copilot-in-github-codespaces)