GitHub Copilot 코딩 에이전트 및 모바일을 사용하여 어디서나 긴급 수정 완료
비디오 게임에서는 단일 업그레이드로 능력이 향상되고, 여러 업그레이드를 결합하면 멈출 수 없는 파워업을 만들 수 있습니다. 소프트웨어 개발 세계에서 이 결합된 힘은 비슷한 일을 합니다. GitHub에서는 개발자가 심각한 버그 수정, 새로운 기능 추가 또는 릴리스 출시 등 모든 문제를 해결할 수 있는 놀라운 힘을 부여할 수 있다고 믿습니다.
“잠깐 머물면서 들어보세요.” 예전 디아블로 대사처럼요.
어느 날 아침 산책을 하던 중 긴급 전화를 받았습니다. 내가 공동 작업하는 웹 사이트의 중요한 기능은 오류를 표시하는 것이었습니다. 이는 가시성이 높은 데모 직전에 발생했습니다. 노트북이 몇 마일 떨어져 있었고 기존의 문제를 해결하려면 몇 시간은 더 걸릴 것 같았습니다. 이러한 즉각적인 요구를 해결하기에는 너무 늦었습니다. 롤백은 프레젠테이션에 필수적인 기능을 제거하므로 옵션이 아니었습니다.
내가 사용할 수 있는 유일한 도구는 휴대폰뿐이었습니다. 집으로 달려가는 대신 GitHub Copilot 코딩 에이전트와 GitHub 모바일 앱이라는 두 가지 강력한 GitHub 기능을 활용할 수 있다는 것을 깨달았습니다. 신속한 해결을 위해 모바일에서 신속하게 문제를 생성하고 문제를 Copilot에 위임할 수 있었습니다.
GitHub Mobile에서 최근 풀 요청을 스캔하고 가능한 범인을 식별했습니다. 바로 마크다운 렌더링과 서식 있는 텍스트 편집기를 추가한 풀 요청이었습니다. 나는 문제를 설명하고 의심스러운 끌어오기 요청을 참조하는 동시에 내 저장소에 의존하는 새로운 문제를 만들었습니다. 부조종사 지침 상담원을 안내하는 데 도움이 됩니다. 몇 번의 탭만으로 문제를 GitHub Copilot 코딩 에이전트에 할당했습니다.
불과 6분 후에 GitHub Mobile에 알림이 나타났습니다. GitHub Copilot이 수정 사항이 포함된 풀 요청을 생성했습니다! 바로 휴대폰으로 리뷰해봤습니다. 그것은 문제에 대한 명확하고 간단한 해결책이었습니다. 기존 워크플로를 활용하여 모바일 장치에서 바로 미리 보기 분기의 수정 사항을 테스트할 수도 있었습니다.
만족스러워서 내 저장소의 GitHub Actions로 관리되는 자동화된 워크플로를 통해 프로덕션에 배포된 풀 요청을 승인했습니다. 내가 차에 도착했을 때 감독은 문제가 해결되었으며 데모를 진행할 준비가 되었음을 확인했습니다.
내 휴대폰으로 모두 관리되는 이 경험을 통해 스마트폰의 강력한 기능이 드러났습니다. GitHub 플랫폼. GitHub Copilot 코딩 에이전트와 GitHub Mobile이라는 두 가지 기능을 결합하면 새로운 능력이 열리게 되었고, 플랫폼 내에서 어떤 다른 조합을 통해 더욱 강력한 성능을 발휘할 수 있는지 알아보게 되었습니다. 내 일.
다음은 끌어오기 요청을 검토하고 승인한 후 GitHub Mobile 앱을 사용하여 휴대폰에서 본 화면입니다. 문제에 대한 Copilot의 수정 사항 요약이 표시됩니다.
모바일 장치에서 Copilot에 모든 개발을 위임하거나 모든 수정 사항이 휴대폰에서 즉시 승인될 수 있다는 점을 분명히 하는 것이 중요합니다. 그러나 내 경험에 따르면 중요한 점은 올바른 상황에 적합한 도구를 갖추는 것이 모든 차이를 만든다는 것입니다. AI 쌍 프로그래머인 GitHub Copilot은 게임 체인저입니다. GitHub Copilot 코딩 에이전트 및 GitHub Mobile을 GitHub Issues 및 GitHub Actions와 같은 기존 기능과 함께 내 워크플로에 통합함으로써 새로운 수준의 효율성을 발견했습니다. 동일한 파워업을 얻을 수 있는 방법은 다음과 같습니다.
핵심 1: 지침 파일 활용
GitHub Copilot을 효과적으로 사용하는 방법에 대한 수많은 지식이 있습니다. 확실히 접하게 될 영역 중 하나는 GitHub Copilot에 대한 사용자 지정 지침입니다. 이러한 지침은 Copilot에서 얻는 결과에 영향을 미칠 수 있는 지침 및 규칙입니다. 잘 정의된 지침 세트는 큰 도움이 될 수 있습니다.
내 시나리오에서는 Copilot에 저장소에 대한 중요한 정보를 이해하기 위한 추가 컨텍스트를 제공하기 위해 저장소 사용자 정의 지침을 사용했습니다. 여기에는 저장소의 핵심 목적, 사용된 기술 스택, 아키텍처 제약 조건, 코딩 표준, 테스트 전략, 종속성 관리, 관찰 가능성, 문서화, 오류 처리 등이 포함되었습니다. GitHub Copilot이 프로젝트에 대해 갖고 이해하는 데 중요한 사항을 정의하는 것이 중요합니다.
저에게는 이탈률이 적은 수정 사항을 식별하려면 디렉터리 구조, 코딩 표준, 프로젝트 종속성과 같은 사항을 식별하는 것이 중요했습니다. 사용자 지정 지침은 마크다운을 사용하여 작성되며 이를 포함하면 GitHub Copilot Coding Agent, Copilot Chat 및 Copilot 코드 검토에 대한 구체적인 지침을 제공합니다. 이 파일의 지침은 저장소에 대한 모든 채팅 요청에 적용된다는 점에 유의하는 것이 중요합니다. 이 파일은 루트 수준 바로 아래 저장소의 .github 디렉터리에 있습니다.
예: 다음은 다음에서 볼 수 있는 지침 파일의 예입니다. .github/copilot-instructions.md 파일. 이를 프로젝트에 맞게 조정하는 것을 잊지 마십시오.
# Copilot Instructions
- Use Next.js App Router with React and TypeScript across the project.
- Use pnpm for all package management commands (not npm or yarn).
- Use Tailwind CSS v4 with a mobile-first approach; enhance with sm:/md:/lg:/xl: as needed.
- Prefer shadcn/ui components before creating new UI; place shadcn/ui in src/components/ui and shared components in src/components/shared.
- Always use next/link for internal navigation and next/image for images.
- Prefer server components by default; add "use client" only when needed (event handlers, browser APIs).
- Implement server actions where appropriate; place them in src/lib/actions.
- Put utilities in src/utils and Supabase utilities in src/utils/supabase; define shared types in src/types.
- Write tests with Vitest for critical business logic and components; place tests in __tests__ directories.
- Follow Next.js performance best practices and implement proper error boundaries and error handling.
- Use environment variables (NEXT_PUBLIC_ for client exposure); keep secrets server-side only.
- Use Vercel for deploys and GitHub Actions for CI/CD with pnpm scripts (pnpm dev/build/test).
- Keep code idiomatic: functional components + hooks, async/await for async, and idiomatic Next.js/React patterns.
## Folder structure reference (high-level)
```text
.
├─ app/ # Next.js App Router: route groups, page.tsx, layout.tsx, loading.tsx, error.tsx, route.ts
├─ public/ # Static assets served at /
├─ src/
│ ├─ components/
│ │ ├─ ui/ # shadcn/ui components
│ │ └─ shared/ # Shared app-specific components
│ ├─ lib/
│ │ └─ actions/ # Server actions ("use server") and server-side logic
│ ├─ utils/
│ │ ├─ supabase/ # Supabase client utilities (server-side)
│ │ └─ index.ts # General utilities (example)
│ └─ types/ # Shared TypeScript types
├─ __tests__/ # Vitest tests (or co-located __tests__ near source)
├─ docs/ # Project documentation
└─ .github/ # Workflows, issue templates, Copilot instructions
```
### Directory-specific conventions
- app/: Follow App Router conventions (page.tsx, layout.tsx, route.ts, loading.tsx, error.tsx). Use the Metadata API for SEO.
- src/components/ui: Prefer existing shadcn/ui components; extend consistently if needed.
- src/components/shared: Reusable app-specific components; keep presentational components server-rendered if possible.
- src/lib/actions: Mark server actions with "use server" and keep client-only imports out.
- src/utils/supabase: Reuse a shared Supabase client; do not re-instantiate ad hoc clients.
- __tests__: Use Vitest; write descriptive, focused tests for critical logic and components.
## Commands
- pnpm install — Install project dependencies.
- pnpm dev — Start the Next.js development server with hot reloading.
- pnpm build — Create a production build of the app.
- pnpm start — Run the production server locally from the built output (if defined).
- pnpm test — Run the Vitest test suite.
- pnpm lint — Lint the codebase (if defined in package.json).
- pnpm typecheck — Type-check the codebase using TypeScript only (no emit), if defined.
- pnpm format — Format files with Prettier (if defined).팁: 아직 지침 파일이 없고 VS Code를 사용하는 경우 다음으로 이동합니다. 채팅 구성 그리고 선택 지침 생성 VS Code의 사용자 지정 지침 사용에 언급된 대로.
저장소 전체 사용자 정의 지침 외에도 경로별 사용자 정의 지침을 정의하고 applyTo 관심 있는 디렉터리, 파일 패턴, 언어 또는 작업 컨텍스트만 대상으로 하는 키워드입니다. 경로별 지침 파일을 사용하면 제공된 내용을 기반으로 특정 시나리오와 관련된 세부 정보를 사용하여 Copilot에 제공하는 지침의 범위를 지정할 수 있습니다. applyTo 예어.
예: 다음은 Copilot이 이미 설정된 규칙을 따르는 데 도움이 되는 모든 구성 요소를 확인하는 데 사용하는 경로별 지침 파일의 한 예입니다. 이와 같은 파일은 다음 위치에 배치됩니다. .github/instructions 저장소 사용자 정의 지침을 추가할 때 언급한 폴더입니다.
---
applyTo: "src/components/ui/**/*.tsx,src/components/shared/**/*.tsx"
---
- Prefer existing shadcn/ui components; check for an existing component before creating a new one.
- Style with Tailwind v4 using mobile-first classes; add responsive variants for larger screens.
- Use Lucide React icons (import from 'lucide-react'); avoid inline SVGs unless necessary.
- Ensure accessible interactions (keyboard focus, ARIA where applicable) and touch targets ≥44px.
- Avoid client components unless interactivity is required; keep pure presentational pieces server-rendered.
- Co-locate component tests in __tests__ where applicable; use Vitest.중요한: 좋은 지침 파일을 작성하려면 커뮤니티에서 제공한 지침, 프롬프트 등을 확인하여 예시와 영감을 얻으세요.
테이크아웃: 지침은 GitHub Copilot이 따를 수 있는 규칙, 표준 및 기본 설정과 같은 구체적인 컨텍스트를 제공하는 데 도움이 됩니다. 잘 작성된 지침은 제안의 품질과 관련성을 눈에 띄게 향상시킵니다. Copilot이 프로젝트 및 코딩 표준을 내부화하도록 지원함으로써 더 높은 품질의 출력을 확인하고 작업을 더 빠르게 완료할 수 있습니다.
핵심 2: 부조종사 코딩 에이전트에 대해 알아보기
Copilot 코딩 에이전트를 다른 팀원과 마찬가지로 대하십시오. 모든 사람은 자신이 가지고 있는 강력한 기술과 능력을 갖고 있으며, 이러한 기술은 가장 활용하고 싶은 기술입니다. 코딩 에이전트의 장점에 대한 자세한 내용은 GitHub Copilot: 새로운 코딩 에이전트를 만나보세요 게시물을 확인하세요.
Copilot 코딩 에이전트에 대해 더 잘 알아보려면 Copilot을 할당하여 문제를 해결하고, 끌어오기 요청을 생성하고, 저장소에서 Copilot 세션을 추적하세요. 이 팀원이 무엇을 할 수 있는지 더 많이 알수록 작업을 위임하는 것이 더 편안해집니다.
지침 파일에 설정한 지침과 규칙이 중요한 것처럼 구체적인 지침을 제공하는 것도 중요합니다. Copilot에 할당할 문제를 생성할 때.
리포지토리에 새 이슈를 생성할 때 이를 Copilot에 할당하기 전에 설명이 다음을 수행하는지 확인하십시오.
- 올바른 맥락을 제공합니다
- 문제의 달성 목표가 매우 의도적입니다.
- 잘 정의되어 있음
이러한 기준이 충족되었는지 확인한 후 문제를 Copilot에 할당하면 문제가 시작됩니다.
팁: 문제 설명과 같은 영역에 세부정보를 제공할 때 지침 파일에 이미 제공한 내용을 지정할 필요가 없다는 점을 명심하세요.
Copilot이 작동하는 동안 세션을 보고 Copilot이 문제에 접근하는 방식을 이해할 수 있습니다. 이 예에서 Copilot은 문제를 진단하고 단 6분 만에 풀 요청 검토를 요청하여 나에게 알렸습니다. Copilot의 작동 방식을 확인하면 접근 방식을 조정하고 결과를 개선할 수 있는 방법을 더 잘 이해하는 데 도움이 됩니다.
Copilot이 작동하는 동안 작업을 검토하고 다음을 사용하여 Copilot과 채팅하십시오. @copilot 댓글로 변경을 요청하세요. 변경 사항을 맹목적으로 수락하고 끌어오기 요청에 도장을 찍지 마십시오. 좋은 평가를 부탁드립니다.
테이크아웃: 궁극적으로 GitHub Copilot 코딩 에이전트에 위임할 수 있는 모든 것은 다른 중요한 작업에 집중할 수 있게 해줍니다. 그렇다고 결과를 검토하지 않는다는 의미는 아닙니다. 문제와 같은 영역에 대해 제공하는 지침은 매우 구체적이고 의도적이어야 합니다.
핵심 3: 모범 사례 및 자동화 구축
앞서 공유한 파워업의 또 다른 중요한 측면은 GitHub Actions를 통해 IssueOps 및 자동화를 활용하는 것입니다. IssueOps는 GitHub Issue를 자동화를 위한 제어된 명령 인터페이스로 전환합니다. 이러한 구조화된 명령은 인수를 구문 분석하고, 인증/가드레일을 적용하고, 운영 작업(배포, 프로비저닝, 마이그레이션 등)을 실행하고, 감사를 위해 결과를 문제에 다시 쓰는 GitHub Actions 워크플로를 트리거합니다. IssueOps가 무엇인지에 대한 자세한 내용은 IssueOps: GitHub 문제 및 작업을 사용하여 CI/CD 자동화(및 기타!) 게시물을 참조하세요.
제 시나리오에서는 이전에 버그용으로 만든 이슈 템플릿을 사용했습니다. 이 템플릿은 세부 정보와 컨텍스트를 제공하는 데 도움이 되며 이슈 생성 시 시간을 절약해 줍니다.
예: 이슈 템플릿은 .github/ISSUE_TEMPLATE 폴더를 저장소에 넣으세요. 자세한 내용은 저장소에 대한 이슈 템플릿 구성을 참조하세요.
name: "Bug (Copilot Coding Agent-ready)"
description: "Report a bug with details so Copilot can propose a fix via PR."
title: "[Bug]: "
labels: ["bug", "triage", "copilot-coding-agent"]
projects:
- "my-org/1234"
assignees: []
body:
- type: markdown
attributes:
value: |
Thanks for reporting a bug! This template collects the details Copilot’s coding agent needs to propose a fix.
- type: input
id: environment
attributes:
label: Environment
description: OS/Browser, device, app version/commit, and environment (local, preview, production).
placeholder: "macOS 14, Chrome 126, iPhone 13; commit abc123 on preview"
validations:
required: true
- type: textarea
id: steps
attributes:
label: Reproduction steps (concise and deterministic)
description: Provide a minimal, reliable sequence.
placeholder: |
1) Go to /app/
2) Click 테이크아웃: 프로세스를 개선하는 데 도움이 되도록 업무에 IssueOps 유형의 접근 방식을 활용하세요. 이는 특히 Copilot과 페어링할 때 작업을 시작하고 가속화하는 데 견고한 기반을 제공하는 데 도움이 될 수 있습니다.
내 여정과 우리가 논의한 핵심은 핵심 진실을 드러냅니다. 여러 GitHub 기능을 결합하면 더 많은 성능을 얻을 수 있습니다. 정확한 지침과 IssueOps 자동화로 향상된 GitHub Copilot 코딩 에이전트를 GitHub Mobile과 통합하면 구축 및 수정 방법을 변화시킬 수 있는 힘이 있습니다. 도구 자체뿐만 아니라 이를 통해 개발 워크플로우를 강화하는 전체적인 접근 방식도 있습니다.
GitHub 플랫폼은 개발자 모험을 위한 끝없는 조합을 제공합니다. 이러한 결합된 힘을 수용하고 팀의 역량을 강화하며 모든 프로젝트에서 새로운 수준의 효율성과 혁신을 실현하세요. 팀을 막을 수 없게 만드는 파워업은 무엇인가요?
작성자:
Post Comment