혼돈에서 선명도까지 : Github Coplelot 에이전트를 사용하여 개발자 워크 플로우를 향상시킵니다.

현대 개발은 종종 좋은 의도로 시작합니다. 빠른 스크립트, 프로토 타입, 아마도 작은 것을 자동화하는 행동 일 수 있습니다. 그러나 프로젝트가 발전함에 따라 이러한 초기 노력은 취성이 될 수 있습니다. 운동량을 늦추지 않고 해당 프로젝트에 명확성과 구조를 가져올 수 있다면 어떨까요?

이 튜토리얼은 우리가 사용한 방법을 보여줍니다 Github Copilot 코딩 제 개인 github 액션 프로젝트를 리팩터링하고 향상시키기 위해 validate-file-exists. 패치 워크 유틸리티로 시작한 것은 잘 구조화되고 테스트가 커지고 문서화되어 Copilot Agent 모드 및 코딩 에이전트를 사용하여 성공할 수있었습니다.

우리는 다음의 예를 살펴볼 것입니다.

더 나은 작업 정렬을 위해 Copilot 사용자 정의 지침 업데이트.
생성 copilot-setup-steps.yaml 파일 코딩 에이전트에게 환경에 필요한 도구를 제공합니다.
기술 부채를 식별하기 위해 Copilot과 협력합니다.
풀 요청에서 Copilot과 협력합니다.
Copilot과 파트너십을 맺어 별도의 프로젝트에서 UI를 반복적으로 향상시킵니다.

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

모든 것을 시작한 Github 액션

2024 년 11 월에 나는 작은 github 액션을 만들었습니다. validate-file-exists. 특정 파일을 보장하고 싶었습니다 (예 : a dependabot.yml 파일 또는 .github/copilot-instructions.md)은 저장소에 존재했습니다. 그렇지 않다면 GitHub 조치 워크 플로가 실패합니다. 쉼표로 구분 된 입력을 지원했으며 프로젝트에서 사용하는 품질 문의 더 큰 “기준”의 일부가되었습니다.

기능적 이었지만 더 개선 할 수있었습니다. 문서가없고, 메타 데이터가 일관되지 않았으며, 입력 검증의 일부 차이가 있었으며, Copilot Custom Instructions 또는 Copilot 설정 단계가 없었습니다. CODILOT 에이전트 모드의 도움을 받아이 문제를 해결할 시간입니다.

1 단계 : 사용자 정의 지침을 향상시킵니다

에이전트를 데려 오기 전에 기존을 검토했습니다 copilot-instructions.md. 저장소의 목적, 사용 또는 구조에 대한 설명이 없거나 Copilot에 대한 명확한 지침에 대한 설명없이 드문 드문 일이었습니다.

행동:

필자는 프롬프트에 샘플 사용자 정의 지침 파일을 제공하고 Cobilot에게 코드베이스를 기반으로 업데이트하도록 요청하여 Copilot을 사용하여 작업 작업을 수행하기위한 모범 사례에 대한 지침을 기반으로합니다. 다시 말해, 나는 그것이 다음을 제공하기를 원했다.

저장소/코드베이스에 대한 명확한 요약 및 조치가하는 일.
기여 가이드 라인 (커밋 전 기대치를 포함하여 코드베이스를 구축, 형식, 보풀 및 테스트하는 방법).
프로젝트 구조 개요.
주요 기술 원칙 (TSDOC 통합 및 집중적이고 관리 가능한 기능을 통합하는 엄격한 TypeScript).

결과:

Colecilot은 의미있는 기여를 위해이를 안내 할 내 기대에 대한 올바른 맥락을 가지고있었습니다. 여기에서 최신 버전을 찾을 수 있지만 다음은 다음과 같습니다.

# Validate File Exists Action

This is a TypeScript-based GitHub Action that validates whether specified files
exist in a repository. It takes a comma-separated list of files and validates
their existence, failing the workflow if any files are missing. Please follow
these guidelines when contributing:

## Code Standards

### Required Before Each Commit

- Run `npm run format:write` to ensure consistent code formatting with Prettier
- Run `npm run lint` to check for ESLint violations
- Run `npm run test` to ensure all tests pass
- Run `npm run local-action` to test the action locally with a `.env` file

### Development Flow

- Build: `npm run package` (compiles TypeScript and bundles with ncc)
- Test: `npm run test` or `npm run ci-test`
- Coverage: `npm run coverage` (generates coverage badge)
- Full check: `npm run all` (format, lint, test, coverage, package)
- Local testing: `npm run local-action` (test action locally with .env file)

## Repository Structure

- `src/`: Core TypeScript source code
  - `main.ts`: Main entry point and action orchestration
  - `fileValidator.ts`: Core file validation logic
  - `index.ts`: Action entrypoint that calls run()
  - `types.ts`: TypeScript type definitions
- `__tests__/`: Jest unit tests for all source files
- `dist/`: Compiled and bundled JavaScript output (generated)
- `action.yml`: GitHub Action metadata and interface definition
- `script/`: Release automation scripts
- `badges/`: Generated coverage and status badges

## Key Guidelines

1. Follow TypeScript strict mode and best practices
1. Use clear, descriptive variable and function names
1. Add TSDoc comments for all public methods and classes
1. Write comprehensive unit tests using Jest for all new functionality
1. Keep functions focused and manageable (generally under 50 lines)
1. Use consistent error handling with @actions/core.setFailed()
1. Validate inputs and provide meaningful error messages
1. Use @actions/core for all GitHub Actions integrations (inputs, outputs,
   logging)
1. Maintain backwards compatibility for action inputs/outputs

2 단계 : Copilot-setup-steps.yaml을 추가하십시오

미국 개발자와 마찬가지로 Copilot 코딩 에이전트는 적절한 환경이 필요합니다. 즉, 필요한 프레임 워크 설정, 종속성 설치 및 Copilot이 작업을 수행 할 수있는 올바른 도구에 액세스 할 수 있는지 확인합니다.

행동:

나는 만들었다 .github/copilot-setup-steps.yaml Coplot Coding Agent의 개발 환경을 사용자 정의하는 데 Github 문서를 사용합니다. 이 예제는 코드를 확인하고 Node.js를 설정하고 필요한 종속성을 설치합니다. 이것이 TypeScript 액션이라는 점을 감안할 때, 그것은 내가 필요한 전부입니다!

나는 워크 플로에 약간의 변경을했다. .node-version 내 CI 워크 플로와 일치하려면 파일 :

- name: Setup Node.js
id: setup-node
uses: actions/setup-node@v4
with:
node-version-file: .node-version
cache: npm

결과:

Copilot Coding Agent에는 코드베이스를 구축, 보풀 및 테스트하는 데 필요한 종속성 및 도구가 있습니다. Codebase를 변경하면서 설치된 도구를 사용하여 품질을 확인할 수 있습니다 (사용자 정의 지침에 요청). copilot-setup-steps.yml.

3 단계 : Copilot이 기술 부채를 찾도록하십시오

설정 단계와 사용자 정의 지침이 제자리에 있으면 작업을 찾아야 할 때가되었습니다. 물론, 나는 Copilot으로 향했다. 대 코드에서 Coplot Chat을 사용하여 Copilot을 물었습니다.

“이 프로젝트에는 어떤 기술 부채가 존재합니까? 우리가 집중해야 할 영역의 우선 순위가 높은 목록을 알려주십시오. 상위 2 개 또는 3 개 항목으로 GitHub 문제를 만들고 싶습니다. 간단한 문제 설명, 수락 기준 세트 및 추가/업데이트 해야하는 파일에 대한 포인터를 포함시켜주십시오.”

몇 분 안에 코드베이스를 탐색하고 제안 목록이 다시 돌아 왔습니다.

일관되지 않은 패키지 메타 데이터.
readme 불일치 (잘못된 입력 이름).
빈 입력 또는 기형 입력에 대한 검증이 없습니다.

우리가 어떻게 문제 진술서, 수락 기준 및 추가/업데이트를위한 파일에 대한 지침을 요청한 방법에 주목하십니까? 이들은 Copilot을 사용하여 작업 작업을 수행하기위한 모범 사례에서 비롯됩니다. 다시 말해, 문제가 잘 정리되어 있는지 확인하십시오!

행동:

나는 Copilot 에게이 세 가지 항목을 다루는 문제를 썼다. 문제를 만든 후에는 Copilot에 문제를 할당했습니다.

4 단계 : Copilot Coding Agent in incation

일단 할당되면 에이전트는 새로운 풀 요청을 시작했습니다. 비동기 적으로 한 일은 다음과 같습니다.

문제에 대한 이해를 쌓기 위해 저장소의 내용을 탐색했습니다.
탐사를 기반으로 계획을 세웠습니다.
고정 package.json 이름, 설명, URL 및 저자 필드.
코드와 일치하도록 readme 사용 예제를 업데이트했습니다.
입력 유효성 검사 로직 추가 :
- 빈 또는 공백 전용 문자열을 거부하십시오.
- 쉼표 인 입력을 거부하십시오.
이 Edge 사례에 대한 4 가지 새로운 테스트를 작성했습니다.
확인 된 라인, 서식 및 범위가 손상되지 않았습니다.
작업이 완료된 점검표로 풀 요청 본문을 업데이트했습니다.

제가 사기로 임무를 위임하면서 청중에게 자신이 무엇을하고 있는지, 그리고 Copilot 설정 단계 및 지시 사항이 에이전트 세션의 맥락에서 어떻게 작동하는지 설명 할 수있었습니다.

결과:

Copilot은 단 11 분만에 모든 작업을 완료했습니다. 에이전트의 접근 방식을 검토 한 후 CI 워크 플로우를 승인하여 코드베이스에서 표준 품질 검사를 실행할 수있었습니다. 워크 플로는 실패했지만 Copilot의 결함은 없습니다. CI에서 지침에 없었던 추가 마크 다운 엘리트 검사가있었습니다.

실시간 디버깅 및 줄무늬 수정

수동으로 수정할 수 있었지만 Copilot과의 변화에 대해 어떻게 반복 할 수 있는지 보여주는 것이 좋은 기회였습니다. 풀 요청에 새로운 의견을 추가하고 Copilot을 물었습니다.

“우리의 github 동작은 Markdown에 대한 일렬 오류가있었습니다. 제발 고칠 수 있습니까?” (또한 Github Actions 워크 플로의 오류를 붙여 넣습니다.)

몇 분 후, 코드를 업데이트하고 새로운 커밋을 추진했으며 풀 요청이 통과되었습니다. 그리고 Copilot이 배경에서 내 임무를 수행하는 동안 스트림을 마무리 할 수있었습니다.

보너스 : Copilot 코딩 에이전트 및 극작가 MCP 서버로 UI 변경

Colecilot은 Github 액션의 초기 코드 변경 작업을 수행했지만 두 번째 프로젝트를 선보였습니다. 트렌드 레이더 시각화 앱 (여기에는 저장소가 있습니다) Next.js 및 Tailwind CSS를 사용하여 구축했습니다.

문제:

사용자는 포인트 데이터를 수동으로 양식으로 입력해야했습니다. 나는 원했다 :

사용자가 레이더를 클릭하여 포인트를 놓을 수 있습니다.
드래그 앤 드롭 재배치를 활성화하여 포인트의 범주 또는 가능성을 변경하십시오.

해결책:

UX, 수락 기준 및 참조를 설명하는 GitHub 문제를 제기했습니다.

풀 요청을 통해 작업하여 몇 가지 의견을 반복 한 후 Copilot Coding Agent :

클릭 간 논리를 구현했습니다.
드래그 앤 드롭 지원이 추가되었습니다.
단위 테스트를 작성했습니다.
스크린 샷을 가져 와서 풀 요청에 첨부했습니다.
완료된 작업의 요약으로 풀 요청을 업데이트하고 주석으로 응답했습니다.

극작가는 이제 Copilot 코딩 에이전트와 함께 기본적으로 설치되어 Copilot도 시각적 행동을 검증 할 수 있습니다.

최종 생각

이것은 단지 정리 세션이 아닙니다. 현대 소프트웨어 협업의 교훈이었습니다. Copilot Coding Agent는 새로운 팀원입니다.

컨텍스트와 의도로 저장소를 구성함으로써 Copilot을 의미있게 초대합니다.

Copilot 코딩 에이전트를 아직 시도하지 않았다면 기존 프로젝트를 생각해보십시오.

오래된 github 액션을 정리하십시오.
REFACTOR 무시한 저장소.
유효성 검사 및 테스트를 추가하십시오.

오후에 얼마나 많은 진전을 이룰 수 있는지 놀랄 수도 있습니다.

더 많이 탐색 할 준비가 되셨습니까? GitHub 청구 팀이 코딩 에이전트를 사용하여 기술 부채를 지속적으로 태우는 방법을 확인하십시오.

작성자가 작성했습니다

Chris는 Github의 개발자 관계 팀의 열정적 인 개발자 옹호자 및 수석 프로그램 관리자입니다. 그는 가장 작은 스타트 업, 기존 기업, 오픈 소스 커뮤니티 및 개별 개발자의 Execs, Engineering Leads 및 팀과 협력하여 Github를 돕고 소프트웨어 엔지니어링 잠재력을 잠금 해제합니다.

출처 참조