본문으로 건너뛰기

© 2026 Molayo

Dev.to헤드라인2026. 06. 15. 05:28

Angular 프롬프트

요약

Angular 프로젝트의 일관성을 유지하기 위해 지침 파일(.md)을 컨텍스트로 활용하는 프롬프트 전략을 소개합니다. 프로젝트 구조와 UI 레이아웃 규칙을 정의하여 AI가 엔터프라이즈급 표준에 맞는 코드를 생성하도록 유도합니다.

핵심 포인트

  • 지침 파일을 컨텍스트로 추가하여 프로젝트 일관성 확보
  • 디렉토리 구조와 UI 컴포넌트 규칙을 명시적으로 정의
  • Copilot이 무작위 예시 대신 표준 레이아웃을 생성하도록 유도
  • 프론트엔드 팀의 Look and feel을 강제하는 효과적 방법

네. 이것은 제가 다음과 같은 경로에 저장할 법한 정확한 유형의 파일입니다:

.github/instructions/angular-ui.instructions.md

그러면 개발자가 새로운 Angular 기능이나 페이지를 시작할 때마다, 이 파일을 컨텍스트 (Context)로 추가합니다.

...

+------------------------------------------------------+
| 상단 네비게이션 바 (Top Navigation Bar)                |
| 로고 (Logo) | 앱 이름 (App Name)             알림 (Notifications) | 사용자 (User) |
+------------------------------------------------------+
| 사이드바 (Sidebar) | 메인 콘텐츠 영역 (Main Content Area)      |
|                   |                                      |
| 대시보드 (Dashboard) |                                      |
| ... |+------------------------------------------------------+

상단 네비게이션 바 (Top Navigation Bar)

...

<mat-menu>
  <button mat-menu-item>Profile</button>
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Logout</button>
</mat-menu>

사이드 네비게이션 (Side Navigation)

...

<mat-form-field appearance="outline">

모든 필드에 대해.

...

src/
├── app/
│   ├── core/
│   │   ├── layout/
│   │   ├── services/
│   │   └── guards/
│   │
│   ├── shared/
│   │   ├── components/
│   │   ├── models/
│   │   └── pipes/
│   │
│   ├── features/
│   │   ├── dashboard/
│   │   ├── employees/
│   │   └── settings/
│   │
│   └── app.routes.ts

레이아웃 컴포넌트 (Layout Components)

...

layout/
├── main-layout.component
├── top-navbar.component
├── side-nav.component
└── user-profile-menu.component

UI 생성 시 (When Generating UI)

...

그 다음 다음과 같이 요청합니다:

다음 기능을 갖춘 현대적인 Angular Material 애플리케이션 셸 (Application Shell)을 생성하세요:

- 상단 네비게이션 바 (Top navbar)
...

또는

표준 레이아웃을 사용하여 직원 관리 UI (Employee Management UI)를 생성하세요.

이렇게 하면 Copilot은 무작위적인 Angular 예시 대신, 프로젝트 전반에 걸쳐 일관된 엔터프라이즈 레이아웃을 생성할 것입니다. 이는 첫날부터 공통된 룩앤필 (Look and feel)을 강제하기 때문에 프론트엔드 팀에게 가장 가치 있는 지침 파일 중 하나입니다.

...

기능 (Feature):
직원 검색 API (Employee Search API)

변경됨 (Files Changed):

  • EmployeeController.cs
  • EmployeeService.cs
  • EmployeeRepository.cs

Copilot이 다음과 같이 동작하기를 원합니다:

...

내용 (Content):

Pull Request Review Agent (Pull Request 리뷰 에이전트)

당신은 Pull Request (PR) 리뷰를 수행하는 Principal .NET Architect (수석 .NET 아키텍트)입니다.

프로덕션 환경에 배포 가능한 엔터프라이즈 소프트웨어를 승인하는 것처럼 코드를 리뷰하세요.

다음 영역들을 평가하십시오.

Architecture (아키텍처)

확인 사항:

  • Clean Architecture (클린 아키텍처) 준수 여부
  • 계층 분리 (Layer separation)
  • 의존성 방향 (Dependency direction)
  • SOLID 원칙
  • 디자인 패턴 (Design patterns) 사용

식별 사항:

  • 아키텍처 위반 사항
  • 강한 결합 (Tight coupling)
  • 추상화 누락 (Missing abstractions)

Code Quality (코드 품질)

확인 사항:

  • 가독성 (Readability)
  • 유지보수성 (Maintainability)
  • 명명 규칙 (Naming conventions)
  • 메서드 크기 (Method size)
  • 클래스 책임 (Class responsibilities)
  • 중복 코드 (Duplicate code)

개선 사항을 제안하십시오.


Performance (성능)

리뷰 사항:

  • EF Core 쿼리
  • N+1 문제
  • 페이지네이션 (Pagination) 누락
  • 비효율적인 루프 (Inefficient loops)
  • 불필요한 할당 (Unnecessary allocations)
  • 비동기 (Async) 사용

위험 요소를 강조하십시오.


Security (보안)

리뷰 사항:

  • 입력 값 검증 (Input validation)
  • 인가 (Authorization)
  • 인증 (Authentication)
  • SQL Injection (SQL 인젝션) 위험
  • 민감한 데이터 노출 (Sensitive data exposure)
  • 하드코딩된 비밀값 (Hardcoded secrets)

권장 사항을 제공하십시오.


API Design (API 설계)

확인 사항:

  • REST 표준
  • 상태 코드 (Status codes)
  • DTO (Data Transfer Object) 사용
  • 에러 핸들링 (Error handling)
  • 검증 (Validation)

개선 사항을 식별하십시오.


Testing (테스트)

리뷰 사항:

  • 단위 테스트 커버리지 (Unit test coverage)
  • 엣지 케이스 (Edge cases)
  • 부정적 시나리오 (Negative scenarios)
  • 테스트 누락

추가 테스트를 권장하십시오.


Review Output Format (리뷰 출력 형식)

다음과 같이 제공하십시오:

Summary (요약)

상위 수준의 평가.

Critical Issues (심각한 문제)

병합(Merge) 전 반드시 수정해야 할 사항.

Recommended Improvements (권장 개선 사항)

수정 권장 사항.

Positive Findings (긍정적인 발견 사항)

확인된 좋은 관행 (Good practices).

Suggested Code Changes (제안된 코드 변경 사항)

적절한 경우 예시를 제공하십시오.

Merge Recommendation (병합 권장 사항)

Approve (승인)
Approve with Comments (의견과 함께 승인)
Request Changes (변경 요청)

엄격하되 건설적인 태도를 유지하십시오.


How Reviewers Use It (리뷰어 사용 방법)

Option 1: Review Entire PR (PR 전체 리뷰)

Copilot Chat에서:

Add Context (컨텍스트 추가)

pr-review.instructions.md

Ask (질문)

이 Pull Request의 모든 변경된 파일을 리뷰해 주세요.

다음 사항에 집중하세요:

- 아키텍처 (Architecture)
- 보안 (Security)
- 성능 (Performance)
- 테스트 (Testing)

병합 권장 사항(merge recommendation)을 제공하세요.


...

EmployeeService.cs

질문(Ask):

...


---

# 옵션 3: 선택한 코드 리뷰 (Review Selected Code)

코드를 하이라이트(Highlight) 합니다.

질문(Ask):

```text id="jlwmn8"
시니어 아키텍트(senior architect)로서 리뷰를 수행하세요.
```

Copilot은 선택된 영역만 리뷰합니다.

# 내가 가장 좋아하는 워크플로우 (My Favorite Workflow)

누군가 PR(Pull Request)을 생성했을 때:

### 1차 리뷰 (First Review)

질문(Ask):

```text id="2l5xw2"
모든 변경 사항을 리뷰하고 다음 사항을 식별하세요:

- 아키텍처(Architecture) 문제
- 보안(Security) 우려 사항
- 성능(Performance) 리스크
- 누락된 테스트(Missing tests)
```

### 2차 리뷰 (Second Review)

질문(Ask):

```text id="e16oej"
이 풀 리퀘스트(pull request)에 어떤 코멘트를 남기겠습니까?
```

이렇게 하면 GitHub에 직접 붙여넣을 수 있는 리뷰 코멘트가 생성됩니다.

...
```text id="7xjvbd"
당신이 리드 아키텍트(lead architect)라면 이 PR을 승인하겠습니까?

그 이유를 설명하세요.
```

이는 사람이 놓치는 부분을 잡아내는 경우가 많습니다.

...

security-review.instructions.md

질문(Ask):

보안 관점에서만 이 PR을 리뷰하세요.

집중 사항:

  • OWASP
  • JWT
  • 권한 부여 (Authorization)
  • 데이터 유출 (Data leakage)

performance-review.instructions.md

질문(Ask):

성능 문제에 대해 이 PR을 리뷰하세요.

집중 사항:

...

PR 전:
개발자가 리뷰 에이전트(review agent)를 실행합니다.

PR 후:
리뷰어가 리뷰 에이전트를 실행합니다.

병합(Merge) 전:
리드가 리뷰 에이전트를 실행합니다.

이는 팀 전체에 일관된 리뷰 표준을 만들어 줍니다.

VS Code에서의 실질적인 예시:

  1. PR 브랜치를 체크아웃(Checkout) 합니다.
  2. Copilot Chat을 엽니다.
  3. 컨텍스트 추가(Add Context) → pr-review.instructions.md를 선택합니다.
  4. Agent 모드를 선택합니다.
  5. 질문(Ask) 합니다:
main 브랜치와 비교하여 현재 브랜치에서 변경된 모든 파일을 리뷰하세요.

다음 내용을 생성하세요:

- 발견 사항 (Findings)
- 리스크 (Risks)
- 제안된 코멘트 (Suggested comments)
- 병합 권장 사항 (Merge recommendation)

이렇게 하면 Copilot을 단순한 코드 생성기가 아닌, 재사용 가능한 시니어 리뷰어로 변모시킬 수 있습니다.

git checkout feature/employee-search
git fetch origin

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0