마이그레이션

마이그레이션

기존 Angular 프로젝트를 점진적으로 마이그레이션하여 최신 기능을 도입하는 방법을 알아보세요.

독립형

독립형 컴포넌트는 Angular 애플리케이션을 더 간단하게 만드는 방법을 제공합니다. NgModule을 통해 의존성을 받는 대신 컴포넌트에서 직접 의존성을 지정합니다.

지금 마이그레이션하기

흐름 제어 문법

내장 흐름 제어 문법은 JavaScript와 비슷한 더 편리한 문법과 개선된 타입 검사를 제공합니다. *ngFor, *ngIf, *ngSwitch 같은 기능을 사용하기 위해 CommonModule을 임포트할 필요가 없습니다.

지금 마이그레이션하기

inject() 함수

Angular의 inject 함수는 생성자 기반 주입보다 더 정확한 타입과 표준 데코레이터와의 더 나은 호환성을 제공합니다.

지금 마이그레이션하기

지연 로딩 라우팅 규칙

즉시 로딩되는 컴포넌트의 라우팅 규칙을 지연 로딩 방식으로 변환합니다. 빌드 과정에서 프로덕션 번들을 더 작은 청크로 나누어 초기 페이지 로딩 시 불러오는 JavaScript의 양을 줄일 수 있습니다.

지금 마이그레이션하기

새로운 input() API

기존 @Input 필드를 이제 프로덕션 환경에서 안정적으로 사용할 수 있는 새로운 시그널 입력 API로 변환합니다.

지금 마이그레이션하기

새로운 output() 함수

기존 @Output 사용자 정의 이벤트를 이제 프로덕션 환경에서 안정적으로 사용할 수 있는 새로운 output 함수로 변환합니다.

지금 마이그레이션하기

시그널 기반 쿼리

기존 데코레이터 쿼리 필드를 개선된 시그널 쿼리 API로 변환합니다. 이 API는 이제 프로덕션 환경에서 안정적으로 사용할 수 있습니다.

지금 마이그레이션하기

사용하지 않는 임포트 정리

프로젝트에서 사용하지 않는 임포트를 정리합니다.

지금 실행하기

자체 닫기 태그

가능한 경우 자체 닫기 태그를 사용하도록 컴포넌트 템플릿을 변환합니다.

지금 마이그레이션하기

NgClass를 클래스 바인딩으로 변환

가능한 경우 NgClass 디렉티브 대신 클래스 바인딩을 사용하도록 컴포넌트 템플릿을 변환합니다.

지금 마이그레이션하기

NgStyle을 스타일 바인딩으로 변환

가능한 경우 NgStyle 디렉티브 대신 스타일 바인딩을 사용하도록 컴포넌트 템플릿을 변환합니다.

지금 마이그레이션하기

RouterTestingModule 마이그레이션

TestBed 설정에서 RouterTestingModule 사용을 RouterModule로 변환하고 필요한 경우 provideLocationMocks()를 추가합니다.

지금 마이그레이션하기

CommonModule을 독립형 임포트로 변환

가능한 경우 CommonModule 임포트를 템플릿에서 사용하는 개별 디렉티브와 파이프의 임포트로 대체합니다.

지금 마이그레이션하기

Injectable을 Service로 변환

변환 가능한 @Injectable 클래스를 @Service 데코레이터로 변환합니다.

지금 마이그레이션하기