Angular 현대화: Angular 19의 새로운 기능

Angular 19가 공식적으로 출시되었으며 개발자 경험, 성능 및 적응성을 개선하기 위한 다양한 기능이 포함되어 있습니다.

이 기사에서는 주요 내용과 Angular 19가 현대 웹 개발을 위한 중추적 단계가 된 이유를 설명하겠습니다.

1. 점진적 수화: SSR의 판도를 바꾸는 요소

Angular 19에 도입된 증분 수화는 서버측 렌더링(SSR)을 새로운 차원으로 끌어올렸습니다. 기존의 전체 수화 접근 방식과 달리 증분 수화를 사용하면 서버에서 렌더링된 구성 요소가 뷰포트에 들어가거나 상호 작용할 때만 수화할 수 있습니다.

이렇게 하면 로드 시간이 빨라지고 사용자 경험이 향상됩니다. 이 기능은 현재 개발자 미리보기에 있지만 초기 로드를 최적화하고 Lighthouse 점수를 향상시키는 데 큰 가능성을 보여주고 있습니다.

이를 달성하기 위해 Angular는 Chrome Aurora와 협력하여 수분 공급에 중점을 두고 실제 사용에 적용할 수 있는 보다 원활한 SSR 환경을 제공했습니다. 이제 개발자는 @defer와 같은 지시어를 사용하여 구성 요소에 수분을 공급해야 하는 시점을 정확하게 제어할 수 있으므로 프로세스 효율성이 높아집니다.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

2. 이벤트 재생: 원활한 사용자 상호작용 보장

서버 측 렌더링 앱의 일반적인 문제는 사용자 상호 작용과 해당 상호 작용을 처리하는 JavaScript 로드 사이의 지연입니다.

이제 Angular 19에서 기본적으로 활성화된

이벤트 재생은 초기 로드 중에 사용자 이벤트를 캡처하고 필요한 JavaScript를 사용할 수 있게 되면 이를 재생합니다. 이를 통해 앱이 아직 수분을 공급하는 중에도 원활한 사용자 경험을 보장합니다.

이벤트 발송은 Google 검색(Wiz)에서 사용하는 것과 동일한 라이브러리를 기반으로 하며 수십억 명의 사용자가 테스트했습니다.

이벤트 재생을 활성화하기 위해 Angular는 하이드레이션 제공자에서 다음 설정을 사용합니다.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

이렇게 하면 JavaScript가 완전히 로드되기 전에 발생하는 모든 사용자 상호 작용이 손실되지 않고 원활한 환경을 제공할 수 있습니다.

3. 경로 수준 렌더링 모드: 렌더링에 대한 세밀한 제어

Angular 19에는 경로 수준 렌더링 모드가 도입되었습니다. 이를 통해 개발자는 서버, 클라이언트 또는 빌드 프로세스 중 사전 렌더링에서 애플리케이션의 개별 경로를 렌더링하는 방법을 지정할 수 있습니다.

이를 통해 렌더링 전략을 세밀하게 제어할 수 있으므로 개발자는 각 경로의 특정 요구 사항에 따라 성능과 SEO를 최적화할 수 있습니다.

예: 빠른 초기 로드 시간을 위해 로그인 경로를 서버 측에서 렌더링할 수 있고, 대시보드 경로를 클라이언트 측에서 렌더링하여 상호 작용을 향상할 수 있습니다. 이러한 유연성은 애플리케이션의 각 부분을 의도된 사용 사례에 맞게 최적화하는 데 도움이 됩니다.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular는 사전 렌더링 중에 경로 매개변수를 쉽게 해결할 수 있는 방법을 제공하여 고도로 사용자 정의 가능한 사전 렌더링 페이지를 허용합니다.

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

이 새로운 인터페이스인 ServerRoute를 통해 개발자는 콘텐츠 전달 방식을 더 효과적으로 제어할 수 있어 사용자 경험과 SEO가 모두 향상됩니다.

4. 핫 모듈 교체(HMR)가 즉시 이루어졌습니다.

Angular 19는 인스턴트 HMR을 도입하여 전체 앱을 다시 로드하지 않고도 스타일과 템플릿을 업데이트할 수 있습니다. 이는 개발자가 변경 사항의 효과를 즉시 확인할 수 있어 개발 주기가 훨씬 더 원활하고 빨라진다는 것을 의미합니다. v19에서는 스타일에 대한 핫 모듈 교체가 기본적으로 활성화됩니다! 템플릿용 HMR을 사용해 보려면 다음을 사용하세요.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

이 기능을 비활성화하려면 개발 서버 옵션으로 "hmr": false를 지정하거나 다음을 사용하세요.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. 존리스 지원: 지속적인 진화

6개월 전 Angular는 실험적인 zoneless 지원을 도입했습니다. 그 이후로 Angular는 API를 반복하고 개선하여 서버측 렌더링에 대한 지원을 추가하고 테스트 경험을 개선해 왔습니다.

Angular는 Google Fonts 팀과 협력하여 영역 없는 애플리케이션을 만들고 개발자 경험을 평가했습니다. 결과는 기대치를 뛰어넘었지만, 이 API를 개발자 미리 보기로 전환하기 전에 아직 몇 가지 개선 작업이 더 남아 있습니다.

Angular 19는 영역 없는 작업이 기본값이 되어 변경 감지를 크게 단순화하고 애플리케이션을 더 간결하게 만드는 미래를 향해 계속해서 노력하고 있습니다.

영역 없는 기능을 실험하려면 다음 설정을 사용하세요.

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. 연결된 신호: 상황 인식이 가능한 반응 상태

가장 멋진 새로운 추가 기능 중 하나는 연결된 신호입니다. 이 기능을 사용하면 서로 연결된 신호는 데이터가 업데이트되더라도 관계를 유지합니다. 이는 여러 데이터 포인트가 동적으로 동기화를 유지해야 하는 시나리오에 특히 유용합니다. 예를 들어, 다른 반응 소스에서 파생된 드롭다운 또는 선택 항목의 상태를 유지하는 것이 이제 더 간단해지고 상용구가 덜 필요합니다.

NG_HMR_TEMPLATES=1 ng serve

linkedSignal API는 효과에 의존하지 않고 상태 저장 요소 간의 종속성을 표현하는 간단한 방법을 제공합니다. 새로운 API에는 단순화된 버전(여기 표시)과 개발자가 연결된 신호와 소스 신호 모두의 이전 값에 액세스할 수 있는 고급 버전의 두 가지 형태가 있습니다.

7. Angular 머티리얼 업그레이드

Angular Material은 Angular 19에서도 크게 업그레이드되었습니다. 이제 더욱 맞춤화 가능한 새로운 테마 API가 제공되어 개발자가 깊이 들어가지 않고도 쉽게 스타일을 재정의하고 Angular Material 구성 요소의 모양과 느낌을 조정할 수 있습니다. 중첩된 CSS. 각 구성 요소의 문서에는 이러한 변경 방법을 더 쉽게 참조할 수 있는 스타일링 탭도 포함되어 있습니다.

많은 기대를 모은 드래그 앤 드롭 구성 요소가 마침내 Angular Material에 기본적으로 추가되어 개발자는 타사 라이브러리에 의존하지 않고도 정교한 드래그 앤 드롭 상호 작용을 구현할 수 있습니다.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

개별 구성요소를 맞춤설정하려면:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

8. 신호용 마이그레이션 스크립트

내장된 마이그레이션 스크립트 덕분에 이제 앱을 새로운 신호 기반 반응성 모델로 마이그레이션하는 것이 더 간단해졌습니다. 이러한 스크립트는 이전 Angular 데코레이터 대신 신호를 사용하도록 기존 입력, 출력 및 쿼리를 전환하여 최소한의 노력으로 앱을 최신 상태로 유지하는 데 도움이 됩니다.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

9. 강화된 콘텐츠 보안 정책

보안은 이번 릴리스의 또 다른 주요 초점입니다. Angular 19는 기본적으로 XSS 공격 및 기타 취약점을 방지하기 위해 보안 CSP 구성을 애플리케이션에 자동으로 추가하는 자동 CSP(콘텐츠 보안 정책)에 대한 지원을 도입합니다. 이는 수동 구성을 줄이고 더 나은 보안 방식을 향한 중요한 단계입니다.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Angular 테스트의 미래

마지막으로, 테스트에 관한 주요 참고 사항입니다. Karma는 Jest 및 Web Test Runner와 같은 최신 도구로 인해 더 이상 사용되지 않습니다. 2025년 중반까지 Karma는 더 이상 지원되지 않으므로 개발자는 최신 Angular 생태계의 나머지 부분과 원활하게 통합되는 보다 안정적인 테스트 설정으로 마이그레이션할 수 있는 충분한 시간을 갖게 됩니다.

마무리

Angular 19는 단순한 업데이트가 아닙니다. 개발자와 사용자 경험 모두에 최적화된 미래 지향적인 버전입니다. 증분 하이드레이션, 이벤트 재생, 경로 수준 렌더링 모드, 인스턴트 HMR, 영역 없는 전환, 다양한 생산성 향상 등의 기능을 갖춘 이 버전은 Angular를 이상적인 현대적인 고성능 개발자 친화적 프레임워크에 더 가깝게 만듭니다. .

마이그레이션하거나 새 프로젝트를 시작하려는 경우 Angular 19는 최첨단 기능과 진화하는 모범 사례를 지원하는 견고한 기반을 제공합니다. 가장 마음에 드는 기능이 무엇인지 또는 프로젝트에 Angular 19를 채택하는 것에 대해 궁금한 점이 있으면 알려주세요!

위 내용은 Angular 현대화: Angular 19의 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!