Angular 20으로의 업그레이드 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *Angular 개발자 및 프론트엔드 팀**
- 난이도: 중급~고급 (기존 Angular 프로젝트 경험 필요)*
핵심 요약
- Angular 20에서
@angular-devkit/build-angular→@angular/build로 기본 빌드 패키지 변경 - 테스트 러너는
Karma→Vitest/Jest로 강제 전환 @for대신*ngFor사용,track및@empty키워드 필수- 컴포넌트별
imports명시로 모듈 구조 최적화 - 오페라 브라우저 공식 지원 중단
섹션별 세부 요약
1. 빌드 도구 변경
@angular/build는Karma플러그인을 제거Vitest/Jest로 테스트 환경 전환 필요 (성능 향상)npm install @angular-devkit/build-angular --save-dev는 예비 호환성 제공
2. 업그레이드 전 조건
- Node.js v20.11.1 이상
- TypeScript v5.8 이상
- Git 커밋으로 현재 코드베이스 백업
ng update @angular/cli @angular/core명령어 실행
3. 템플릿 문법 변경
*ngFor→@fortrack키워드 사용 필수 (@for (item of items; track item.id))@empty디렉티브로@if별도 사용 제거
4. CLI 기반 자동화
ng generate @angular/core:control-flow명령어로 템플릿 리팩토링standalone,inject,signal등 최신 패턴 적용
5. 컴포넌트 아키텍처
imports배열로 의존성 명시 (트리 쉬킹 최적화)- 컴포넌트/직접 파일명 일치 (예:
user-profile.ts) utils.ts같은 일반적 이름 피함
6. 신호 기반 상태 관리
mySignal.set(newValue)로 UI 직접 업데이트- 성능 향상 및 예측 가능한 상태 관리
7. 명명 규칙 변경
-사용 (예:user-profile.ts)- 파일명과 클래스명 일치
auth-store.ts→ 상태 관리 파일,highlight.directive.ts→ 디렉티브 파일
8. 브라우저 지원 변경
- 오페라 공식 지원 중단
browserslist에서opera제거 필요
결론
- Angular 20으로의 전환은 필수적 (Karma 호환성은 임시 해결책)
@for및signal문법은 CLI 명령어로 대규모 리팩토링 가능- 명명 규칙 및 파일 구조 변경으로 유지보수성 향상
- 테스트 환경은 Vitest 또는 Jest로 이전하여 성능 향상
- 오페라 호환성은 명시적으로 제거해야 함