[Microsoft: Code with AI Hackathon] Github Copilot으로 개발하기
3월 8일 세계 여성의 날을 맞아, 마이크로소프트 아시아에서 여성 대학생들을 대상으로 한 Code with AI Hackathon이 열렸습니다! 🎉
이번 행사에서는 오후 1시부터 3시까지 마이크로소프트에서 근무하는 아시아 여성 멘토분들이 직접 DevOps, GitHub 등에 대한 개념을 소개해 주셨는데요. 이후 해커톤 세션에서는 참가자들이 GitHub Copilot을 활용해 GitHub Codespace에서 직접 개발을 체험하는 시간을 가졌습니다.
이번 해커톤에서는 코드를 직접 작성하는 것이 아닌, Github의 Codespace와 Copilot을 활용해 로컬 개발 환경 없이, tab키 만으로만 개발하는 방식으로 이뤄졌습니다.
1. 브랜치 생성하기
개발을 시작하기 전, 작업 환경을 설정해야겠죠?
참가자들은 초대된 조직 레포지토리에서 main 브랜치에서 각자의 브랜치를 생성해 개발을 시작했습니다.
2. Codespace 생성하기
이렇게 생성된 자신의 브랜치에 들어가, 우측의 Code - Codespaces - Create codespace on _branch_를 차례로 눌러 자신의 Codespace를 생성해줍니다.
잠시 기다리면 새 창에서 codespace가 열리게 됩니다. 이렇게 생성된 codespace는 약 2시간 정도 지속되며, 웹에서 로컬처럼 사용할 수 있도록 한 것이기에 반드시 commit과 push를 해줘야 변경 사항이 원격에 반영이 됩니다.
3. npm start로 프로젝트 실행하기
이제 본격적인 개발에 들어갑니다!
기존 main 브랜치에는 Node 기반의 계산기 코드가 작성되어 있었는데요. 이를 실행하기 위해 먼저 터미널에서 npm install을 입력해 필요한 패키지를 설치해줍니다.
설치가 완료되면, npm start를 입력하여 코드를 실행합니다. 그러면 아래와 같이 서버가 실행되며 어떤 방식으로 애플리케이션을 사용할지 묻는 메시지 창이 나타납니다. 브라우저에서 열기를 선택하면 새 창에서 계산기 애플리케이션을 확인할 수 있습니다.
4. Copilot 자동완성 기능으로 코딩하기
이제 기본 사칙연산만 구현된 계산기에 거듭제곱(power, ^)와 루트(root, sqrt) 기능을 추가해볼 겁니다. 그것도 코딩이 아닌 Copilot으로요!
public/index.html
먼저, 계산기 화면에 ^ 버튼을 추가해줘야 합니다.
public/index.html 파일을 열고, <div class="calculator"> 아래에 추가할 내용을 입력합니다.
엔터를 누르면, 별 표시와 함께 Copilot이 자동완성한 내용이 회색으로 나타납니다.
이렇게 자동완성된 내용이 나타났을 때 tab키를 누르면 실제 텍스트로 작성이 됩니다.
api/controller.js
다음으로는 새로 생긴 버튼에 연결될 함수를 작성할 차례입니다. 함수의 기능이 작성된 operations 하단에 커서를 둔 뒤 엔터를 치면 앞서 본 것과 마찬가지로 Copilot이 필요한 함수를 제안해줍니다. Tab 키를 눌러 자동완성된 내용을 반영합니다.
public/client.js
위 작업이 모두 완료됐다면, 이제 버튼과 함수를 연결해줘야 합니다. calculate 함수를 찾아 default 앞 부분에 엔터를 치면 Copilot이 자동으로 case를 추가해줍니다.
이렇게 모든 수정을 마쳤다면, 다시 터미널에서 npm start를 입력해 직접 애플리케이션을 실행해 확인해볼 수 있습니다.
5. npm test로 코드 테스트하기
npm에서는 작성된 코드에 대해 직접 예제를 생성해 테스트해주는 기능을 가지고 있습니다. test 폴더에 _functions_.test.js 파일을 작성한 뒤 터미널에서 npm test를 실행하면 현재 작성된 코드가 사용자가 의도한 대로 결과값을 도출하는지를 확인해볼 수 있습니다. 아래는 test/arithmetic.test.js를 작성한 뒤 테스트를 수행한 결과입니다.
test/arithmetic.test.js
새롭게 연산자를 추가했으니 test 코드도 함께 작성해봅시다. 우선 코드를 살펴보면 describe('Arithmetic', ...) 함수 안에 Validation, Addition, Multiplication, Division 테스트 함수가 각각 작성되어 있는 것을 확인해볼 수 있습니다. 이 함수 맨 아래에 커서를 둔 뒤 엔터를 해봅시다.
아까와 마찬가지로 Copilot이 자동으로 코드를 작성해줍니다. Tab키를 눌러 이를 반영해준 뒤, npm test를 입력해 실행해보면, 아래와 같이 테스트가 정상 작동되는 것을 확인해볼 수 있습니다.
앞서 작성했던 거듭 제곱 함수도 자동완성으로 Copilot이 작성해주니 필요한 만큼 테스트 코드를 작성해줍니다.
6. Github로 CI/CD 하기
지금까지 Github Codespace에서 작성한 내용은 웹을 이용하긴 했지만, 모두 로컬에서 작성된 것입니다. 이를 원격에 반영하기 위해서는 반드시 변경 내용을 push하고 PR 메시지를 작성해 main에 반영해야 합니다.
Codespace(혹은 VS Code) 좌측 메뉴에서 3번째에 위치한 소스 제어 메뉴를 선택합니다.
변경 사항에 수정된 파일이 모두 포함되어 있는지를 확인한 뒤, 텍스트 입력창에 커밋 메시지를 작성해줍니다. 만약 커밋 메시지를 어떻게 쓸지 감이 잘 오지 않는다면, 입력창 우측의 별 표시를 눌러 Copilot에게 자동으로 작성을 요청할 수도 있습니다.
커밋 메시지가 다 작성됐다면, 중간의 커밋 버튼을 눌러 변경 내용을 스테이징합니다.
커밋이 스테이징 되었어도 아직 원격에는 반영되지 않았습니다. 원격에 반영하기 위해서 git push origin _branch_를 입력해 원격의 자신의 브랜치에 반영해줍니다.
이제, 협업 공간인 main 브랜치에 변경 내용을 반영할 차례입니다.
왼쪽 메뉴 아래에서 2번째의 깃허브 로고 버튼을 누르면 PR을 생성할 수 있습니다. 모든 커밋이 스테이징되었는지 확인한 후, BASE를 main, MERGE를 자신의 브랜치로 설정해줍니다.
다음으로 PR 메시지의 제목과 내용을 직접, 혹은 Copliot의 도움을 받아 작성을 한 뒤, Create 버튼을 눌러주면 PR 메시지가 정상적으로 작성됩니다.
이후 깃허브에서 직접 PR 메시지에 들어가 확인했을 때 아래와 같이 CI가 성공했다고 나타난다면 성공입니다!
이번 Code with AI Hackathon에서는 GitHub Copilot과 Codespace를 활용하여 AI와 함께 개발을 경험하는 의미 있는 시간이었습니다.
특히 Copilot의 자동완성 기능을 활용하여 버튼을 추가하고, 함수를 구현하며, 테스트 코드까지 작성하는 과정이 인상적이었습니다. 직접 코드를 타이핑하지 않아도 AI가 흐름을 파악하고 적절한 코드를 제안해 주는 방식이 신선하게 다가왔습니다.
또한, Codespace를 이용해 별도의 로컬 환경 설정 없이 웹에서 개발하고, CI/CD까지 진행하는 과정을 경험하며 GitHub을 더욱 효과적으로 활용하는 방법을 배울 수 있었습니다.
AI 기술이 개발의 많은 부분을 변화시키고 있는 만큼, 이러한 해커톤을 통해 새로운 기술을 직접 체험하는 것이 중요하다고 느껴졌습니다. 앞으로 AI와 개발의 결합이 어떤 방향으로 발전할지 기대됩니다!