03 - 에이전트 모드: 명령으로 코드베이스 수정
IDE에 "이 Angular 애플리케이션에 JWT 인증을 추가하세요"라고 말하고 관찰할 수 있다고 상상해 보세요. 편집자가 파일을 생성하고, 서비스를 작성하고, 구성 요소를 업데이트하고, 테스트를 실행하고, 오류를 수정하는 동안 한 줄의 코드도 건드릴 필요 없이 자체적으로 말이죠. 이것은 공상 과학 소설이 아닙니다. 에이전트 모드 커서, 2025년 AI 기반 IDE 생태계에서 가장 혁신적인 기능 중 하나입니다.
간단한 자동 완성이나 AI를 통한 문자 채팅과 달리 에이전트 모드는 완전히 새로운 수준의 인공 지능: 에이전트는 파일 시스템에 액세스할 수 있으며 터미널에서 명령을 실행하고, 오류 출력을 읽고, 작업이 올바르게 완료되지 않았습니다. 그리고 선임 개발자가 당신과 동시에 작업하는 것처럼, 프로젝트 컨텍스트에 대한 깊은 이해를 바탕으로 복잡한 다중 파일 작업을 관리할 수 있습니다.
이 기사에서는 내부 아키텍처부터 실제 기능에 이르기까지 에이전트 모드를 모든 측면에서 살펴보겠습니다. 실제 사용 사례부터 생산성 극대화를 위한 고급 전략까지. 통합하는 방법을 살펴보겠습니다. 커서 규칙 시스템을 사용하여 한계를 관리하는 방법 및 경쟁업체와 비교하는 방법 GitHub Copilot 에이전트 및 Claude 코드.
이 기사에서 배울 내용
- 에이전트 모드의 아키텍처: LLM + 도구 사용 + 파일 시스템 액세스가 함께 작동하는 방식
- 질문 모드, 편집 모드, 상담원 모드의 차이점과 각각의 사용 시기
- 올바른 템플릿을 사용하여 에이전트 모드를 활성화하고 구성하는 방법
- 에이전트의 전체 기능: 파일 생성, 다중 파일 편집, 터미널, 웹 검색
- 완전한 Angular 코드 예제가 포함된 실제 사용 사례
- 커서 규칙이 에이전트의 효율성을 증폭시키는 방법
- YOLO 모드 및 Max 모드와 같은 제한, 해결 방법 및 고급 모드
- GitHub Copilot Agent 및 Claude Code와의 비교
- 효과적인 프롬프트 및 전문적인 작업 흐름을 위한 모범 사례
커서 IDE 및 AI 네이티브 개발 시리즈 개요
| # | Articolo | 집중하다 |
|---|---|---|
| 1 | 완전한 커서 IDE 가이드 | 전체 개요 |
| 2 | 커서 규칙 | 맞춤형 AI 설정 |
| 3 | 현재 위치 - 에이전트 모드 | 고급 다중 파일 자동화 |
| 4 | 계획 모드 및 백그라운드 에이전트 | 계획 및 병렬성 |
| 5 | 커서 후크 | 워크플로우 자동화 |
| 6 | MCP 및 커서 | 데이터베이스 및 API 통합 |
| 7 | 커서 AI를 사용한 디버깅 | 3배 더 빠른 디버깅 |
| 8 | 커서 vs 윈드서핑 vs 부조종사 | 기기 비교 2026 |
| 9 | 전문적인 각도 작업 흐름 | 커서로 프로젝트 완료 |
에이전트 모드의 아키텍처: 실제 작동 방식
에이전트 모드를 효과적으로 사용하려면 내부에서 무슨 일이 일어나고 있는지 이해하는 것이 중요합니다. 에이전트 모드 단순히 "더 많은 코드를 작성하는 AI"가 아닙니다. 모델에는 다음이 장착되어 있습니다. 콘크리트 도구 개발 환경과 상호 작용합니다.
도구 사용 모델
에이전트 모드의 핵심이자 컨셉 도구 사용 (또는 함수 호출). LLM 모델 Claude Sonnet, GPT-4o, Gemini 등 Cursor의 핵심은 단순히 텍스트를 생성하는 것이 아니라 훈련을 통해 생성됩니다. 작업을 완료하기 위해 외부 도구를 사용해야 하는 시기를 인식합니다. "발명" 대신 파일의 내용을 읽으면 에이전트가 실제로 해당 파일을 읽을 수 있습니다. 출력을 상상하는 대신 명령을 실행하고 결과를 읽을 수 있습니다.
Cursor 에이전트에 사용할 수 있는 도구는 다음과 같습니다.
- 읽기_파일: 특정 파일의 내용을 읽습니다.
- 쓰기_파일: 새 콘텐츠로 파일을 만들거나 덮어씁니다.
- 편집_파일: 파일 일부에 특정 변경 사항 적용
- 목록_디렉토리: 디렉토리에 있는 파일을 나열합니다.
- 검색_파일: 코드베이스에서 텍스트 또는 의미 패턴 검색
- 실행_터미널_명령: 내장 터미널에서 명령을 실행합니다.
- 읽기_터미널_출력: 터미널 출력 읽기(오류 포함)
- 웹_검색: 웹에서 업데이트된 정보를 검색하세요.
- create_subagent: 특정 작업을 위한 전문 에이전트 생성(Cursor 2.0+)
에이전트 루프
에이전트 모드는 다음을 통해 작동합니다. 반복적 추론 주기:
- 관찰하다: 컨텍스트(파일, 프로젝트 구조, 기존 오류)를 읽습니다.
- 계획: 작업을 완료하는 데 필요한 단계를 결정합니다.
- 작동합니다: 사용 가능한 도구 사용(파일 생성, 명령 실행 등)
- 통화: 출력을 읽고, 오류를 확인하고, 결과를 확인합니다.
- 반복: 오류가 있는 경우 새 정보를 사용하여 1단계로 돌아갑니다.
이 루프는 작업과 에이전트가 완료될 때까지 자동으로 계속됩니다. 사용자의 입력이 필요한지 결정합니다.
컨텍스트 수집: 에이전트가 프로젝트를 이해하는 방법
한 줄의 코드를 작성하기 전에 에이전트 모드는 컨텍스트를 철저히 분석합니다. Cursor는 의미 체계 임베딩을 사용하여 코드베이스를 색인화하여 에이전트가 파일을 찾을 수 있도록 합니다. 프롬프트에 명시적으로 언급되지 않은 경우에도 관련 패턴이 포함됩니다. 이것은 단순한 grep과 근본적으로 다릅니다. 에이전트는 관계를 이해합니다. 개념적 코드의 다른 부분 사이.
예를 들어 에이전트에게 "로그인 양식에 유효성 검사를 추가"하라고 요청하면 에이전트는 자동으로 로그인 구성요소, 반응형 양식, 기존 유효성 검사기, TypeScript 템플릿을 살펴보아야 합니다. 그리고 잠재적으로 연관된 단위 테스트 — 지정하지 않고도 모두 가능합니다.
질문 모드, 편집 모드 및 에이전트 모드: 근본적인 차이점
Cursor는 AI와 상호 작용하는 세 가지 주요 방법을 제공하며 각각은 다양한 시나리오에 최적화되어 있습니다. 생산성을 극대화하려면 각각을 언제 사용해야 하는지 이해하는 것이 중요합니다.
질문 모드: 대화
질문 모드(다음으로 액세스 가능) Ctrl+L / Cmd+L) 및 대화 모드
커서의. 이 모드에서는 AI가 설명과 제안으로 질문에 답변합니다.
및 코드 조각이 있지만 파일을 직접 수정하지 않습니다. 이상적인 모드는 다음과 같습니다.
- 복잡하거나 레거시 코드 부분 이해
- 구현하기 전에 아키텍처 대안을 살펴보세요.
- 특정 라이브러리, API 또는 패턴에 대해 질문하세요.
- 코드 검토를 수행하고 기존 코드에 대한 피드백을 받습니다.
- 프로젝트 설계 및 구조에 대한 브레인스토밍
편집 모드: 상황별 편집
편집 모드(다음으로 액세스 가능) Ctrl+K / Cmd+K) 수정을 허용합니다
상황에 맞고 타겟이 명확합니다. AI는 현재 파일이나 특정 선택 항목에 대해 작업을 수행합니다.
지역화된 변환. 다음과 같은 경우에 이상적입니다.
- 단일 함수 또는 클래스 리팩토링
- 코드 변환(예: 함수를 async/await로 변환)
- 기존 메소드에 JSDoc 문서 추가
- 현재 파일의 특정 버그 수정
- IDE에서 제안하는 빠른 수정 사항
에이전트 모드: 완전한 자동화
에이전트 모드(다음으로 액세스 가능) Ctrl+I / Cmd+I, 메뉴에서 "에이전트"를 선택합니다.
드롭다운) 및 가장 강력한 모드입니다. 에이전트가 작업을 수행할 수 있습니다. 여러 파일,
명령 실행, 오류 반복 복잡한 작업을 독립적으로 완료합니다. E
다음에 적합한 모드:
- 여러 파일과 관련된 완전한 기능 구현
- 코드베이스 규모의 리팩토링(예: CommonJS에서 ES 모듈로 마이그레이션)
- 완전히 스캐폴딩된 프로젝트의 초기 설정
- 파일 간 분석이 필요한 버그 수정
- 기존 구성 요소에 테스트 추가
- 기술 마이그레이션(예: RxJS 6에서 RxJS 7로)
DOMANDA: "Cosa fa questo operatore RxJS?"
→ Usa Ask Mode (informazione, nessuna modifica)
TASK: "Converti questa funzione callback in una Promise"
→ Usa Edit Mode (modifica localizzata, file singolo)
TASK: "Aggiungi autenticazione JWT all'intera applicazione"
→ Usa Agent Mode (multi-file, comandi, iterazione)
TASK: "Scrivi i test per questo componente"
→ Usa Agent Mode (crea file di test, esegue test, corregge errori)
TASK: "Spiega l'architettura del progetto"
→ Usa Ask Mode (analisi, nessuna modifica)
TASK: "Aggiungi validazione al form e aggiorna i tipi TypeScript"
→ Usa Agent Mode (modifica più file correlati)
에이전트 모드 활성화 및 구성
채팅을 열고 에이전트 모드를 선택하세요
에이전트 모드는 커서 작성기 창을 통해 활성화됩니다. 단계는 다음과 같습니다.
- 누르다
Ctrl+I(윈도우/리눅스) 또는Cmd+I(macOS) Composer 열기 - 채팅 왼쪽 상단의 드롭다운에서 "대리인"
- 또는 기존 채팅에서 현재 모드를 클릭하고 "에이전트"를 선택하세요.
커서 설정에서 에이전트 모드를 기본값으로 설정할 수도 있습니다.
Settings > Features > Chat > Default Mode.
올바른 모델 선택
에이전트 모드는 각각 다른 기능을 가진 여러 LLM 모델을 지원합니다. 모델의 선택 결과의 품질에 큰 영향을 미칩니다.
CLAUDE SONNET 4.5 / CLAUDE OPUS 4
- Miglior comprensione del contesto complesso
- Eccellente per refactoring e architettura
- Ragionamento più approfondito
- Consigliato per: task complessi, codebase grandi
GPT-4O
- Ottimo bilanciamento velocità/qualità
- Buona gestione del contesto lungo
- Consigliato per: task medi, iterazioni rapide
GEMINI 2.0 FLASH
- Molto veloce
- Context window molto grande (1M token)
- Consigliato per: task con molti file, analisi di grandi codebase
CURSOR FAST (modello proprietario)
- Ottimizzato per velocità
- Consigliato per: completamenti rapidi, suggerimenti inline
YOLO 모드: 자동 명령 실행
기본적으로 에이전트 모드는 터미널에서 명령을 실행하기 전에 확인을 요청합니다. 욜로 모드 이 확인 메시지를 제거하여 에이전트가 다음을 수행할 수 있도록 합니다. 독립적으로 명령을 실행합니다. 활성화하려면:
Settings > Features > Chat & Composer > Allow agent to run commands automatically
YOLO 모드를 조심하세요
YOLO 모드는 강력하지만 주의가 필요합니다. 항상 구성 허용되는 명령
허용 목록 지정(예: npm test, ng build) 및 거부 목록
(예: rm -rf, git push). 실내 환경에서는 YOLO 모드를 활성화하지 마세요.
제한을 올바르게 구성하지 않은 채 프로덕션 또는 민감한 데이터가 있는 저장소에 있는 경우.
최대 모드: 확장된 컨텍스트
최근 업데이트로 소개된, 최대 모드 제한을 제거합니다 공격적인 커서 컨텍스트 가지치기. 표준 모드에 있는 동안 에이전트는 컨텍스트를 줄입니다. 응답성을 향상시키기 위해 Max 모드는 모델에서 사용 가능한 전체 컨텍스트를 사용합니다. 이는 다음과 같은 경우 훨씬 더 나은 결과로 이어집니다.
- 파일 간 종속성이 많은 대규모 코드베이스
- 여러 애플리케이션 계층을 이해해야 하는 복잡한 버그
- 프로젝트에 배포된 아키텍처 패턴을 존중해야 하는 리팩토링
에이전트의 전체 기능
파일 생성 및 편집
에이전트는 구조를 완전히 인식하여 새 파일을 생성하고 기존 파일을 수정할 수 있습니다. 프로젝트의. 코드를 별도로 생성하는 것이 아니라 기존 파일을 읽고 이해합니다. 패턴을 파악하고 프로젝트의 스타일과 규칙에 맞는 새로운 코드를 생성합니다.
Prompt all'agente:
"Crea un sistema di notifiche in stile toast per questa applicazione Angular.
Deve includere:
- NotificationService con metodi success(), error(), warning(), info()
- NotificationComponent standalone con animazioni CSS
- Integrazione nel AppComponent
- Modello NotificationMessage con tipo, messaggio e durata
- Test unitari per il servizio
Usa standalone components, signals per lo state, e rispetta
le convenzioni Angular del progetto (OnPush, async pipe, ecc.)"
이 단일 프롬프트를 통해 에이전트 모드는 일반적으로 다음을 생성하거나 수정합니다.
src/app/core/models/notification.model.ts(새로운)src/app/core/services/notification.service.ts(새로운)src/app/shared/components/notification/notification.component.ts(새로운)src/app/shared/components/notification/notification.component.html(새로운)src/app/shared/components/notification/notification.component.css(새로운)src/app/app.component.ts(구성요소를 포함하도록 수정됨)src/app/app.component.html(구성요소 태그를 추가하도록 편집됨)src/app/core/services/notification.service.spec.ts(새로운)
터미널 명령 실행
에이전트 모드는 Cursor의 내장 터미널에서 명령을 실행하고 출력을 읽을 수 있습니다. 이 사람 다음을 수행할 수 있습니다.
- 다음을 사용하여 종속성을 설치합니다.
npm install - 빌드를 실행하고 TypeScript 오류를 읽으세요.
- 테스트를 실행하고 통과할 때까지 반복합니다.
- Linter 및 Formatter를 자동으로 실행
- Angular CLI를 사용하여 스캐폴딩 생성
- 프로젝트의 사용자 정의 스크립트 실행
실시간 웹 검색
종종 과소평가되는 능력은 업무 중에 웹에서 정보를 검색하는 능력입니다. 작업 실행. 에이전트는 공식 문서를 참조하고 검색할 수 있습니다. 특정 오류에 대한 솔루션을 찾거나 업데이트된 API의 올바른 구문을 확인하세요. 이는 자주 업데이트되는 라이브러리로 작업할 때 특히 유용합니다. Angular, RxJS 또는 Material Design 라이브러리와 같은 자체 API.
오류 분석 및 자체 수정
에이전트 모드의 가장 강력한 기능 중 하나는 다음과 같은 기능입니다. 자기 교정. 코드 생성 후 에이전트는 빌드를 실행합니다(YOLO 모드가 활성화되어 있거나 사용자가 승인한 경우). TypeScript 또는 linter 오류를 읽고 오류가 없을 때까지 코드를 수정하여 반복합니다. 더 많은 오류. 이 피드백 루프는 포팅에 필요한 시간을 획기적으로 줄여줍니다. 빌드 오류가 없습니다.
Angular의 실제 사용 사례
사례 1: 완전한 기능 추가(구성 요소 + 서비스 + 테스트)
에이전트 모드의 가장 일반적인 사용 사례는 새로운 기능을 구현하는 것입니다. 예를 보자 구체적: Angular 목록에 페이지 매김 시스템을 추가합니다.
Implementa un sistema di paginazione per il componente UserListComponent.
Requisiti tecnici:
- Crea PaginationComponent standalone con signal-based state
- PaginationService per la logica di business (calcolo pagine, navigazione)
- UserListComponent deve accettare input() per totalItems e pageSize
- Emetti output() pageChange con il numero di pagina corrente
- Usa HttpClient per caricare i dati paginati dall'endpoint /api/users?page=&size=
- Gestisci loading state e error state con NgOptimizedImage per avatars
- Aggiungi ARIA labels per accessibility
- Test unitari per PaginationService (min 80% coverage)
- Test di integrazione per UserListComponent
Struttura file attesa:
- src/app/shared/components/pagination/pagination.component.ts
- src/app/shared/components/pagination/pagination.component.html
- src/app/shared/components/pagination/pagination.component.css
- src/app/core/services/pagination.service.ts
- src/app/features/users/user-list.component.ts (aggiorna)
다음은 에이전트가 PaginationService에 대해 일반적으로 생성하는 코드입니다.
import { Injectable, signal, computed } from '@angular/core';
export interface PaginationState {
currentPage: number;
pageSize: number;
totalItems: number;
}
@Injectable({
providedIn: 'root'
})
export class PaginationService {
private readonly _state = signal<PaginationState>({
currentPage: 1,
pageSize: 10,
totalItems: 0
});
readonly state = this._state.asReadonly();
readonly totalPages = computed(() =>
Math.ceil(this._state().totalItems / this._state().pageSize)
);
readonly hasPreviousPage = computed(() =>
this._state().currentPage > 1
);
readonly hasNextPage = computed(() =>
this._state().currentPage < this.totalPages()
);
readonly pageNumbers = computed(() => {
const total = this.totalPages();
const current = this._state().currentPage;
const range = 2;
const start = Math.max(1, current - range);
const end = Math.min(total, current + range);
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
});
updateState(partial: Partial<PaginationState>): void {
this._state.update(state => ({ ...state, ...partial }));
}
goToPage(page: number): void {
const total = this.totalPages();
if (page >= 1 && page <= total) {
this._state.update(state => ({ ...state, currentPage: page }));
}
}
nextPage(): void {
if (this.hasNextPage()) {
this.goToPage(this._state().currentPage + 1);
}
}
previousPage(): void {
if (this.hasPreviousPage()) {
this.goToPage(this._state().currentPage - 1);
}
}
}
import {
Component, OnInit, input, output, inject, OnChanges, SimpleChanges
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaginationService } from '@core/services/pagination.service';
@Component({
selector: 'app-pagination',
standalone: true,
imports: [CommonModule],
templateUrl: './pagination.component.html',
styleUrl: './pagination.component.css',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PaginationComponent implements OnChanges {
readonly totalItems = input.required<number>();
readonly pageSize = input<number>(10);
readonly pageChange = output<number>();
private readonly paginationService = inject(PaginationService);
readonly state = this.paginationService.state;
readonly totalPages = this.paginationService.totalPages;
readonly hasPrev = this.paginationService.hasPreviousPage;
readonly hasNext = this.paginationService.hasNextPage;
readonly pageNumbers = this.paginationService.pageNumbers;
ngOnChanges(changes: SimpleChanges): void {
if (changes['totalItems'] || changes['pageSize']) {
this.paginationService.updateState({
totalItems: this.totalItems(),
pageSize: this.pageSize()
});
}
}
onPageChange(page: number): void {
this.paginationService.goToPage(page);
this.pageChange.emit(page);
}
onPrevious(): void {
this.paginationService.previousPage();
this.pageChange.emit(this.paginationService.state().currentPage);
}
onNext(): void {
this.paginationService.nextPage();
this.pageChange.emit(this.paginationService.state().currentPage);
}
}
사례 2: 파일 간 리팩토링
에이전트 모드의 가장 확실한 장점 중 하나는 여러 파일을 포괄하는 리팩토링입니다.
다음 시나리오를 고려해보세요. Angular 프로젝트의 모든 구성 요소를 다음에서 마이그레이션해야 합니다.
ngModel 반응형 양식에.
Migra tutti i form dell'applicazione da Template-Driven Forms a Reactive Forms.
Analizza tutti i file in src/app/ e:
1. Identifica tutti i componenti che usano ngModel o [(ngModel)]
2. Per ogni componente trovato:
- Sostituisci ngModel con FormControl/FormGroup
- Aggiungi ReactiveFormsModule agli imports del componente
- Rimuovi FormsModule se non necessario
- Aggiorna la validazione inline con Validators
- Mantieni la stessa logica di submit
3. Aggiorna i test esistenti per usare ReactiveFormsModule
4. Verifica che la build passi dopo ogni modifica
Mantieni la retrocompatibilita dell'interfaccia utente.
Non modificare i servizi HTTP o la logica di business.
사례 3: 상황 인식을 통한 버그 수정
에이전트 모드는 오류가 나타나는 파일에만 국한되지 않기 때문에 버그 수정에 탁월합니다. 구성 요소와 서비스 간의 관계를 이해하여 진정한 근본 원인을 찾습니다.
Ho un bug nell'applicazione: quando navigo a /users/123/settings e poi
torno indietro con il browser, il componente UserSettingsComponent
mostra i dati dell'utente precedente invece di ricaricarli.
L'errore sembra legato alla gestione del route params in combinazione
con il caching del servizio. L'errore si manifesta SOLO dopo la
prima navigazione - il refresh della pagina funziona correttamente.
Analizza:
- UserSettingsComponent e come gestisce ngOnInit/ActivatedRoute
- UserService e la sua strategia di caching
- Il routing configuration per questo modulo
- Eventuali Observable che potrebbero non essere ri-subscribed
Proponi e implementa la fix con relative spiegazioni.
이 시나리오에서 에이전트 모드는 일반적으로 다음을 수행합니다.
- Legge
user-settings.component.ts어느 것이 사용되는지 식별ngOnInit대신에ngOnChangesotakeUntilDestroyed - Legge
user.service.tsObservable이 구독 후에 완료되고 재발급되지 않음을 발견합니다. - Legge
app.routes.ts또는 구성 요소가 다시 생성되거나 재사용되는지 이해하기 위한 라우팅 모듈 - 그는 수정 사항을 제안합니다.
ActivatedRoute.paramMap대신 Observable을 사용하여snapshot - 영향을 받는 모든 파일에 수정 사항을 배포합니다.
- 수정된 코드의 정확성을 확인하기 위해 Linter를 실행합니다.
에이전트 모드 및 커서 규칙: 강력한 시너지 효과
에이전트 모드는 시스템과 결합하면 기하급수적으로 강력해집니다. 커서 규칙. 규칙은 사용자를 안내하는 "시스템 지침" 역할을 합니다. 특정 프로젝트 내에서 에이전트가 어떻게 작동해야 하는지에 대한 에이전트입니다. 규칙 없이, 에이전트는 팀 규칙을 따르지 않을 수 있는 일반 코드를 생성합니다. 잘 구성된 규칙을 사용하면 생성된 코드가 작성된 코드와 구별되지 않습니다. 프로젝트의 개발자 전문가에 의해.
규칙이 에이전트 모드에 미치는 영향
유형의 규칙 Always 각 세션이 시작될 때 주입됩니다.
에이전트의 지속적인 컨텍스트를 제공합니다. 규칙 Agent Requested 그들이 온다
에이전트가 현재 작업과 관련이 있다고 판단하면 동적으로 로드됩니다.
이를 통해 프로젝트의 다양한 측면에 대한 특수 규칙을 가질 수 있습니다.
컨텍스트 창을 불필요하게 확장합니다.
에이전트 모드를 사용하는 Angular 프로젝트에 대한 규칙 구성의 전체 예를 살펴보겠습니다.
새로운 커서 구조(0.45 이후)에서는 규칙이 디렉토리에 들어갑니다.
.cursor/rules/ 파일로 .mdc:
---
description: Regole fondamentali per lo sviluppo Angular in questo progetto
globs: ["src/**/*.ts", "src/**/*.html"]
alwaysApply: true
---
# Regole Angular - Sempre Attive
## Framework e Versione
- Progetto Angular 19+ con standalone components (NO NgModules)
- TypeScript strict mode abilitato
- RxJS 7.8+ (evita operatori deprecated)
## Component Guidelines
- SEMPRE OnPush change detection
- SEMPRE standalone: true
- USA signals (signal(), computed(), effect()) per lo stato locale
- USA input() e output() invece di @Input/@Output decorators
- EVITA constructor injection, usa inject()
- USA takeUntilDestroyed() per gestire le subscription
## Service Guidelines
- providedIn: 'root' per servizi globali
- USA HttpClient con typed responses HttpClient.get<T>()
- Gestisci SEMPRE gli errori con catchError
- Usa interceptors per auth headers, non logica nei servizi
## File Naming
- Components: kebab-case, es. user-profile.component.ts
- Services: kebab-case con .service.ts suffix
- Models: kebab-case con .model.ts suffix
- Separati file HTML e CSS (non inline templates/styles)
## Testing
- Usa jasmine + karma (non jest, non vitest)
- Minimo 80% coverage per i servizi
- Usa TestBed per i component tests
- Mock i servizi HTTP con HttpClientTestingModule
---
description: Pattern avanzati per Agent Mode in questo progetto Angular
globs: ["src/app/**/*.ts"]
alwaysApply: false
---
# Pattern Architetturali del Progetto
## Struttura Directory
```
src/app/
├── core/ # Servizi singleton, guards, interceptors
├── shared/ # Componenti e pipe riusabili
├── features/ # Feature modules (lazy loaded)
│ ├── auth/
│ ├── users/
│ └── dashboard/
└── models/ # Interfacce TypeScript condivise
```
## State Management
- Usa signals per state locale ai componenti
- Usa servizi con BehaviorSubject/signal per state condiviso
- NO NgRx a meno che non sia già nel progetto
## HTTP Patterns
```typescript
// PATTERN CORRETTO per le chiamate HTTP
getData(): Observable<User[]> {
return this.http.get<User[]>('/api/users').pipe(
catchError(err => {
console.error('Failed to fetch users:', err);
return throwError(() => new Error('Failed to fetch users'));
})
);
}
```
## Routing
- Usa lazy loading per tutte le feature routes
- Guards come funzioni arrow (functional guards), non classi
- Usa withComponentInputBinding() per route params come inputs
## Quando l'Agent crea un nuovo componente:
1. Verifica se esiste già un componente simile in shared/
2. Aggiungi SEMPRE all'export di un barrel file (index.ts)
3. Aggiorna il routing se il componente e una pagina
4. Genera il file di test corrispondente
---
description: Convenzioni per commit messages e PR
alwaysApply: false
---
# Commit Conventions
## Formato
<type>(<scope>): <description>
Types: feat, fix, refactor, test, docs, chore, perf
## Esempi
feat(auth): add JWT refresh token support
fix(users): resolve pagination state after navigation
refactor(shared): migrate to signal-based pagination
test(notification): add unit tests for NotificationService
## Prima di completare un task
- Verifica che non ci siano console.log rimanenti
- Controlla che tutti i TODO siano risolti o documentati
- Esegui ng build --configuration=production prima del commit
이 규칙 구성을 사용하면 에이전트가 다음과 같은 메시지를 받을 때 "주문 목록 구성요소 생성"은 자동으로 다음을 생성합니다.
- OnPush 변경 감지 기능을 갖춘 독립형 구성 요소
- 지역 상태에 대한 신호
- 데코레이터 대신 input()/output()
- 의존성 주입을 위한 inject()
- 구독을 위한 takeUntilDestroyed()
- 해당 테스트 파일
- 배럴 파일 업데이트
프롬프트에서 이를 지정할 필요 없이 이 모든 것이 자동으로 수행됩니다.
에이전트 모드의 한계와 이를 극복하는 방법
컨텍스트 창 및 대용량 파일
에이전트 모드의 가장 일반적인 제한 사항은 다음과 같습니다. 컨텍스트 창. 코드베이스가 매우 크면 에이전트에 모든 파일을 로드할 공간이 부족할 수 있습니다. 동시에 관련됩니다. 이로 인해 일관되지 않은 변경이나 손실이 발생할 수 있습니다. 작업의 서로 다른 부분 사이의 맥락.
컨텍스트 창 관리 전략
- 대규모 작업을 세분화합니다. 하나의 메가 작업 프롬프트 대신 분할하세요. 논리적인 단계로 작업하세요. 다음 단계로 넘어가기 전에 각 단계를 완료하고 확인하세요.
-
명시적인 컨텍스트에는 @file을 사용하세요. 관련 파일을 명시적으로 표시
와
@nomefile상담사가 상황의 우선순위를 정하는 데 도움이 됩니다. - 최대 모드 활성화: 많은 컨텍스트가 필요한 복잡한 작업의 경우 최대 모드는 공격적인 가지치기를 줄이고 결과의 품질을 향상시킵니다.
-
컨텍스트 문서 만들기: 매우 큰 프로젝트의 경우 파일 생성
ARCHITECTURE.mdoCONTEXT.md구조를 요약한 것 프로젝트의. 에이전트는 작업 시작 시 이를 읽을 수 있습니다.
잠재적으로 파괴적인 행동
에이전트 모드는 올바르게 안내되지 않으면 중요한 파일을 수정하거나 삭제할 수 있습니다. 몇 가지 주요 예방 조치:
-
에이전트에 위임하기 전에 커밋합니다. 항상 커밋 또는 숨김을 수행하세요.
중요한 작업에 대해 에이전트 모드를 시작하기 전에 변경 사항을 확인하세요. 이를 통해
간단한 방법으로 이전 상태로 돌아가려면
git checkout. - 규칙을 사용하여 보호된 파일을 정의합니다. 다음을 나타내는 규칙을 추가하세요. 절대로 수정해서는 안 되는 파일(예: 중요한 구성 파일, 데이터베이스 마이그레이션 파일).
- 신청하기 전에 검토하세요: 커서는 항상 다음과 같은 차이점을 보여줍니다. 변경 사항을 적용하기 전에 제안된 변경 사항입니다. 시간을 내어 검토해 보세요. 구성이나 데이터베이스 스키마와 같은 중요한 파일의 경우.
추론과 환각의 오류
다른 AI 시스템과 마찬가지로 에이전트 모드도 실수를 할 수 있습니다. 존재하지 않는 API를 "환각"할 수 있습니다. 오래된 버전의 라이브러리를 사용하거나 모호한 요구 사항을 잘못 해석합니다. 대책:
- 특정 프롬프트: 프롬프트가 구체적일수록 그리고 오해의 여지가 있습니다. 라이브러리 버전, 패턴 포함 즐겨찾기 및 명시적인 제약 조건이 있습니다.
- 웹 검색 활성화: 상담원이 문서를 참조하도록 허용 업데이트하면 더 이상 사용되지 않는 API를 사용할 위험이 크게 줄어듭니다.
- 출력을 확인합니다. 검토하지 않고 변경 사항을 적용하지 마십시오. 이는 중요한 비즈니스 로직이나 보안 코드에 특히 중요합니다.
검토 없이 에이전트에 보안 코드를 위임하지 마십시오
인증, 권한 부여, 암호화 및 비밀 관리가 영역입니다. AI가 기능적으로는 정확하지만 보안 취약성이 있는 코드를 생성할 수 있는 경우 얇다. 검토 언제나 에이전트가 생성한 보안 코드를 주의 깊게 확인하세요. 가능하다면 보안 전문가에게 검토를 요청하세요.
에이전트 모드 및 GitHub Copilot 에이전트 및 Claude 코드
2025~2026년 소프트웨어 개발을 위한 AI 에이전트 환경은 경쟁이 치열합니다. 커서의 에이전트 모드가 주요 대안과 어떻게 비교되는지 살펴보겠습니다.
capacità CURSOR AGENT COPILOT AGENT CLAUDE CODE
─────────────────────────────────────────────────────────────────────
Agenti paralleli 8 (con worktrees) 1 1 (task)
File system access Si Si Si
Terminal execution Si (YOLO Mode) Limitato Si (bash)
Web search Si No Si
Codebase indexing Si (semantico) Si No (manuale)
Multi-repo support Si (worktrees) No Parziale
Context window 200K+ (Max Mode) 128K 200K (Claude 3.5)
Background agents Si No No
Cursor Rules integration Si (nativa) No CLAUDE.md
MCP support Si (nativa) Limitato Si
Prezzo $20/mese (Pro) $10/mese API usage
IDE integration Editor dedicato VS Code plugin CLI/API
Controllo sul modello Si (scelta LLM) Limitato Si (Claude)
─────────────────────────────────────────────────────────────────────
커서 에이전트: 강점
커서의 가장 큰 장점은기본 통합 IDE, 에이전트, 및 규칙 시스템. 에이전트는 의미론적으로 색인화된 전체 코드베이스에 액세스할 수 있습니다. 편집기에서 직접 파일을 편집하고, 내장 터미널에서 명령을 실행하고, 닫힌 루프에서 오류를 반복합니다. 최대 8개의 병렬 에이전트를 관리하는 기능 git worktrees(Cursor 2.0에 도입됨)를 사용하면 구현을 탐색할 수 있습니다. 병렬로 대안.
GitHub Copilot 에이전트: 강점
GitHub Workflow에 직접 통합된 Copilot Agent는 해결 능력이 뛰어납니다. 독립형 GitHub 문제. PR을 직접 열고 정의된 작업을 수행할 수 있습니다. 문제가 발생하면 GitHub 코드 검토 프로세스와 기본적으로 통합됩니다. 이미 GitHub 생태계에서 작업 중인 팀의 경우 이 워크플로는 매우 원활합니다.
클로드 코드: 강점
Claude Code(Anthropic의 CLI 도구, API를 통해 Claude에 액세스하는 것과 다름) 그 때문에 빛난다 유연성 복잡한 작업에 대한 깊은 추론. 장기 실행 작업, 아키텍처 분석 및 필요한 상황에 적합합니다. 실행 속도보다는 추론의 최대 품질. 그럴 수 있다 터미널을 통해 모든 IDE에 통합됩니다.
언제 무엇을 선택해야 하는가
- 커서 에이전트: 일상적인 개발, 기능 구현, 리팩토링, 디버그. IDE에서 통합된 경험을 원하는 사람들을 위한 최고의 선택입니다.
- 부조종사 에이전트: GitHub 중심 팀, 자동화된 문제 해결, PR 워크플로우. GitHub 레이어의 Cursor를 보완하는 데 이상적입니다.
- 클로드 코드: 고도의 추론 작업, 아키텍처 분석, 스크립트 자동화, IDE를 변경할 수 없는 환경.
에이전트 모드 모범 사례
1. 효과적인 프롬프트의 기술
에이전트 모드 출력의 품질은 프롬프트의 품질에 정비례합니다. 모호한 프롬프트는 일반 코드를 생성합니다. 특정 프롬프트는 다음과 같은 코드를 생성합니다. 프로젝트를 완전히 아는 사람이 작성했습니다.
STRUTTURA RACCOMANDATA:
[CONTESTO]
Sto lavorando su un'applicazione Angular 19 per la gestione delle risorse
umane. Il componente EmployeeListComponent attualmente mostra solo una
lista statica.
[TASK SPECIFICO]
Aggiungi funzionalità di ricerca e filtraggio alla lista dipendenti.
[REQUISITI TECNICI]
- Ricerca in tempo reale con debounce di 300ms (usa debounceTime da RxJS)
- Filtri multipli: dipartimento (select), stato (active/inactive), ruolo
- I filtri devono essere combinabili (AND logic)
- Lo stato dei filtri deve persistere nella URL come query params
- Usa signals per lo state locale, ActivatedRoute per sync con URL
[VINCOLI E LIMITAZIONI]
- Non modificare EmployeeService (ha i suoi test)
- Mantieni la compatibilità con il componente di paginazione esistente
- Non aggiungere nuove dipendenze npm
[OUTPUT ATTESO]
- Aggiorna EmployeeListComponent
- Crea EmployeeFilterComponent se necessario
- Aggiorna i test di EmployeeListComponent
---
ESEMPIO DI PROMPT INEFFICACE (da evitare):
"Aggiungi ricerca alla lista"
2. 빈번한 Git 체크포인트 사용
중요한 작업에 대한 각 에이전트 모드 세션 전에 git 체크포인트를 생성하십시오.
# Prima di lanciare Agent Mode su un task significativo
git add -A
git commit -m "chore: checkpoint prima di agent mode - feature X"
# Oppure, per un branch temporaneo di backup
git stash push -m "backup prima di agent mode"
# Dopo che l'agente ha completato
# Rivedi le modifiche
git diff HEAD
# Se soddisfatto, committa
git add -A
git commit -m "feat(users): add pagination via agent mode"
# Se qualcosa e andato storto
git checkout . # Annulla tutte le modifiche non committate
# Oppure
git stash pop # Ripristina lo stash
3. 신청 전 검토
커서에는 항상 상담원이 제안한 변경 사항의 차이점이 표시됩니다. 항상 자신을 가져 가라. 특히 다음과 같은 변경 사항을 검토하는 데 시간을 투자하세요.
- 구성 파일(angular.json, tsconfig.json, package.json)
- 인증 및 승인 코드
- 데이터베이스 마이그레이션 파일
- 중요한 비즈니스 로직
- 환경 변수 및 민감한 구성
4. 작업 반복 및 개선
에이전트 모드가 하나의 완벽한 프롬프트로 복잡한 작업을 완료할 것이라고 기대하지 마십시오. 가장 생산적이고 반복적인 작업 흐름:
ITERAZIONE 1: Implementazione base
Prompt: "Crea il NotificationService base con metodi success/error"
→ Rivedi, approva, committa
ITERAZIONE 2: Aggiunta feature
Prompt: "Aggiungi al NotificationService il supporto per notifiche
persistenti (che non si chiudono automaticamente) e per
la gestione della coda (max 3 notifiche visibili)"
→ Rivedi, approva, committa
ITERAZIONE 3: Test e fix
Prompt: "Scrivi i test unitari per NotificationService.
Verifica che ng test passi senza errori"
→ L'agente scrive i test, li esegue, corregge eventuali errori
→ Rivedi, approva, committa
ITERAZIONE 4: Integrazione
Prompt: "Integra NotificationService in AuthService per
mostrare una notifica di successo dopo il login
e una di errore in caso di credenziali invalide"
→ Rivedi, approva, committa
5. 에이전트별 규칙 구성
이전 섹션에서 본 것처럼 규칙은 생산성을 높이는 요소입니다. 에이전트 모드에서는 더욱 강력해졌습니다. 프로젝트에 대한 좋은 규칙 기반을 구축하는 데 시간을 투자하세요. 좋은 경험 법칙: 상담원이 "나쁘게" 한 일을 바로잡을 때마다 존중합니다. 프로젝트 규칙에 해당 수정 사항을 규칙으로 추가하세요.
에이전트 모드를 사용한 전문적인 작업 흐름
에이전트 모드를 사용하는 개발자의 일반적인 하루
Agent Mode가 Angular 개발자의 일상적인 작업 흐름에 어떻게 통합되는지 살펴보겠습니다.
09:00 - PLANNING
- Apri il backlog, seleziona la task del giorno
- Usa Ask Mode per analizzare l'impatto della task sulla codebase
Prompt: "Analizza la codebase e dimmi quali file dovro modificare
per implementare [feature X]. Identifica dipendenze e rischi."
09:15 - CHECKPOINT GIT
git checkout -b feature/user-search
git add -A && git commit -m "chore: init feature branch"
09:20 - IMPLEMENTAZIONE CON AGENT MODE
- Attiva Agent Mode
- Usa il prompt strutturato (contesto + task + vincoli)
- Lascia lavorare l'agente (5-15 minuti per feature medie)
09:40 - REVIEW E RAFFINAMENTO
- Rivedi il diff generato file per file
- Accetta le modifiche corrette, rigetta quelle problematiche
- Per modifiche parzialmente corrette, usa Edit Mode per aggiustamenti
- Chiedi chiarimenti con Ask Mode se qualcosa non e chiaro
10:00 - TESTING
Prompt Agent Mode: "Esegui ng test e correggi tutti gli errori che
trovi. Assicurati che la coverage dei file modificati sia >= 80%"
10:20 - COMMIT E PR
git add -A
git commit -m "feat(users): add real-time search with URL sync"
git push origin feature/user-search
# Apri PR su GitHub
10:30 - PROSSIMA TASK
패턴: 지원 코드 검토를 위한 에이전트 모드
덜 명확하지만 에이전트 모드 및 보조 코드 검토를 매우 효과적으로 사용합니다. PR을 수행하기 전에 에이전트에게 작업을 검토하도록 요청하세요.
Fai una code review dei file che ho modificato in questo branch.
Analizza:
1. Conformità alle Angular best practices (standalone, signals, etc.)
2. Potenziali memory leaks (subscription non chiuse, reference cycles)
3. Performance (change detection, trackBy, pure pipes)
4. Security (XSS, injection, dati sensibili nei log)
5. qualità dei test (coverage, edge cases, mock appropriati)
6. Consistenza con le convenzioni del progetto
Per ogni problema trovato:
- Indica il file e la riga
- Spiega il problema
- Proponi la fix
Alla fine, dai un rating complessivo: Approved / Needs Changes / Major Issues
계획 모드와 통합
특히 복잡한 작업의 경우 에이전트 모드를 다음과 결합하세요. 계획 모드 (이 내용은 시리즈의 다음 기사에서 살펴보겠습니다). 계획 모드에서는 에이전트가 다음을 수행할 수 있습니다. 먼저 검토하고 승인할 수 있는 체계적인 작업 계획을 작성하세요. 실행을 시작하자. 이는 특히 다음과 같은 경우에 유용합니다.
- 중요한 프레임워크 또는 라이브러리의 마이그레이션
- 많은 파일을 다루는 교차 기능 구현
- 중요한 아키텍처 리팩토링
- 새 프로젝트 또는 모듈의 초기 설정
Cursor 2.0의 에이전트 모드: 새로운 개척지
2025년 후반에 출시된 Cursor 2.0에서는 에이전트 모드가 크게 개선되었습니다. 이러한 기능은 AI 기반 개발의 미래를 나타냅니다.
Git 작업 트리를 사용한 병렬 에이전트
Cursor 2.0의 가장 혁신적인 기능은 동시에 에이전트 8개, 각각 별도의 Git 작업 트리에서 작동합니다. 각 에이전트는 독립적으로 작동하므로 대체 구현을 탐색할 수 있습니다. 간섭 없이 동시에.
중요한 기능을 구현하기 위해 세 가지 다른 접근 방식 중에서 선택해야 한다고 상상해 보십시오. 병렬 에이전트를 사용하면 동시에 세 개의 에이전트를 시작할 수 있습니다. 다른 접근 방식을 지정하는 다른 프롬프트. 15~20분 후 3개가 나옵니다. 완벽한 구현을 통해 최상의 구현을 비교하고 선택합니다.
백그라운드 에이전트
Cursor 2.0의 백그라운드 에이전트를 사용하면 장기 작업을 위임할 수 있습니다. 다른 작업을 계속하는 동안 백그라운드에서 실행됩니다. 에이전트를 시작할 수 있습니다 "새 버전의 Angular에 대한 프로젝트의 모든 테스트를 업데이트"하고 그 동안에는 계속해서 기능을 개발해 보세요. 상담원이 다음과 같은 경우 알려줍니다. 완료되었거나 입력이 필요할 때.
전문 하위 에이전트
이제 에이전트 모드는 특수 하위 에이전트 생성을 지원합니다. "오케스트레이터" 에이전트 작업의 특정 부분을 특수 하위 에이전트에 위임할 수 있습니다. 하나는 쓰기용입니다. 테스트용으로 하나, 성능 최적화용으로 하나, 문서화용으로 하나. 다양한 모델, 규칙 및 도구 액세스를 사용하여 하위 에이전트를 구성할 수 있습니다. 주 대리인에 의해.
결론 및 다음 단계
커서의 에이전트 모드는 생산성의 가장 중요한 도약 중 하나를 나타냅니다. 오늘부터 개발자에게 제공됩니다. "AI가 당신을 위해 코드를 작성한다"는 것이 아니라, 하지만 지능적인 협력자 작업 흐름 속도를 높이고 기술적 복잡성을 관리하고 집중할 수 있는 시간을 확보합니다. 아키텍처, 디자인 및 높은 가치의 결정.
기억해야 할 핵심 사항:
- 에이전트 모드 = LLM + 도구 사용 + 컨텍스트: 마법이 아니라 시스템이야 AI가 구체적인 도구를 사용하여 코드베이스와 상호 작용하는 곳에서 잘 설계되었습니다.
- 프롬프트의 품질에 따라 출력의 품질이 결정됩니다. 프롬프트 구체적이고 맥락적이며 명시적인 제약이 있으면 상당한 결과를 얻을 수 있습니다. 모호한 메시지보다 낫습니다.
- 커서 규칙은 생산성을 높여줍니다. 좋은 것 규칙 구성은 에이전트를 "일반 AI"에서 "전문 개발자"로 변환합니다. 특정 프로젝트의 ".
- 신청하기 전에 항상 검토하십시오. 에이전트 모드는 도구입니다 강력하지만 오류가 없는 것은 아닙니다. 귀하의 중요하고 기본적인 리뷰, 특히 보안 코드 및 중요한 비즈니스 로직을 위한 것입니다.
- 작은 단계로 반복합니다. 가장 효과적인 워크플로는 작업을 나눕니다. 각 단계에서 검토 및 커밋이 포함되어 반복적인 단계로 복잡해집니다.
시리즈 계속하기: 다음 기사
시리즈의 다음 기사에서 우리는 탐구할 것입니다 계획 모드 및 백그라운드 에이전트: 복잡한 작업에 대해 구조화된 계획을 사용하는 방법과 작업을 위임하는 방법 Cursor 2.0 백그라운드 에이전트로 생산성을 극대화합니다. 에이전트 모드인 경우 엔진, 계획 모드 및 스티어링 휠.
시리즈 관련 기사
- 커서 규칙(제2조): 구성에 대해 자세히 알아보기 특정 프로젝트에서 에이전트 모드를 증폭시키는 규칙 시스템.
- 계획 모드 및 백그라운드 에이전트(4조): 다음 단계 체계적인 계획을 통해 더욱 복잡한 작업을 자동화합니다.
- MCP 및 커서(6조): 에이전트 모드 연결 방법 Model Context Protocol을 통해 데이터베이스, 외부 API 및 사용자 정의 도구에 적용됩니다.
- 전문적인 각도 작업 흐름(9조): 각도 프로젝트 생성부터 배포까지 전적으로 커서 에이전트 모드로 개발되었습니다.