연습 -Visual Studio Code에서 사용하도록 GitHub Copilot 설정

  • 5분

이 연습에서는 JavaScript 개인 포트폴리오 프런트 엔드 웹 애플리케이션용 GitHub 템플릿을 사용하여 새 리포지토리를 만듭니다.

GitHub Copilot을 설정하는 방법

GitHub Copilot을 사용하려면 다음 단계를 완료해야 합니다.

  1. GitHub 계정:

    • GitHub 계정을 만듭니다. Copilot은 GitHub 서비스이므로 사용하려면 GitHub 계정이 필요합니다. 계정이 없는 경우 GitHub 웹 페이지를 방문하여 무료로 만듭니다.

  2. GitHub Copilot를 등록하고 사용하도록 설정합니다.

    • GitHub Copilot 무료 계정을 설정하거나 일회성 30일 평가판으로 GitHub Copilot Pro 평가판 구독에 등록할 수 있습니다. 학습을 위해 사용 제한이 있는 코필로트 무료 옵션으로 충분해야 합니다.
    • GitHub Copilot 무료 평가판 조건을 알고 있어야 합니다. GitHub Copilot에 대한 무료 평가판 제품을 선택하는 경우 등록 시 결제 양식이 요청됩니다. 30일 기간이 종료되기 전에 취소하지 않는 한 평가판이 끝날 때까지 요금이 적용되지 않습니다.

팁 (조언)

GitHub Copilot는 매월 2,000개의 코드 자동 완성 및 50개의 채팅 메시지를 제공하는 무료 계층을 제공합니다. 시작하려면 Visual Studio Code를 열고 GitHub Copilot 아이콘을 클릭한 다음 "GitHub Copilot을 무료로 사용하려면 로그인합니다"를 클릭합니다. 브라우저에서 열리는 창에서 GitHub 계정에 로그인합니다. 자세히알아보세요. 교육자, 학생 및 선택 오픈 소스 유지 관리자는 무료로 Copilot Pro를 받을 수 있습니다. 자세한 내용은 다음 https://aka.ms/Copilot4Students을 참조하세요.

  1. 확장을 설치합니다.
    • GitHub Copilot는 Visual Studio, Visual Studio Code, JetBrains IDE, VIM 및 XCode를 비롯한 주요 IDE의 확장으로 사용할 수 있습니다.
    • 설치하려면 IDE의 확장 마켓플레이스에서 "GitHub Copilot"를 검색하고 설치 지침을 따릅니다. 예를 들어 VS Code 마켓플레이스에서 설치 옵션으로 GitHub Copilot, GitHub Copilot Chat 및 Azure용 GitHub Copilot를 찾을 수 있습니다.

환경 설정

먼저 GitHub Copilot 확장으로 사전 구성된 Codespaces 환경을 시작해야 합니다.

  1. 다음 단추를 선택하여 미리 구성된 환경에서 Codespace를 엽니다.

    GitHub Codespaces에서 열기

  2. codespace 만들기 페이지에서 codespace 구성 설정을 검토한 다음, 새 codespace 만들기를 선택합니다.

  3. codespace가 생성될 때까지 기다립니다. 이 프로세스에는 몇 분 정도 걸릴 수 있습니다.

  4. 이 프로젝트의 나머지 연습은 이 개발 컨테이너의 컨텍스트에서 수행됩니다.

Important

모든 GitHub 계정은 두 개의 핵심 인스턴스를 사용하여 매월 최대 60시간 동안 Codespaces를 무료로 사용할 수 있습니다. 자세한 내용은 GitHub Codespaces 월별 포함 스토리지 및 코어 시간을 참조하세요.

JavaScript 포트폴리오

완료되면 Codespaces는 하단에 터미널 섹션과 함께 로드됩니다. Codespaces는 컨테이너에 필요한 모든 확장 및 종속성을 설치합니다. 완료되면 이 템플릿은 npm start을 사용하여 Codespace 내에서 웹 애플리케이션을 시작하도록 구성됩니다.

웹 애플리케이션이 성공적으로 시작되면 서버가 Codespace 내의 포트 1234에서 실행 중이라는 메시지가 터미널에 표시됩니다.