Angular 20의 주요 변경 사항

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 개발자 및 프레임워크 사용자

핵심 요약

TypeScript 5.8 및 Node.js 20이 필수적으로 요구됨.
Angular Style Guide가 업데이트되며, 파일명, 폴더 구조, 속성 가시성 등이 변경됨.
Signals API가 안정화되었으며, Zoneless Change Detection이 공식적으로 지원됨.
ngIf, ngFor, ngSwitch 등은 비공식적으로 제거되며, 내장 제어 흐름 구문으로 대체됨.
createComponent()가 더 강력해졌으며, Signal-based Forms은 아직 지원되지 않음.

섹션별 세부 요약

1. TypeScript 및 Node.js 버전 요구사항

TypeScript 5.8이 필수이며, 이전 버전은 더 이상 지원되지 않음.
Node.js 20이 최소 요구 사항이며, Node.js 18은 더 이상 지원되지 않음.

2. Angular Style Guide 업데이트

파일명 축소: 예: UserComponent → User (.ts 확장자만 사용)
파일 구조: 상위 app 폴더가 사라질 수 있음.
속성 가시성: protected는 템플릿 내에서만 사용, readonly는 Angular가 초기화한 속성에 사용.
class 및 style 바인딩: [class.something] 및 [style.something]이 ngClass 및 ngStyle보다 권장됨.

3. Signals API의 안정화

effect(), toSignal(), toObservable(), afterRenderEffect(), afterNextRender(), linkedSignal(), PendingTasks 등이 안정화됨.
afterRender() → afterEveryRender()로 이름 변경, 이전 이름은 자동 마이그레이션 없이 제거됨.
TestBed.flushEffects()는 비공식적으로 제거됨. TestBed.tick()이 권장됨.

4. Zoneless Change Detection

Zoneless Change Detection이 공식적으로 지원됨.
CLI 옵션 --zoneless가 추가되어 새 프로젝트에서 사용 가능.
provideExperimentalZonelessChangeDetection → provideZonelessChangeDetection로 이름 변경됨.

5. 구식 기능 제거 및 마이그레이션

ngIf, ngFor, ngSwitch: 내장 제어 흐름(@if, @for, @switch)으로 대체됨.
fixture.autoDetectChanges(boolean) → fixture.autoDetectChanges()로 변경.
TestBed.get() → TestBed.inject()로 대체됨.
@angular/platform-browser-dynamic → @angular/platform-browser로 대체됨.
@angular/platform-server/testing → E2E 테스트로 대체됨.
HammerJS 인TEGRATION: 비공식적으로 제거됨.

6. 템플릿 기능 개선

Exponentiation: {{ 2 ** 3 }} 가능.
Tagged Template Literals: {{ translate\app.title}} 가능.
void 연산자: void selectUser()로 이벤트 리스너에서 반환 값을 무시할 수 있음.
in 연산자: @if ('invoicing' in permissions) 가능.

7. 추가된 컴파일러 옵션 및 검증 기능

typeCheckHostBindings: 호스트 바인딩의 타입을 검증.
provideBrowserGlobalErrorListeners: 브라우저에서 전역 오류를 감지.
missingStructuralDirective, uninvokedTrackFunction, unparenthesizedNullishCoalescing 등 오류 검출 기능 추가됨.

8. `createComponent()` 기능 강화

directives, inputBinding(), twoWayBinding(), outputBinding() 등 옵션을 통해 더 많은 제어 가능.

9. Form API 개선

resetForm(undefined, { emitEvent: false }): 이벤트를 발생시키지 않음.
markAllAsDirty(): AbstractControl에 추가됨.

10. Router 기능 개선

Scroll Options: behavior: 'smooth' 지원.
Resolver Context: 부모 루트 데이터 사용 가능.
Async Redirects: redirectTo에 함수 사용 가능.
Custom Elements: RouterLink에 커스텀 요소 호스팅 가능.
HTTP Resource API: map → parse, loader → stream, reload → WritableResource로 이동.
Keepalive 지원: HttpClient에 추가됨.

결론

Angular 20은 TypeScript 5.8 및 Node.js 20을 필수로 요구하며, Signals API와 Zoneless Change Detection이 안정화되었습니다. 또한, 구식 기능이 제거되고 새로운 기능이 추가되므로, 프로젝트 업데이트와 마이그레이션이 필수적입니다. 개발자는 새 프로젝트에서 --zoneless 옵션을 사용하여 Zoneless 기능을 활성화할 수 있습니다.