Angular 20으로의 업데이트 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Angular 프레임워크를 사용하는 개발자, 특히 기존 프로젝트 업데이트를 고려하는 중간 이상의 경험을 가진 개발자
핵심 요약
- 테스트 러너 변경:
@angular/build가@angular-devkit/build-angular를 대체하며, Karma 대신 Vitest/Jest가 권장됨. - 새로운 문법:
@for로*ngFor대체,track키워드 필수,@empty블록 추가. - 의존성 업데이트: Node.js v20.11.1 이상, TypeScript v5.8 이상 필수.
섹션별 세부 요약
1. 테스트 러너 변경
- Karma의 성능 한계로 인해 Vitest 또는 Jest로의 전환 필요.
@angular/build패키지 사용 시 Karma 플러그인 제외됨.- 기존 프로젝트는
@angular-devkit/build-angular를 임시로 사용해야 함.
2. 새 문법: `@for`
*ngFor대신@for문법 사용,track키워드가 필수이며 성능 최적화에 기여.@empty블록을 통해 빈 리스트 처리 시 별도@if조건 제거.- CLI 명령어
ng generate @angular/core:control-flow로 자동 리팩토링 가능.
3. 의존성 및 환경 요구사항
- Node.js v20.11.1 이상, TypeScript v5.8 이상 필수.
ng update @angular/cli @angular/core명령어로 업데이트 시작.- Angular Material 사용 시
@angular/material을 명시적으로 포함해야 함.
4. 새로운 파일명 규칙
- 형식 기반 명명에서 의도 기반 명명으로 변경.
- 예:
user-profile.component.ts→user-profile.ts,auth.service.ts→auth-store.ts. - 파일명과 클래스명 일치,
.spec.ts테스트 파일 유지. - 일반적인
utils.ts와 같은 파일명은 피해야 함.
5. 기타 변경 사항
- Opera 브라우저 지원 중단:
.browserslistrc파일에서 Opera 제거 필요. - 컴포넌트 자율성 강화:
imports배열을 통해 의존성 명시, Tree-shaking 개선. - Signals 기반 UI 업데이트:
mySignal.set()호출 시 DOM 업데이트 제어 가능.
결론
Angular 20으로의 업데이트는 테스트 러너, 문법, 의존성 변경에 주의가 필요하며, Vitest/Jest로의 이전과 의도 기반 파일명 규칙을 준수하는 것이 실무 적용에 핵심입니다. CLI 명령어를 활용한 자동 리팩토링과 코드 리뷰를 통해 체계적으로 이전을 진행해야 합니다.