GitHub Copilot Chat + VS Code 세팅과 사용법

Programming with VS Code

 

이제 Wishlist 신청 없이도 GitHub Copilot Chat을 써볼 수 있다고 해서 Flutter에 적용시켜보았습니다.

단축키는 Mac OS를 기준으로 합니다.

 

1. 소개

GitHub Copilot Chat

GitHub Copilot은 AI 기반의 코드 완성 도구로, 개발자들이 더 빠르고 효율적으로 코드를 작성할 수 있도록 설계되었습니다. 이 도구는 OpenAI의 ChatGPT 기술을 기반으로 하여, 개발자가 작성하는 코드에 맞춰 실시간으로 코드 스니펫을 제안합니다. GitHub Copilot은 다양한 프로그래밍 언어와 프레임워크를 지원하며, 복잡한 알고리즘과 함수를 쉽게 구현할 수 있도록 돕습니다. 사용자의 코드를 분석하고 이해하는 능력을 통해 논리적인 코드 제안을 제공하며, 시간을 절약하고 코드 품질을 향상시키는 데 도움을 줍니다.

GitHub Copilot Chat은 여기에 더해 대화형 인터페이스를 통해 ChatGPT와 같은 방식으로 프로그래밍에 도움을 줍니다.

VS Code (Visual Studio Code)

VS Code는 Microsoft에서 개발한 무료 오픈 소스 텍스트 편집기입니다. 개발자들에게 많은 기능과 확장성을 제공하여 다양한 프로그래밍 언어와 프레임워크를 지원합니다. VS Code은 경량화된 텍스트 편집기이지만, 다양한 개발 도구와 통합되어 개발 작업을 편리하게 수행할 수 있습니다. VS Code는 다양한 기능을 제공합니다. 자동 완성, 코드 제안, 디버깅, Git 통합, 터미널 등이 포함됩니다. 또한, 사용자는 확장 프로그램을 설치하여 필요에 맞게 기능을 확장하고 개인화할 수 있습니다.
이를 통해 개발자들은 VS Code를 통해 효율적이고 편리한 개발 작업을 수행할 수 있으며, 다양한 확장 프로그램을 활용하여 개발 환경을 개인화할 수 있습니다.

 

2. GitHub Copilot 구독하기

Github Copilot을 사용하기 위해서는 우선 Github를 가입해야 합니다. Github 가입하는 방법은 다른 사이트 가입하는 방법과 유사하기 때문에 생략하겠습니다.

 

Github - Top bar

Github 홈페이지에서 프로필 사진을 누릅니다.

 

Github - side menu

Copilot 메뉴를 누릅니다

 

Github - Copilot

저는 한 달 무료를 사용했어서 결제를 하라는 창이 뜨는데, 한 번도 이용해본적 없으시다면 여기에서 한 달 무료 사용할 수 있다는 안내가 같이 뜰겁니다.

 

Github - Settings

프로필 그림을 누르면 나오는 사이드바에서 Setting를 누르면 나오는 화면에서도 Copilot 옵션에 접근 가능합니다.

 

Github - Setting - Copilot

 

마찬가지로 저는 한 달 무료기간을 사용했기 때문에 Copilot을 구매하라는 안내가 뜹니다. 월 구독시에는 주소와 신용카드 정보를 적게 되어있는데, 더 구독하고 싶지 않다면 꼭 구독 취소를 해주시기 바랍니다.

 

Github Copilot - Settings

 

구독이 정상적으로 이루어졌다면, Settings - Copilot 화면에서 위와 같이 뜰겁니다. Polices에 있는 설정은 다음과 같습니다.

'Suggestions matching public code'는 Blocked로 하는 것을 추천드립니다. 라이선스가 걸려있는 소스가 추천될 수 있기 때문이라고 합니다.

'Allow GitHub to use my code snippets for product improvements'는 내 코드를 Copilot의 성능향상을 위해 제공할 것인지 물어보는 것 같습니다.

 

3. GitHub Copilot Chat 세팅

왼쪽의 '확장: Marketplace(⇧⌘X)' 버튼을 눌러 마켓 플레이스로 들어갑니다.
GitHub Copilot과 GitHub Copilot Chat이 있는데, 이전에 다운로드 받은 적이 없다면 GitHub Copilot Chat를 따로 다운로드 받으면 됩니다.

 

설치하고 나면 로그인하라는 창이 뜹니다. 자신의 Github 아이디로 로그인을 해주고 나면, 하단의 Github Copilot 아이콘을 눌러 상태를 볼 수 있게 됩니다.

Github Copilot - Status

 

혹시 VS code의 Github ID가 잘못 로그인 되어 있다면, 왼쪽 하단의 사람 아이콘을 눌러 로그아웃하거나, 관리할 수 있습니다.

VS Code - Github login

3. GitHub Copilot 기능 소개

3-1. Chat View

하단의 Github Copilot 아이콘을 누르고 나오는 커맨드 팔레트에서 두 번째 줄 'Github Copilot Chat'을 누르거나

 

 

커맨드 팔레트(Command(⌘)+Shift+P)를 눌러 copilot을 검색하여 나오는 '채팅: 편집기 열기(Github Copilot)'을 눌러 채팅창을 열 수 있습니다.

 

 

우선 여러 창을 동시에 보기 위해, 채팅창 상단바를 오른쪽으로 끌어 창 분할을 했습니다. '간단하게 main_screen.dart를 만들어보자'라고 시켰습니다.

 

 

잘 만들어졌네요. 만들어준 코드는 screen/main_screen.dart에 집어넣었습니다.

 

3-2. Inline Chat

빈 파일을 만들면 Github Copilot Chat을 써보라는 제안이 옵니다.

 

 

'Command(⌘)+I'를 눌러 원하는 기능을 구현하도록 시켜봤습니다.
main.dart에서 아래와 같이 'route를 통해 MainScreen 세팅'이라고 써봤는데, import까진 안해주네요. 해당 제안을 원한다면 수락을 눌러줍니다.

 

3-3. Inline suggestions(기존 기능)

 

두 번째 줄을 보시면 screen/main_screen.dart을 import 해주진 않았습니다.이럴 때는 아래 새로 만들어진 class MainScreen을 삭제하고, 기존에 만들어 둔 screen/main_screen.dart를 import 해보겠습니다. 이전부터 있던 기능을 사용해서요.
2번째 줄에 import 's'까지 작성했는데, 나머지를 자동완성처럼 제안해주는 것을 볼 수 있습니다. 끝에 세미콜론까지 빼놓지 않았네요! tab을 눌러 완성할 수 있습니다. 다른 제안은 Option(⌥) (or Alt+])을 통해 제안 받을 수 있습니다. 기존 기능은 IDE가 제공하는 자동완성과도 비슷하네요.

 

 

완성된 main.dart 입니다.

 

이렇게 main.dart에서 main_screen.dart를 routes로 세팅하는 간단한 코드를 만들어봤습니다.

기본 코드는 꽤 잘 만들어줘서 생산성이 높아질 것 같은데, 응용해야 하는 부분은 얼마나 만들어줄 수 있을지 더 테스트 해봐야겠습니다.

 

 

본 글은 GPTers에 게시되고 있습니다.

https://www.gpters.org/c/ai-developers/github-copilot-chat-vs-code