недооцененные Angular функции, которые стоит использовать

카테고리

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

서브카테고리

웹 개발

대상자

Angular 개발자 (특히 애플리케이션 성능 최적화 및 코드베이스 정리에 관심 있는 중간~고급 개발자)

핵심 요약

• takeUntilDestroyed는 Observable 구독 정리를 자동화하여 메모리 누수 방지 (@angular/core/rxjs-interop 패키지 사용).
• inject()는 의존성 주입을 컴포넌트 외부에서도 가능하게 하며 테스트 간소화.
• NgOptimizedImage는 이미지 최적화 자동화 (srcset 생성, 레이지 로딩, 레이아웃 시프트 방지).

섹션별 세부 요약

1. `takeUntilDestroyed` 활용

• @angular/core/rxjs-interop 패키지에서 제공하는 기능
• 컴포넌트/서비스 파괴 시 Observable 자동 종료 (수동 ngOnDestroy 필요 없음)
• 예시: interval(1000).pipe(takeUntilDestroyed()).subscribe()
• 장점: 메모리 누수 방지, 모든 주입 컨텍스트에서 작동

2. `inject()` 의존성 주입

• Angular 14+에서 도입된 기능
• 컴포넌트 외부 (함수, 서비스)에서도 의존성 주입 가능
• 예시: const http = inject(HttpClient);
• 장점: 테스트 시 TestBed 생략 가능, 스탠드얼론 컴포넌트 복잡성 감소

3. `NgOptimizedImage` 이미지 최적화

• Angular 15+에서 안정화된 기능 (13.4.0, 14.3.0로 역포트됨)
• 자동 srcset 생성, 레이지 로딩, CDN 최적화 지원
• 사용 팁: priority="high" 속성으로 FCP 이미지 우선 로딩

4. `provideHttpClient()` HTTP 설정 간소화

• Angular 15+에서 도입된 기능
• HttpClientModule 복잡성 제거, 인터셉터 지원
• 예시: providers: [provideHttpClient()]
• 장점: 스탠드얼론 앱에서 HTTP 설정 간결화

5. `input/output` (Signal 기반)

• Angular 17+에서 도입된 기능
• @Input()/@Output() 대체, 타입 안전성 강화
• 예시: count = input(0); countChanged = output();

6. `required` 입력 강제

• Angular 17+에서 도입된 기능
• input.required()로 입력 누락 시 런타임 오류 방지

7. `model()` 두 방향 바인딩

• @Input()/@Output() 대체, 신호 기반 반응형 API 제공
• 예시: value = model(false);

8. `@defer` 지연 로딩 템플릿

• Angular 17+에서 도입된 제어 흐름 구문
• 초기 번들 크기 90% 이상 감소, 로딩/에러 상태 내장
• 트리거 조건: viewport, idle, interaction 등

결론

• takeUntilDestroyed와 NgOptimizedImage는 코드베이스 정리 및 성능 최적화에 필수적.
• inject()와 model()은 테스트 및 컴포넌트 간 통신 간소화.
• Angular 17+ 기능은 신호 기반 아키텍처와 호환되어 유지보수성 향상.