Github Copilot 마스터 링 : AI 에이전트 모드를 사용하는시기

Github Copilot 마스터 링 : AI 에이전트 모드를 사용하는시기

AI 코딩 어시스턴트를 쳐다보고 왜 필요한지 궁금해하는 이유는 무엇입니까? 어쩌면 그것은 코드를 뱉어 내고있을 것입니다 닫다 그러나 그렇지 않습니다 상당히 맞습니다. 또는 여러 파일에 걸쳐있는 문제로 레슬링이 갇혀있어 더 큰 그림을 얻을 수 있기를 바랍니다. 종종 개발자가 이러한 걸림돌을 때리면 도구에 대한 것이 아니라 사용 방법을 아는 것이 더 많습니다.

그래서 여기에 중요한 질문이 있습니다.“빠른 답변이나 사려 깊은 대화가 필요합니까?” 이것이 Github Copilot과 같은 AI 코딩 도구를 잠금 해제하는 비밀입니다.

Copilot의 다른 측면은 다른 요구에 부응하기 때문에, 우리는 에이전트 모드에 가장 적합한시기와 대신 Copilot 편집을 사용해야하는시기를 식별하는 데 도움을주기 위해 여기에 있습니다. 둘 다 코딩을과 충전하기 위해 제작 된 Powerhouse Copilot 기능이지만 다른 시나리오에서 빛납니다.

Copilot 편집 빠르고 정밀한 조정을위한 것입니다. 함수를 리팩토링하거나 버그를 스쿼시하거나 흐름을 잃지 않고 파일 전체에서 일관된 변경 사항을 적용하십시오.

에이전트 모드반면에, 코드베이스를 분석하고, 건축 수정을 제안하고, 배를 조종하고 각 움직임을 승인하는 동안 터미널 명령을 실행하는가 Thornier의 멀티 파일 도전에 대한 AI 공동 작업자로 강화됩니다.

어느 것이 당신의 요구에 맞는 지 알아내는 것만으로 시간을 절약하는 것이 아니라 AI 어시스턴트를 자신의 코딩 본능의 원활한 확장으로 바꿉니다.

Copilot Command Center : 채팅 창

에이전트 모드 및 Copilot 편집에 대해 더 많이 배우기 전에 AI 상호 작용을위한 Central Hub vs Code의 Copilot 채팅 창을 이해하는 것이 필수적입니다.

'Ask Copilot'패널을 보여주는 Github Copilot 채팅 인터페이스. 인터페이스는 상단에 Copilot Robot 로고를 표시 한 다음 'Ask Copilot'제목을 표시합니다. 아래는 'Copilot이 AI에 의해 구동되므로 실수가 가능하다는 면책 조항입니다. 사용하기 전에 출력을주의 깊게 검토하십시오. ' 인터페이스에는 '컨텍스트를 첨부하려면'또는 유형 \#, '확장자와 채팅하기 위해', '명령을 사용하는 입력 /' 하단에는 자리 표시 자 텍스트 'Ask Copilot'과 버튼이있는 채팅 입력 필드가 있으며 'GPT-4O'가 현재 모델로 표시되어 있습니다.

이것은 당신이 할 수있는 곳입니다 :

  • “node.js에서 JWT 인증을 어떻게 구현합니까?”와 같은 코딩 질문을합니다.
  • 사용 /explain 복잡한 코드 블록을 이해합니다
  • 디버그 문제 /fix
  • 테스트를 생성합니다 /tests
  • 편집 및 에이전트 모드 기능 모두에 액세스하십시오

채팅 창이 코드의 컨텍스트를 확실하게 파악할 수 있으면 운전석에 완벽한 Copilot 도구 (편집 또는 에이전트 모드)를 선택할 수 있습니다.

GitHub Copilot을 사용하여 개인 웹 사이트를 발전시키는 방법에 대한 실제 예를 살펴 보겠습니다. 간단한 아이디어로 시작했습니다. 대화 형 터미널 스타일의 부활절 달걀을 만들어 개발자 친화적 인 방식으로 내 기술을 보여줍니다.

몇 가지 간단한 명령을 처리 한 기본 명령 처리 기능으로 시작했습니다.

function processCommand(command) {
try {
if (!command?.trim()) {
return 'Please enter a command. Type "more" for available commands.';
}

const sanitizedCommand = command.toLowerCase().trim();

switch (sanitizedCommand) {
case 'more':
return commands.more;
case 'about':
return commands.about;
case 'skills':
return commands.skills;
case 'projects':
return commands.projects;
case 'contact':
return commands.contact;
default:
return `Command not found: "${command}". Type 'more' for available commands.`;
}
} catch (error) {
console.error('[Terminal] Error processing command:', error);
return 'An error occurred while processing the command.';
}
}

처음에는 Copilot 편집을 사용하여 새로운 기능을 신속하게 추가했습니다. 예를 들어, 저장소를 보여주기 위해 ‘Github’명령을 추가하고 싶었습니다.

Ag11.dev에 대한 웹 개발 프로젝트를 보여주는 코드 편집기. 왼쪽 사이드 바에는 ContentLinks.astro, DarkModetOggle 및 terminaleAsteregg 파일을 포함한 다양한 구성 요소가있는 파일 탐색기가 표시됩니다. 메인 편집기에는 명령 개체가 내보내는 terminalservice.ts 파일을 보여주고 Github-Commenter-Raffle, Octogatosconf 및 Sepponabot-Automation 프로젝트를 포함한 Github 리포지토리를 나열합니다. 오른쪽 사이드 바에는 github copilot이 리포지토리에 대한 링크를 표시 할 새로운 'github'명령을 터미널에 추가하는 단계를 제안합니다. 하단 패널에는 로컬 및 네트워크 URL이있는 개발 서버를 실행하는 터미널이 표시됩니다. 인터페이스에는 구문 강조 표시가 다양한 어두운 테마가 있습니다. TerminaleAsteregg에 'github'이라는 새 명령을 추가하여 각각에 대한 간단한 설명으로 GitHub 저장소에 대한 링크를 표시합니다. ProcessCommand 함수와 명령 개체를 모두 업데이트하십시오.

Coplot 편집은 processCommand 기존 코드에 대한 빠르고 집중된 수정의 완벽한 예입니다.

터미널 인터페이스가 성숙함에 따라보다 포괄적 인 개선이 필요한 여러 대화식 기능을 구현하고 싶었습니다. 애니메이션 효과, 키보드 내비게이션 컨트롤 및 여러 파일에 걸쳐 완벽하게 작동하는 확장 가능한 테마 시스템을 얻으려면 에이전트 모드로 전환했습니다.

에이전트 모드 이점

에이전트 모드를 설계 할 때 간단한 AI 기능인 도구를 만들고 싶지 않았습니다. 귀하와 페어링 할 수있는 AI를 만들고 싶었습니다! 휠을 재창조 할 수있는 구체적이고 제한된 변경 사항을 수행하는 대신 이제 AI는 여러 파일이나 시스템에서 구현 세부 사항을 해결하는 반면 이제는 더 높은 수준의 방향을 제공하고 있습니다.

즉, 에이전트 모드에서는 여전히 프로세스를 제어하고 있습니다. AI는 코드베이스를 탐색하고 포괄적 인 솔루션을 제안 할 수있는 위도가 더 많지만 변경 사항이 적용되기 전에 항상 변경 사항을 검토하고 승인합니다. 통제를 포기하는 것이 아닙니다더 큰 그림에 집중하는 동안 구현 세부 정보를 효과적으로 위임하는 것입니다.

에이전트 모드를 특별하게 만드는 것 :

  • 코드베이스 검색 : 코드베이스를 검색하여 명시 적으로 지정하지 않고 관련 파일을 찾습니다.
  • 자기 정화 : 한 번에 전체 요청을 완료하기 위해 자체 출력을 반복 할 수 있습니다.
  • 오류 식별 및 수리 : 제안 된 코드에서 오류를 자동으로 인식하고 수정합니다.
  • 터미널 명령 실행 : 허가를 받아 터미널 명령을 제안하고 실행합니다.
  • 기능 구축 및 실행 : 변경 사항이 올바르게 작동하는지 확인하기 위해 응용 프로그램을 구축하고 실행할 수 있습니다.

에이전트 모드에 도달합니다.

  • 완전한 기능 구축 : “앱 전체에 분석 추적 추가”
  • 익숙하지 않은 코드베이스 탐색 : “이 프로젝트에서 인증이 어떻게 작동하는지 이해하도록 도와주세요”
  • 테스트 작성 및 검증 : “사용자 서비스에 대한 테스트를 작성하고 통과하십시오”
  • 터미널이 많은 작업 구현 : “TypeScript, Redux 및 스타일 경쟁자로 새로운 React 프로젝트를 설정하십시오.”
  • 복잡한 리팩토링 수행 : “새로운 오류 처리 패턴을 사용하기 위해 API 호출을 리팩터링합니다.”

터미널 부활절 달걀을 계속하면서 응답에 대한 타이핑 애니메이션 효과 추가, 위/다운 화살표를 사용한 명령 기록 탐색 및 명령의 탭 완료와 같은 여러 기능으로 훨씬 더 광범위한 업그레이드를 구현하고 싶다고 가정 해 봅시다. 동시에, 사용자가 ‘테마’명령으로 간격으로 전환 할 수있는 다양한 색 구성표 옵션을 갖춘 새로운 terminalthemes.css 파일을 만들고 싶습니다.

'Copilot Edits'탭을 선택한 채팅 패널을 보여주는 Github Copilot 인터페이스. AndreaGriffithS11 (프로필 사진 포함)이라는 사용자는 응답에 대한 타이핑 애니메이션 효과 추가, UP/다운 화살표를 사용한 명령 기록 내비게이션, 명령의 탭 완료 및 테마 스위칭 옵션을 사용하여 새 TerminalThemes.cs 파일 생성 등 여러 가지 향상을 요청했습니다. 인터페이스는 'terminaleasteregg.astro : 1-21'을 현재 파일로 표시합니다. 아래에서 Github Copilot은 '이러한 기능으로 터미널을 향상시키는 데 도움이됩니다. 이것을 단계로 나누자 : '1 참조'를 사용했음을 나타냅니다." 응답에 대한 타이핑 애니메이션 효과를 포함하도록 TerminaSteregg를 향상시키고, 위/아래 화살표로 명령 기록 탐색을 추가하고, 명령에 대한 탭 완료를 구현하십시오. 또한 사용자가 '테마'명령을 사용하여 전환 할 수있는 다양한 색 구성표 옵션을 갖춘 새 Terminalthemes.css 파일을 만듭니다.

에이전트 모드가 진정으로 빛나는 곳입니다. 이 작업은 여러 파일에 걸쳐 있으며 기존 코드베이스를 이해해야하며 완전히 새로운 기능을 작성해야합니다. 여기에서 에이전트 모드는 다음과 같습니다.

  1. 터미널 구현을 이해하려면 코드베이스를 검색하십시오.
  2. 테마 용 새 CSS 파일을 만듭니다.
  3. 터미널 응답에 애니메이션 기능 입력을 추가하십시오.
  4. 히스토리 내비게이션을위한 키보드 핸들러를 구현하십시오.
  5. 탭 완료 시스템을 빌드하십시오.
  6. 스위치 문에 테마 명령을 추가하십시오.
  7. 구현을 테스트하여 모든 것이 올바르게 작동하는지 확인하십시오.

이것은 에이전트 모드의 아름다움입니다. 코드베이스의 다른 부분에서 패턴과 관계에 대한 복잡한 이해가 있습니다! 에이전트 모드는 타이핑 애니메이션이 기존 기능을 방해하지 않도록하고, 기록 내비게이션이 현재 명령 처리와 호환되었는지 확인하고 테마가 UI를 올바르게 수정했는지 확인할 수 있습니다. 상호 연결 구성 요소를 사용한이 멀티 파일 기능 구현에서 에이전트 모드가 더 많은 레이저 중심 필로 필롯 편집에 비해 빛을 발할 수 있습니다.

GitHub Checkout의 아래 에피소드에서는 에이전트 모드가 iOS 앱에서 완전한 물 소비 추적기 기능을 구현하는 것을 볼 수 있습니다. 코드를 작성할뿐만 아니라 개발자가 편집기를 직접 터치 할 필요없이 단일 프롬프트에서 앱을 빌드, 실행 및 테스트합니다.

https://www.youtube.com/watch?v=akx5i0mrr9g

비밀 : 둘 다 함께 사용하십시오!

두 도구 모두에서 많은 시간을 보낸 후 여기에 내 테이크 아웃이 있습니다. 하나를 선택하는 것이 아닙니다. 하나는 다른 하나보다 낫습니다. 그것은 다른 목적을 위해 그것들을 함께 휘두르는 것입니다. Copilot 편집 및 에이전트 모드는 에이전트 모드를 사용한보다 신속한 중심적 개발 스타일인지 또는 Copilot 편집을 통해 세분화 된 파일 편집 제어를 유지하는지 여부에 관계없이 코딩 능력을 강화하기 위해 잘 작동합니다.

사용중인 도구에 관계없이, 귀하는 여전히 파일럿이며 AI를 조종하여 자신의 생산성을 과급합니다. 프롬프트에서 더 많은 맥락을 제공할수록 더 나은 결과를 얻을 수 있습니다. 그리고 항상 제안 된 변경 사항에 대한 최종 말이 있습니다.

AI의 세계로 뛰어 들고 있다면 Github Copilot 튜토리얼 시리즈를 시작으로 새로운 시작을 확인하여 초기 설정부터 고급 기술에 이르기까지 모든 것을 안내합니다. AI-ASISTED 코딩으로 빠르게 생산성을 높이고 자하는 기술 수준의 개발자에게 적합합니다.

행복한 코딩, 모두! 💻✨

시작하는 방법

이 기능을 시도하고 싶습니까? 다음은 빠른 설정 가이드입니다.

Coplot 편집의 경우 :

  1. 대 코드를 열고 Copilot 채팅 창을 찾으십시오.
  2. “Coplot이있는 편집”버튼을 클릭하여 Copilot 편집보기를 엽니 다.
  3. 관련 파일을 작업 세트에 추가하십시오. Copilot 은이 세트에서 파일 만 변경합니다 (새 파일을 생성하지 않는 한).
  4. 필요한 변경 사항을 설명하는 프롬프트를 입력하십시오.
  5. 제안 된 모든 변경 사항의 “차이”를 수락하기 전에 검토하십시오.

에이전트 모드 :

  1. VS Code 버전 1.99 이상을 사용하고 있는지 확인하십시오 (원래 게시 날짜 기준으로 VS 코드 내부자에서 제공).
  2. “편집”에서 “에이전트”모드로 전환하십시오.
  3. 구현하려는 복잡한 작업 또는 기능을 설명하는 프롬프트를 입력하십시오.
  4. 에이전트 모드는 자율적으로 작동하지만 여전히 변경에 대한 승인이 필요합니다.
  5. 최상의 결과를 얻으려면 사용자 정의 지침을 사용하여 에이전트 모드가 코드베이스와 어떻게 작동하는지 개인화하십시오.

Github Copilot을 무료로 사용해보십시오
AI로 종속성 관리를 자동화 할 준비가 되셨습니까? 비즈니스 용 Github Copilot에 대해 자세히 알아 보거나 오늘 Github Enterprise의 무료 평가판을 시작하십시오.

작성자가 작성했습니다

안드레아 그리피스

Andrea는 Github의 선임 개발자 옹호자로서 개발자 도구에 대한 10 년 이상의 경험을 쌓았습니다. 그녀는 기술적 깊이를 고급 기술을보다 쉽게 ​​접근 할 수 있도록하는 임무를 결합합니다. 육군 서비스 및 건설 관리에서 소프트웨어 개발로 전환 한 후, 그녀는 실질적인 구현을 통해 복잡한 엔지니어링 개념을 브리징하는 데 고유 한 관점을 제공합니다. 그녀는 웨일스 어 파트너, 두 아들, 두 마리의 개와 함께 플로리다에서 살고 있으며 Github의 글로벌 이니셔티브를 통해 혁신을 계속 주도하고 오픈 소스를 지원합니다. 그녀의 온라인 @alacolombiadev를 찾으십시오.

출처 참조

Post Comment