GitHub Copilot의 코드 개발 기능 검토

8분

Visual Studio Code는 GitHub Copilot과 GitHub Copilot 채팅의 두 가지 확장을 사용하여 GitHub Copilot을 구현합니다. 이러한 확장은 애플리케이션을 확장하거나 개선하는 제안을 생성하여 개발자 생산성을 높입니다. 각 확장은 코드를 보다 효율적으로 개발하는 데 도움이 되는 일련의 기능을 제공합니다.

GitHub Copilot 확장은 편집기 또는 코드 주석에 입력한 코드를 사용하여 코드 완성 제안을 생성합니다.
GitHub Copilot 채팅 확장은 선택한 코드에서 작동하는 채팅 상호 작용 또는 스마트 작업을 기반으로 코드 제안을 생성합니다.

참고 항목

이 모듈에서는 GitHub Copilot 확장을 사용하여 새로운 코드 기능 및 애플리케이션을 개발합니다. GitHub Copilot을 사용하여 단위 테스트를 만들고 기존 코드를 개선하는 두 개의 개별 모듈이 제공됩니다.

Visual Studio Code의 GitHub Copilot 도구

Visual Studio Code를 사용하면 다음 GitHub Copilot 및 GitHub Copilot 채팅 기능에 쉽게 액세스할 수 있습니다.

코드 줄 완성: 코드 줄 완성을 사용하여 코드를 보다 효율적으로 작성합니다.
인라인 채팅: 코딩하는 동안 편집기에서 직접 인라인 채팅 대화를 시작하여 도움을 받으세요.
채팅 보기: 언제든지 도움이 될 수 있는 AI 도우미를 엽니다.
빠른 채팅: 빠른 질문을 하고 현재 작업을 다시 시작하세요.
스마트 작업: 스마트 작업을 실행하여 프롬프트를 작성하지 않고도 특정 작업을 완료합니다.

GitHub Copilot 확장은 AI의 기능을 Visual Studio Code 환경으로 가져옵니다.

GitHub Copilot을 통해 코드 줄 완성을 사용하여 코드 생성

GitHub Copilot은 코드를 입력할 때 코드 줄 완성을 생성합니다. 애플리케이션에 이미 있는 코드는 GitHub Copilot이 정확한 제안을 생성하는 데 사용하는 컨텍스트를 제공합니다. 예를 들어 고객 지출을 처리하는 클래스에서 작업하고 있다고 가정해 보겠습니다. 클래스는 모든 고객에 대한 지출이 포함된 목록을 사용합니다. 모든 지출의 합계를 반환하는 메서드를 만들어야 합니다. 메서드 서명을 입력하기 시작하면 GitHub Copilot은 코드 줄을 완료하는 제안을 생성합니다.

코드를 기반으로 하는 코드 줄 완성을 보여 주는 스크린샷

제안에 만족하는 경우 Tab 키를 누르거나 수락을 선택합니다. 자동 완성은 시간을 절약하고 변수 및 기타 코드 요소의 이름을 제공하여 코드를 정확하게 작성하는 데 도움이 됩니다.

코드 줄 완성을 사용하여 코드를 생성하기 위한 다양한 옵션을 볼 수도 있습니다. 예를 들어 메서드에 대한 호출 문을 입력하기 시작하면 GitHub Copilot은 다양한 메서드 오버로드를 구현하는 제안을 제공합니다. 제안을 순환하고 의도와 일치하는 옵션을 수락할 수 있습니다. 모든 제안을 거부할 수도 있습니다. 이 프로세스를 통해 다양한 코딩 스타일과 기술을 빠르게 탐색할 수 있습니다.

GitHub Copilot은 코드 주석에서 코드 줄 완성 제안도 생성합니다. 예를 들어 만들려는 메서드를 설명하는 주석을 입력하면 GitHub Copilot에서 메서드 서명 및 구현에 대한 제안을 생성합니다.

주석을 기반으로 하는 코드 줄 완성을 보여 주는 스크린샷

제안된 코드 완성은 기존 코드의 정보와 메서드를 설명하는 코드 주석을 사용합니다.

개발자는 코드 완성을 사용하여 초기 코드 구조의 개발을 가속화합니다.

GitHub Copilot 채팅을 사용하여 코드 생성

GitHub Copilot 채팅을 사용하면 채팅 인터페이스 및 스마트 작업을 사용하여 코드를 만들 수 있습니다. 예를 들어 GitHub Copilot 채팅에 새 메서드를 만들도록 요청하는 프롬프트를 입력하는 경우 GitHub Copilot은 하나 이상의 메서드 서명 및 구현에 대한 제안을 제공합니다. 제안을 검토하고 수락하거나 삭제하면 코드의 초기 버전을 보다 빠르고 정확하게 만들 수 있습니다.

참고 항목

Visual Studio Code용 GitHub Copilot 채팅 확장에는 사용자 입력을 처리하는 채팅 인터페이스가 포함되어 있습니다. 이 교육에서는 채팅 세션 중에 제공한 입력을 참조할 때 질문 과 프롬프트 라는 용어를 사용합니다.

GitHub Copilot 채팅은 새 라이브러리, 프레임워크 또는 API와 같은 익숙하지 않은 리소스를 구현하는 코드를 개발해야 하는 경우에 특히 유용합니다. 요구 사항을 설명하는 프롬프트를 제출하면 GitHub Copilot 채팅에서 목표를 달성하는 방법을 보여 주는 제안을 생성합니다. 제안을 검토하면 새 리소스를 구현하는 방법을 배울 수도 있습니다.

명확한 범위와 의도가 포함된 프롬프트 또는 질문을 GitHub Copilot 채팅에 제공하면 생성되는 응답이 더 좋아집니다. 컨텍스트를 제공하고 요구 사항을 대화형 스타일로 설명하는 질문을 할 수 있습니다. GitHub Copilot 채팅은 사용자가 제공한 정보를 사용하여 요구 사항을 충족하고 코딩 스타일과 일치하는 코드 제안을 생성합니다.

채팅 참가자, 슬래시 명령 및 채팅 변수를 사용하여 프롬프트의 컨텍스트를 명확히 할 수 있습니다.

@workspace 또는 @terminal 같은 채팅 참가자는 GitHub Copilot 채팅이 질문의 컨텍스트를 이해하는 데 도움이 됩니다.
/explain 또는 /new와 같은 슬래시 명령은 Copilot 채팅에서 질문의 의도나 목적을 이해하는 데 도움이 됩니다.
#file 또는 #editor와 같은 Chat 변수는 Copilot 채팅이 질문의 더 큰 맥락을 고려할 때 특정 항목에 집중하는 데 도움이 됩니다.

이러한 특수 설명자를 사용하여 GitHub Copilot Chat에서 더 정확하고 유용한 응답을 생성할 수 있습니다.

채팅 참가자를 슬래시 명령과 결합하여 특정 작업을 수행할 수 있습니다. 예를 들어 다음 프롬프트를 사용하여 새 C# 콘솔 애플리케이션을 스캐폴드할 수 있습니다. @workspace /new console application in C#. 이 프롬프트에는 GitHub Copilot 채팅이 의도한 작업을 수행하는 데 도움이 되는 채팅 참가자(@workspace) 및 슬래시 명령(/new)이 포함됩니다.

콘솔 앱을 스캐폴드하는 데 사용되는 채팅을 보여 주는 스크린샷

GitHub Copilot는 더 복잡한 작업 영역을 스캐폴드할 수 있습니다. 예를 들어 다음 프롬프트는 Express 프레임워크, Pug 템플릿 엔진 및 TypeScript를 사용하는 Node.js 애플리케이션에 대한 작업 영역을 만듭니다. @workspace /new Node.js Express Pug TypeScript

GitHub Copilot Chat의 채팅 보기를 통해 코드 생성

Visual Studio Code의 채팅 보기는 코드 개발에 도움이 되는 AI 도우미에 대한 엑세스를 제공합니다. Visual Studio Code 환경을 벗어나지 않고도 AI 도우미에서 질문하고 도움을 받을 수 있습니다. 채팅 보기는 코드를 개발할 때와 어려운 코딩 문제를 해결하는 방법을 탐색할 때 도움을 제공합니다. 채팅 보기를 사용하여 기존 코드에 대한 질문을 하고, 오류 또는 코딩 논리에 대한 도움을 받고, 리소스 사용에 대한 정보를 얻을 수도 있습니다. 채팅 보기를 사용하면 새로운 코딩 기술을 배우고, 다양한 코딩 스타일을 탐색하고, 코딩 기술을 향상할 수 있습니다.

채팅 보기는 Visual Studio Code의 코드 편집기 오른쪽에 있는 자체 패널에서 열립니다. 채팅 보기를 열려면 Visual Studio Code 명령 센터에서 채팅 열기 를 선택하거나 Ctrl+Alt+I 바로 가기 키를 사용합니다.

Visual Studio Code의 채팅 보기

Visual Studio Code에 더 많은 화면 공간이 필요한 경우 채팅 보기의 상황에 맞는 메뉴에서 새 창에서 채팅 열기를 선택하여 별도의 창에서 채팅 보기를 열 수 있습니다.

Visual Studio Code의 질문에 응답하는 채팅 보기를 보여 주는 스크린샷

GitHub Copilot 채팅은 다음 요소를 포함하는 풍부한 대화형 결과를 제공합니다.

간단한 텍스트 예를 들어 질문에 자연어 응답을 제공합니다.
이미지. 예를 들어 다이어그램 또는 스크린샷을 표시합니다.
버튼. 예를 들어, 작업을 트리거합니다.
참조. 예를 들어 자세한 정보를 찾을 수 있는 URI(Uniform Resource Identifier)가 있습니다.
파일 트리. 예를 들어 채팅 참가자가 새 작업 영역을 만들도록 제안할 때 작업 영역 미리 보기를 표시합니다.

다음 예제에서는 Express 앱을 만드는 데 사용되는 프롬프트에 대한 응답을 보여줍니다. GitHub Copilot 채팅은 간단한 텍스트 설명, 제안된 작업 영역 구조를 보여 주는 트리 보기 및 새 작업 영역을 만드는 데 사용할 수 있는 단추를 제공합니다.

GitHub Copilot는 대화 기록을 유지 관리합니다. 기록은 GitHub Copilot 채팅에서 제안하는 응답 및 후속 질문을 개선하는 데 사용됩니다.

채팅 보기에서 코드 블록 관리

질문에 따라 GitHub Copilot 채팅은 응답에서 소스 코드를 반환할 수 있습니다. 소스 코드는 코드 블록으로 표시되며 몇 가지 다른 방법으로 코드를 관리할 수 있습니다.

마우스 포인터를 코드 블록 위로 가져가면 코드 블록을 관리하는 옵션이 표시됩니다. 초기 옵션은 편집기,커서에 삽입(Ctrl+Enter) 및 복사에 적용됩니다.

채팅 보기의 코드 블록을 보여 주는 스크린샷.

기타 작업(...) 단추에는 터미널에 삽입(Ctrl+Alt+Enter) 및 새 파일에 삽입하는 옵션이 표시됩니다.

코필로트 채팅에서 코드 블록에 명령이 포함되어 있음을 감지하면 터미널에 삽입(Ctrl+Alt+Enter)을 사용하여 통합 터미널에서 직접 실행할 수 있습니다. 이 옵션은 활성 터미널을 만들거나 열고 실행할 준비가 된 명령 텍스트를 삽입합니다.

채팅 보기의 터미널에 삽입 옵션을 보여 주는 스크린샷

GitHub Copilot Chat의 인라인 채팅을 통해 코드 생성

인라인 채팅 인터페이스는 코드에 집중하면서 강력한 AI 기능에 대한 액세스를 제공합니다. 코드 편집기에서 작업하는 경우 키보드에서 Ctrl+I 를 눌러 인라인 채팅을 열 수 있습니다.

인라인 채팅 기능은 다음과 같은 방법으로 사용할 수 있습니다.

기존 코드에 대해 질문
기존 코드 수정 또는 대체
새 코드 생성

인라인 채팅을 사용하여 새 기능 만들기

인라인 채팅 인터페이스를 사용하여 새 코드 기능을 개발할 수 있습니다. 예를 들어 인라인 채팅을 사용하여 새 사용자 인터페이스 구성 요소, 새 API 엔드포인트 또는 새 데이터 처리 파이프라인을 만들 수 있습니다.

다음 단계를 완료하여 인라인 채팅을 사용하여 새 코드 기능을 만들 수 있습니다.

편집기에서 코드를 선택합니다.
키보드에서 Ctrl+I를 눌러 인라인 채팅 인터페이스를 엽니다.
만들려는 기능을 설명하는 프롬프트를 입력합니다.
Copilot 채팅에서 제공하는 제안을 검토하고 필요한 경우 프롬프트를 구체화합니다.
만족하면 제안을 수락합니다.

인라인 채팅을 사용하여 새 메서드를 만드는 방법을 보여 주는 예제는 다음과 같습니다.

메서드를 만드는 데 사용되는 인라인 채팅 세션을 보여 주는 스크린샷

인라인 채팅을 사용하여 정규식 만들기

정규식은 문자열의 문자 조합을 일치시킬 때 사용되는 패턴입니다. 일부 개발자는 정규식이 복잡하고 이해하기 어려울 수 있으므로 쓰기가 어렵습니다.

인라인 채팅 인터페이스를 사용하여 정규식을 빠르고 정확하게 생성할 수 있습니다. 예를 들어 Copilot 채팅을 사용하여 이메일 주소, 전화 번호, 우편 번호 및 기타 데이터 패턴의 유효성을 검사하기 위한 정규식을 생성할 수 있습니다.

다음 단계를 완료하여 인라인 채팅을 사용하여 정규식을 만들 수 있습니다.

편집기에서 코드를 선택합니다.
키보드에서 Ctrl + I 를 눌러 인라인 채팅 인터페이스를 엽니다.
유효성을 검사하는 데 필요한 데이터 패턴을 설명하는 프롬프트를 입력합니다.
Copilot 채팅에서 제공하는 제안을 검토하고 만족하면 제안을 수락합니다.

다음은 인라인 채팅을 사용하여 전자 메일 주소에 대한 정규식을 만드는 방법을 보여 주는 예제입니다.

정규식을 만드는 데 사용되는 인라인 채팅 세션을 보여 주는 스크린샷

GitHub Copilot 채팅에서 생성된 응답을 검토하는 것이 항상 중요합니다.

Copilot 채팅은 정규식 ^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$를 사용하여 메일 주소의 유효성을 검사할 수 있다고 제안합니다.

제안된 정규식을 평가하는 데 1분 정도 걸릴 수 있습니다.

^: 이 기호는 선의 시작을 나타냅니다. 이메일 주소는 여기에서 시작해야 합니다.

[a-zA-Z0-9_.+-]+: 식에서 이 부분은 대괄호([]) 내에 있는 문자 중 하나 이상(+)과 일치합니다. 문자는 소문자(a-z), 대문자(A-Z), 숫자(0-9) 또는 밑줄(_), 마침표(.), 더하기(+) 또는 하이픈(-)과 같은 특수 문자일 수 있습니다.

@: 식의 이 부분은 "at" 기호(@)입니다. 이메일 주소의 리터럴 문자입니다.

[a-zA-Z0-9-]+: 식의 이 부분은 첫 번째 부분과 비슷하지만 전자 메일의 도메인 이름 부분에 대한 것입니다. 하나 이상의 소문자, 대문자, 숫자 또는 하이픈(-) 문자를 포함할 수 있습니다.

\.: 식의 이 부분은 리터럴 마침표(.) 문자입니다. 도메인 확장과 도메인 이름을 구분합니다.

[a-zA-Z0-9-.]+: 식의 이 부분은 도메인 확장과 일치합니다. 하나 이상의 소문자, 대문자, 숫자, 하이픈(-) 또는 마침표(.) 문자를 포함할 수 있습니다.

$: 이 기호는 선의 끝을 나타냅니다. 이메일 주소는 여기에서 끝나야 합니다.

전반적으로 이 정규식은 메일 주소의 유효성을 검사하기 위한 좋은 시작점이지만 몇 가지 제한 사항이 있으며 유효한 모든 메일 형식을 다루지는 않을 수 있습니다. 중요한 애플리케이션의 경우 보다 포괄적인 패턴 또는 전용 메일 유효성 검사 라이브러리를 사용하는 것이 좋습니다.

요약

GitHub Copilot 확장은 개발자가 오류를 줄이고 더 빠르게 코드를 작성할 수 있도록 도와줍니다. GitHub Copilot 확장은 편집기 또는 코드 주석에 입력한 코드를 사용하여 코드 완성 제안을 생성합니다. GitHub Copilot 채팅 확장은 선택한 코드에서 작동하는 채팅 상호 작용 또는 스마트 작업을 기반으로 코드 제안을 생성합니다.