피드로 돌아가기
Dev.toFrontend
원문 읽기
CLAUDE.md 기반 Angular 컨벤션 강제로 AI 생성 코드의 일관성 확보
CLAUDE.md for Angular: 13 Rules That Make AI Write Idiomatic, Production-Ready Components
AI 요약
Context
Angular의 높은 Opinionated 특성과 버전별 아키텍처 변화로 인해 AI가 서로 다른 컨벤션을 혼용하는 문제 발생. Standalone Components와 NgModules, RxJS와 Signals 등 상충하는 패턴이 공존하며 코드 일관성 저해 및 런타임 버그 유발.
Technical Solution
- Standalone Components 기반의 단일 아키텍처 채택을 통한 NgModule 의존성 제거 및 컴포넌트 단위 Import 구조 설계
- RxJS의 nested subscribes 및 수동 unsubscribe 금지로 메모리 누수 방지 및 takeUntilDestroyed 중심의 선언적 스트림 관리
- ChangeDetectionStrategy.OnPush 전면 적용 및 Async Pipe 활용을 통한 불필요한 Change Detection 사이클 최소화
- HTTP 통신 로직의 Service 계층 완전 분리를 통한 컴포넌트의 단일 책임 원칙(SRP) 준수
- Functional Guards 및 loadComponent() 기반의 Lazy Loading 강제로 초기 번들 크기 최적화 및 라우팅 효율성 제고
- Strongly Typed Reactive Forms 도입을 통한 템플릿 기반 폼의 런타임 타입 불안정성 해결
실천 포인트
- AI 생성 코드 내에 nested subscribe 존재 여부 확인 - 모든 컴포넌트에 OnPush 전략이 적용되었는지 검토 - HTTP 요청이 컴포넌트 내부가 아닌 Injectable Service에서 수행되는지 체크 - 라우트 설정 시 eager loading 대신 loadComponent/loadChildren 사용 여부 확인 - 폼 구현 시 ngModel 대신 Typed Reactive Forms 사용 여부 검증