Angular 20 마이그레이션: 빌드 도구, 테스트 러너, 신규 기능 및 모범 사례 완벽 가이드

핵심 기술: 본 문서는 Angular 20으로의 업데이트를 위한 실질적인 가이드로, 변경된 빌드 도구(@angular/build), Karma에서 Vitest/Jest로의 테스트 러너 전환, 새로운 제어 흐름 구문(@for, @empty), Signals 기반의 반응성 업데이트 및 최신 명명 규칙 등 핵심적인 개선 사항과 마이그레이션 전략을 다룹니다.

기술적 세부사항:
* 빌드 도구 변경: @angular-devkit/build-angular에서 @angular/build로 기본 빌드 패키지가 변경되어 Karma 플러그인이 제거되었습니다. 이는 테스트 실행 방식에 영향을 미칩니다.
* 테스트 러너 전환: Karma의 성능 병목 현상으로 인해 Vitest와 Jest와 같은 더 빠르고 현대적인 테스트 러너로의 전환이 권장됩니다. Angular의 실험적인 테스트 러너는 Vitest를 지원합니다.
* Karma 호환성 유지: npm install @angular-devkit/build-angular --save-dev 명령어로 이전 컴파일러와 Karma 지원을 일시적으로 유지할 수 있으나, 장기적으로는 새로운 러너로의 마이그레이션이 필수적입니다.
* 사전 요구 사항: Node.js v20.11.1 이상, TypeScript v5.8 이상, Git 커밋을 통한 프로젝트 백업이 업데이트 전에 필요합니다.
* 업데이트 명령어: ng update @angular/cli @angular/core (Angular Material 포함 시 @angular/material 추가)
* 신규 제어 흐름: *ngFor가 @for로 대체되며, track 속성이 필수로 지정되고 @empty 블록을 통해 조건부 렌더링을 간소화할 수 있습니다.
html @for (item of items; track item.id) { {{ item.name }} } @empty { No items found. }
* 템플릿 리팩토링: ng generate @angular/core:control-flow CLI 명령어로 기존 템플릿을 새 제어 흐름 구문으로 자동 변환할 수 있습니다.
* 모던 Angular 기능 마이그레이션: standalone, inject, route-lazy-loading, signal-input-migration, signal-queries-migration, output-migration 등 다양한 CLI 명령어를 통해 최신 패턴을 도입할 수 있습니다.
* 컴포넌트 독립성: imports 배열을 사용하여 컴포넌트별 의존성을 명시함으로써 아키텍처 명확성, 트리 쉐이킹 효율성, 번들 크기 감소를 달성합니다.
* Signals 기반 업데이트: Zone-less 환경에서 Signals를 사용하여 DOM 업데이트를 외부에 명시적으로 알리는 mySignal.set(newValue) 방식은 수술처럼 정확하고 예측 가능하며 고성능의 업데이트를 지원합니다.
* 새로운 명명 규칙: .component.ts, .service.ts와 같은 전통적인 접미사를 제거하고, 클래스 이름과 파일 이름을 일치시키며 대시(-)를 사용합니다 (예: user-profile.ts, auth-store.ts, highlight.ts). .spec.ts는 유지하며, 관련 파일을 함께 배치(co-locate)하는 것이 권장됩니다.
* Opera 지원 중단: Angular 20부터 Opera 브라우저에 대한 공식 지원이 중단되었습니다.

개발 임팩트: 테스트 실행 속도 향상, 코드의 가독성 및 유지보수성 증대, 더 작고 효율적인 번들 생성, 최신 반응성 패턴 적용을 통한 고성능 UI 구현, 명확한 코드 구조화 및 온보딩 용이성 증진 등의 이점을 얻을 수 있습니다.

커뮤니티 반응: (원문에 직접적인 커뮤니티 반응 언급은 없으나, 테스트 러너 변경 및 새로운 제어 흐름 도입은 개발자 커뮤니티에서 활발히 논의될 주제입니다.)