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를 통해 효율적이고 편리한 개발 작업을 수행할 수 있으며, 다양한 확장 프로그램을 활용하여 개발 환경을 개인화할 수 있습니다.
이제 Wishlist 신청 없이도 GitHub Copilot Chat을 써볼 수 있다고 해서 Flutter에 적용시켜보았습니다.
단축키는 Mac OS를 기준으로 합니다.
2. GitHub Copilot Chat 세팅
왼쪽의 '확장: Marketplace(⇧⌘X)' 버튼을 눌러 마켓 플레이스로 들어갑니다.GitHub Copilot과 GitHub Copilot Chat이 있는데, 이전에 다운로드 받은 적이 없다 면 GitHub Copilot Chat를 따로 다운로드 받으면 됩니다.
설치하고 나면 로그인하라는 창이 뜹니다. 자신의 Github 아이디로 로그인을 해주고 나면, 하단의 Github Copilot 아이콘을 눌러 상태를 볼 수 있게 됩니다.
3. Chat View
하단의 Github Copilot 아이콘을 누르고 나오는 커맨드 팔레트에서 두 번째 줄 'Github Copilot Chat'을 누르거나
커맨드 팔레트(Command(⌘)+Shift+P)를 눌러 copilot을 검색하여 나오는 '채팅: 편집기 열기(Github Copilot)'을 눌러 채팅창을 열 수 있습니다.
우선 여러 창을 동시에 보기 위해, 채팅창 상단바를 오른쪽으로 끌어 창 분할을 했습니다. '간단하게 main_screen.dart를 만들어보자'라고 시켰습니다.
잘 만들어졌네요. 만들어준 코드는 screen/main_screen.dart에 집어넣었습니다.
4. Inline Chat
빈 파일을 만들면 Github Copilot Chat을 써보라는 제안이 옵니다.
'Command(⌘)+I'를 눌러 원하는 기능을 구현하도록 시켜봤습니다.main.dart에서 아래와 같이 'route를 통해 MainScreen 세팅'이라고 써봤고, 결과물은 아래와 같습니다.
5. Inline suggestions(기존 기능)
두 번째 줄을 보시면 screen/main_screen.dart을 import 해주진 않았습니다.
이럴 때는 아래 새로 만들어진 class MainScreen을 삭제하고, 기존에 만들어 둔 screen/main_screen.dart를 import 해보겠습니다. 이전부터 있던 Inline suggestions 기능을 사용해서요.2번째 줄에 import 's'까지 작성했는데, 나머지를 자동완성처럼 제안해주는 것을 볼 수 있습니다. 끝에 세미콜론까지 빼놓지 않았네요! tab을 눌러 완성할 수 있습니다. 다른 제안은 Option(⌥) (or Alt+])을 통해 제안 받을 수 있습니다. 기존 기능은 IDE가 제공하는 자동완성과도 비슷하네요.
이렇게 main.dart에서 main_screen.dart를 routes로 세팅하는 간단한 코드를 만들어봤습니다.
기본 코드는 꽤 잘 만들어줘서 생산성이 높아질 것 같은데, 응용해야 하는 부분은 얼마나 만들어줄 수 있을지 더 테스트 해봐야겠습니다.
출처: https://claid.tistory.com/entry/GitHub-Copilot-Chat-VS-Code-세팅과-사용법