Angular v17 릴리즈 노트

 안녕하세요. angular.kr를 운영하고 있는 한장현입니다.

 

 그동안 Angular 새 버전이 나올 때마다 angular.kr은 업데이트 하고 있었습니다만, 이 블로그는 운영을 잠시 멈췄습니다.

 별다른 이유는 없었고 이래저래 많이 바빴네요 ㅎㅎㅎ

 

 얼마전부터 Angular 새 버전이 나오는 것을 기다리고 있었는데, 이번 버전은 RC, next 버전이 오래 걸리는 것 같더라고요.

 그러다 17 버전이 나왔는데 아이쿠, 많은 것이 변했습니다 ㅎㅎㅎㅎㅎ

 

 본격적인 프레임워크 시대를 열었던 프레임워크가 다음 페이즈로 넘어가는 느낌도 들었습니다.

 로고가 변경된 것 외에도 기능에 상당히 많은 변경사항이 있어서 릴리즈 안내를 흥미롭게 읽었습니다.

 

 같이 살펴 보시죠 ㅎ

 

 원문은 Angular blog 사이트의 Introducing Angular v17 입니다.

 

---

 

 지난 달은 Angular의 붉은 방패가 등장한지 13주년 되는 달이었습니다. AngularJS는 풍부한 웹 경험을 제공하는 JavaScript 프레임워크의 출발점이었습니다. 오늘날 저희는 새로운 모습과 미래 지향적인 기능을 갖춘 17 버전을 소개하면서, 새로운 개발자 경험과 성능의 새로운 표준을 제시합니다.

 

 

17 버전에는 이런 기능들이 추가되었습니다:

• 지연 구성되는 뷰를 활용해서 성능과 개발자 경험을 한 단계 끌어 올립니다.
• 기본 컨트롤 루프를 개선해서 최대 90% 더 빠른 런타임 속도를 제공합니다.
• 빌드 속도가 하이브리드 렌더링을 통해 최대 87%, 클라이언트 사이드 렌더링을 통해 최대 67% 빨라졌습니다.
• 미래 지향적인 기능을 반영한 새로운 디자인
• 완전히 새로운 방식으로 제공되는 대화형 학습 코스
• ...그리고 수많은 기능들이 추가되고 개선되었습니다.

미래 지향적인 정체성

 Angular의 르네상스는 지난 몇 개 버전에서 본격적으로 진행되었습니다. 신호 기반의 반응성, 하이드레이션, 독립 컴포넌트, 디렉티브 연결 등 수십가지 기능을 개선하면서 모멘텀을 계속 얻고 있었습니다. 하지만 Angular가 이렇게 발전하는 동안에도 브랜드는 그대로 유지되어 왔습니다. AngularJS 초기부터 거의 변하지 않았습니다.

 

 이제 오늘, 수많은 사람들이 사랑하고 치열하게 사용했던 이 프레임워크는 미래 지향적인 개발자 경험과 성능을 반영하여 새롭게 태어났습니다!

 

미래 지향적인 문서

 Angular를 새롭게 브랜딩하면서 Angular 문서를 위한 새로운 홈, angular.dev 를 개발했습니다. 이 웹사이트는 이전과 완전히 다른 구조이며, 새로운 가이드 문서를 제공하고, 보기 편하며, 브라우저에서 직접 Angular CLI를 실행하는 것처럼 학습자의 속도에 온전히 맞추는 대화형 학습 코스를 제공합니다.이 새로운 대화형 학습 경험은 WebContainers를 활용한 것이며, 이제는 Angular CLI의 강력한 기능을 최신 웹 브라우저에서 바로 실행해 볼 수 있습니다!

 

WebContainers를 활용해서 대화형으로 제공되는 Angular 튜토리얼

 

 오늘 저희는 angular.dev의 베타 프리뷰를 오픈했습니다. Angular v18에서는 이 홈페이지를 Angular의 기본 웹사이트로 만들 예정입니다. angular.dev에 대해 자세하게 알아보려면 "angular.dev를 소개합니다" 블로그 글을 참고하세요.

 

 이제는 더 기다릴 것 없이 v17에서 제공하는 기능을 자세하게 파봅시다!

기본 제어 흐름

 개발자 경험을 개선하기 위해 간단하고 직관적이지만 강력한 기능을 제공하는 블록 템플릿 문법을 도입했습니다. 사용하기엔 간단하지만, 내부적으로는 Angular 컴파일러가 제어 흐름을 파악하고, 필요하면 지연 로딩도 하면서 효율적인 JavaScript 코드로 변환합니다.

 

 이 새로운 블록 문법은 기본 제어 흐름 개선을 위해, 즉 최적화하기 위해 사용합니다. 저희가 조사해보니, 많은 개발자들이 *ngIf, *ngSwitch, *ngFor를 사용하면서 많은 어려움을 겪고 있다는 것을 확인했습니다. 개인적으로는 2016년부터 Angular를 사용하고 있고, Angular 팀으로는 5년동안 근무했지만, 저도 아직 *ngFor, trackBy 문법을 쓸때마다 문서를 찾아봅니다. 저희는 커뮤니티, 파트너사, UX 리서치 스터디를 통해 다양한 피드백을 수집했고, 이제 새로운 기본 제어 흐름을 Angular에 도입했습니다!

 

이 기본 제어 흐름을 활용하면:

• 이전에 사용하던 템플릿 문법보다 좀 더 JavaScript에 가까운 문법을 사용하기 때문에 문서를 찾지 않아도 될 정도로 직관적입니다.
• 타입 구체화에 적합하기 때문에 타입 검사가 더 강력해집니다.
• 빌드 시점에만 필요하고 실행 시점에는 필요없는 코드를 제거해서 최대 30kB까지 빌드 결과물 크기를 줄일 수 있으며, 이 과정을 통해 Core Web Vital 점수를 향상시킬 수 있습니다.
• 별도로 로드하지 않아도 템플릿에서 바로 사용할 수 있습니다.
• 잠시 후에 다루겠지만, 성능이 눈에 띄게 개선됩니다.

조건문

 *ngIf를 예를 들어 비교해 봅시다:

 

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

 

 이제 기본 제어 문법으로 if를 구현하면 이렇게 구현할 수 있습니다:

 

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

 

 @else를 사용하면 원래 사용하던 *ngIf 문법을 아주 직관적으로 대체할 수 있습니다. 그리고 새로운 제어 흐름에서는 이전까지 불가능하던 @else if도 사용할 수 있게 되었습니다.

 

 *ngSwitch는 더 눈에 띄게 개선됩니다.

 

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

 

 이 코드를 기본 제어 흐름으로 변경하면 이렇습니다:

 

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

 

 새로운 제어 흐름을 사용하면 @switch의 개별 구문에서 타입 구체화를 훨씬 효율적으로 적용할 수 있습니다. 이 점은 *ngSwitch에서는 불가능했던 것입니다.

기본 for 루프

 개인적으로 이번 업데이트에서 가장 마음에 드는 기능은 기본 for 루프입니다. 이 기능은 개발자 경험을 개선하는 것 외에도 Angular의 렌더링 속도를 완전히 새로운 단계로 끌어 올렸습니다!

 

 기본 문법은 이렇습니다:

 

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

 

 보통은 *ngFor를 사용할 때 *trackBy를 사용하지 않으면 성능 문제가 발생하는 것을 종종 확인했습니다. @for는 빠른 비교 성능을 보장하기 위해 trackBy에 해당하는 구문을 필수로 지정해야 합니다. 그리고 이제는 컴포넌트 클래스의 메서드를 템플릿에 연결하는 것이 아니라, 템플릿에서 평가식을 직접 사용하기 때문에 사용하기 편해졌습니다. 항목이 비어 있을 수 있는 컬렉션을 다룬다면 @empty 블록을 사용해볼 수도 있습니다.

 

 @for 구문은 *ngFor와 달리 새로운 비교 알고리즘을 사용하며, 최적화에도 신경썼기 때문에 이전보다 최대 90% 빠른 런타임 성능을 자랑합니다! 벤치마크 결과를 확인해 보세요.

 

*ngFor 구현방식에 따른 성능 비교 (https://krausest.github.io/js-framework-benchmark/current.html)

직접 사용해 보세요!

 개선된 기본 제어 흐름은 v17에서 개발자 프리뷰로 직접 사용해 볼 수 있습니다!

 

 이 기본 제어 흐름은 설계 단계때부터 완전히 자동화되는 마이그레이션을 지원하도록 개발되었습니다. 기존 프로젝트에 이 명령을 실행하면 마이그레이션이 동작합니다:

 

ng generate @angular/core:control-flow

앞으로는?

 기본 제어 흐름은 이번 버전에 나온 언어 지원 서비스에도 적용되었기 때문에, JetBrain 제품군과 긴밀하게 협력해서 이전보다 나은 지원을 제공합니다. 그리고 Prettier를 만든 Sosuke Suzuki와 협력해서 Angular 템플릿 형식을 좀 더 다듬었습니다.

 

 새로 도입된 기본 제어 흐름은 컨텐츠를 프로젝션하는 방식이 기존에 사용하던 *ngIf, *ngFor, *ngSwitch와는 조금 다른데, 이부분을 맞추는 작업은 앞으로 몇달에 걸쳐 진행될 예정입니다. 이 점을 고려하더라도 이번에 도입된 기본 제어 흐름에 대해서는 안정성 측면에서 자랑할만한 수준입니다. 직접 실행해 보세요! 다만 작업이 진행되는 동안 개발자 경험이 더 나아지는 방법이 있는지, 하위 호환성이 잘 유지되고 있는지 좀 더 확인하기 위해 아직은 개발자 프리뷰로 진행하고 있습니다.

뷰 지연 로딩(Deferrable views)

 이번에는 지연 로딩의 미래에 대해 이야기해 봅시다. 위에서 설명했던 블록 문법을 활용해서 앱을 더 빠르게 개선할 수 있는 강력한 메커니즘을 구성했습니다. 블로그 시작 부분에서 저는, 아름다울 정도로 훌륭하게 설계된 뷰 지연 로딩을 활용하면 명시적이면서 강력한 지연 로딩을 구현할 수 있기 때문에 성능과 개발자 경험을 다른 수준으로 끌어올린다고 언급했습니다.

 

왼쪽 가지에 뷰 지연 로딩이 적용되었습니다.

 

 블로그를 구현하는데 사용자들의 댓글은 지연 로딩한다고 합시다. 이전까지는 댓글을 불러오다가 발생할 수 있는 에러를 처리하거나, 플레이스 홀더를 표시하는 등 이런저런 복잡성을 관리하며 ViewContainerRef를 사용해야 했습니다. 다양하게 발생할 수 있는 에러를 처리하다보면 아름답지 못한 코드를 작성하게 되고, 결국 테스트하거나 디버깅하기 어려운 코드가 될 수 있습니다.

 

 이번에 새로 도입된 뷰 지연 로딩를 활용하면 댓글을 지연 로딩하면서 모든 종속성을 한 번에 처리하는 기능을 코드 단 한 줄로 구현할 수 있습니다:

 

@defer (on viewport) {
  <comment-list />
} @placeholder {
  <!-- 댓글이 로딩되는 동안 표시할 플레이스 홀더 -->
  <img src="comments-placeholder.png">
}

 

 가장 놀라운 점은 이 변환 과정이 전부 컴파일 시점에 이루어진다는 것입니다. @defer 블록을 사용하면 이 블록 안에 사용되는 컴포넌트, 디렉티브, 파이프의 복잡성을 Angular가 알아서 파악하고 동적으로 로드하며, 상태가 변하는 등 모든 복잡성을 추상화합니다.

 

 이전까지는 어떤 DOM 엘리먼트가 뷰 포트에 표시되기 시작하면서 컴포넌트를 지연로딩하려면 IntersectionObserver API를 활용해도 상당히 복잡한 로직이 필요했습니다. 하지만 이제는 IntersectionObservers를 활용해서 트리거를 추가하는 방식으로 지연 로딩을 간단하게 구현할 수 있습니다!

 

코드 - 댓글이 로드될 위치를 지정합니다.

 

 위 예제를 예로 들면, Angular는 먼저 플레이스 홀더 블록을 렌더링합니다. 그리고 이 블록이 뷰 포트 안에 표시되기 시작하면 <comment-list/> 컴포넌트를 로드하기 시작합니다. 마지막으로 컴포넌트가 로딩되고 나면, Angular는 플레이스 홀더를 제거하고 컴포넌트를 렌더링합니다.

 

 로딩 상태와 에러 상태를 추가한다면 이렇게도 구현할 수 있습니다:

 

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

 

 이게 전부입니다! 다양한 상황 때문에 발생할 수 있는 복잡성은 이제 모두 Angular가 관리합니다!

 

 뷰 지연 로딩을 조작할 수 있는 트리거는 다양하게 제공됩니다:

• on idle - 브라우저 부하가 심하지 않을 때 블록을 지연로딩합니다.
• on immediate - 브라우저를 블로킹하지 않는 선에서 자동으로 지연 로딩합니다.
• on timer(<time>) - 일정 시간동안 로딩을 늦춥니다.
• on viewport, on viewport(<엘리먼트>) - 이 방식을 사용하면서 앵커 엘리먼트를 지정할 수도 있습니다. 이 경우에는 앵커 엘리먼트가 화면에 표시되는 시점에 컴포넌트를 지연 로딩하고 렌더링합니다.
• on interaction, on interaction(<엘리먼트>) - 사용자가 특정 엘리먼트에 접근할 때 지연 로딩을 시작합니다.
• on hover, on hover(<엘리먼트>) - 사용자가 특정 엘리먼트에 커서를 올리면 지연 로딩을 시작합니다.
• when<표현식> - Promise를 반환하는 특정 표현식으로 커스텀 조건을 지정합니다.

 뷰를 지연 로딩하면 이 뷰를 화면에 렌더링하기 전에 필요한 리소스를 미리 다운받아 둘 수도 있습니다. 바로 위에서 설명한 트리거에 prefetch 구문만 간단하게 추가하면 됩니다.

 

@defer (on viewport; prefetch on idle) {
  <comment-list />
}

 

 뷰 지연 로딩은 v17 버전에 개발자 프리뷰로 추가되었으니 지금 당장 사용해 볼 수 있습니다! 더 자세하게 알아보려면 이 가이드 문서를 참고하세요.

앞으로는?

 뷰 지연 로딩은 이미 활용해 볼 수 있기 때문에 한 번 사용해보는 것을 강력하게 권장합니다! 당장은 API 형태를 확정하기 전에 더 많은 피드백을 받아 보기 위해 이 기능을 개발자 프리뷰로 지정했습니다. 이후에는 다른 코드와 마찬가지로 시맨틱 버저닝을 따르게 될 것입니다.

 

 현재는 서버 사이드 렌더링에서 이 기능을 활용할 수 없기 때문에 플레이스 홀더가 그대로 표시될 것입니다. 그래서 이 부분을 개선하는 작업이 조금 필요합니다.

 

 지연 로딩되는 뷰를 서버에서도 렌더링할 수 있게 개선하고, 클라이언트에서는 부분적으로 하이드레이션하는 방법을 연구하고 있습니다. 이 시나리오대로라면 클라이언트는 트리거가 발생하지 않는 이상 지연 로딩 대상이 되는 뷰는 다운로드하지 않게 될 것입니다. 그리고 트리거가 발생하고 나면 해당 부분과 관련된 코드를 다운로드 받고 하이드레이션하게 됩니다.

 

 신호를 주고 받으며 상호 동작하는 방식도 좀 더 재미있어질 예정입니다. 좀 더 지켜봐 주세요!

하이브리드 렌더링 개선

 이번 버전부터 서버 사이드 렌더링(server-side rendering, SSR)과 정적 사이트 생성(static-site generation, SSG, 사전 렌더링)이 ng new에 통합되어 개발자들이 접근하기 편해졌습니다:

 

Angular 앱을 생성할 때 나오는 SSR, SSG 프롬프트

 

 그리고 새 프로젝트를 생성할 때 이런 명령을 실행하면 SSR을 지원하는 상태로 앱을 생성할 수 있습니다:

 

ng new my-app --ssr

 

하이드레이션이 개발자 프리뷰를 끝내고 정식으로 도입됨

 

 지난 6개월동안 수천개의 애플리케이션에 하이드레이션이 도입되는 것을 지켜봤습니다. 그리고 이제 하이드레이션은 개발자 프리뷰를 끝내고 서버 사이드 렌더링을 활용하는 앱에 기본으로 활성화된다는 소식을 전할 수 있어 기쁩니다!

신규 @angular/ssr 패키지

 이번 버전부터는 Angular Universal 코드 저장소를 Angular CLI 코드 저장소로 옮기면서 서버 사이드 렌더링을 Angular CLI의 일부로 자연스럽게 통합했습니다!

 

 그래서 이제는 기존에 생성했던 애플리케이션에 하이브리드 렌더링을 적용하는 것도 명령 실행 한 번이면 됩니다:

 

ng add @angular/ssr

 

 이 명령을 실행하면 서버 쪽의 진입점을 생성하며, SSR, SSG 빌드 설정을 추가하고, 하이드레이션을 기본으로 활성화시킵니다. @angular/ssr 패키지는 이전에 있던 @nguniversal/express-engine과 기능면에서 동일하며, 이전 패키지는 현재 유지보수 단계로 전환되었습니다. 기존에 있던 애플리케이션이 express-engine 패키지를 사용하고 있었다면, 이 패키지는 Angular CLI 명령이 실행되면서 @angular/ssr 패키지로 대체됩니다.

 

 Virgin Media O2은 자사 플랫폼을 최신 Angular 하이브리드 렌더링 솔루션으로 전환하고 난 후 매출이 112% 증가했다고 합니다. 그리고 Angular SSR이 제공하는 DOM 하이드레이션과 NgOptimizedImage를 사용한 경우에는 누적 레이아웃 전환이 평균 99.4% 감소했다는 리서치도 있습니다.

앱이 SSR을 지원할 수 있도록 배포하기

 더 나은 개발자 경험을 위해, 저희는 클라우드 서비스 제공자들과 긴밀하게 협업하며 배포하기 편한 형태를 연구했습니다.

 

그 결과 Firebase는 아무 설정 없이도 Angular 애플리케이션을 자동으로 분석해서 배포할 수 있습니다. 이 기능은 framework-aware CLI 프리뷰로 제공되고 있습니다.

 

firebase experiments:enable webframeworks
firebase init hosting
firebase deploy

 

 framework-aware CLI는 Angular 앱을 분석해서 SSR, i18n, 이미지 최적화 등을 자동으로 적용하기 때문에 비용이 중요한 서버리스 인프라에서 더 효율적입니다.

 

 복잡한 Angular 단일 코드 저장소가 있거나 네이티브 툴을 선호하는 개발자라면, AngularFire를 설치하고 ng deploy 명령을 실행하면 Firebase에 앱을 배포할 수도 있습니다:

 

ng add @angular/fire
ng deploy

 

 Angular 팀은 Angular 서버 사이드 렌더링에 ECMAScript 모듈 지원을 추가했고, HttpClient를 백엔드에서 활용할 수 있는 기능을 추가했으며, CloudFlare와 협력해서 배포 프로세스를 간소화했습니다.

새로운 라이프싸이클 후킹 함수

 Angular 팀은 Angular의 SSR, SSG 성능을 끌어올리기 위한 장기 계획을 구상하며 DOM 에뮬레이션이나 DOM을 직접 조작하는 방식을 벗어나려고 합니다. 동시에 애플리케이션의 라이프싸이클 전반에 걸쳐 서드파티 라이브러리도 엘리먼트와 자유롭게 상호작용하는 자유도를 부여하고 싶습니다.

 

 그러기 위해 저희는 새 라이프싸이클 후킹 함수를 몇 개 추가했습니다:

• afterRender - 애플리케이션이 렌더링을 끝낸 직후에 실행될 콜백 함수를 등록합니다.
• afterNextRender - 애플리케이션의 첫번째 렌더링 이후에 동작하는 렌더링이 끝날때마다 실행될 콜백 함수를 등록합니다.

 이 후킹 함수들은 브라우저가 실행할 수 있기 때문에 커스텀 컴포넌트 안쪽에 원하는 DOM 조작 로직을 안전하게 구현할 수 있습니다. afterNextRender를 활용해서 차트 라이브러리를 초기화해야 한다면 이렇게 하면 됩니다:

 

@Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  @ViewChild('chart') chartRef: ElementRef;
  chart: MyChart|null;

  constructor() {
    afterNextRender(() => {
      this.chart = new MyChart(this.chartRef.nativeElement);
    }, {phase: AfterRenderPhase.Write});
  }
}

 

 개별 후킹 함수는 불필요한 레이아웃 조작 부하를 줄여 성능을 향상시키기 위해, 콜백 함수를 등록할 때 현재 어떤 단계인지 표시하는 phase 값을 지정할 수 있습니다.

새로 만든 Angular 프로젝트는 Vite, esbuild를 기본으로 사용합니다.

ng serve, ng build 명령은 이제 Vite, esbuild로 동작합니다.

 

 Angular CLI 빌드 파이프라인을 근본적으로 변경하지 않았다면 SSR도 도입할 수 없었을 겁니다.

 

 v16부터 빌드 경험을 개선하기 위해 esbuild와 Vite를 개발자 프리뷰로 제공했었습니다. 수많은 개발자들이 이를 시험해봤고, 기업 파트너 중에서는 빌드 시간이 67% 감소했다는 소식도 전해왔습니다! 오늘 저희는 새로운 애플리케이션 빌더가 개발자 프리뷰를 졸업하고 정식으로 도입되었다는 소식을 전합니다!

 

 여기서 멈추지 않고 저희는 하이브리드 렌더링에 사용되는 빌드 파이프라인을 개선했습니다. 그래서 SSR & SSG를 활용하는 경우 ng build 명령은 최대 87%, ng serve 명령은 최대 80% 정도 성능을 개선했습니다.

 

webpack 기반의 기존 파이프라인고 esbuild + vite 파이프라인의 빌드 시간 비교

 

 하이브리드 렌더링은 SSG나 SSR을 함께 활용하는 클라이언트 사이드 렌더링을 의미합니다. 이후에 나올 마이너 버전 업데이트에서는 하이브리드 렌더링이 적용된 기존 프로젝트를 자동으로 마이그레이션하는 기능을 추가할 예정입니다. 새로운 애플리케이션 빌더를 체험해 보려면 이 문서를 참고하세요.

DevTools에 의존성 관계 디버깅 기능 추가

 작년에는 Angular DevTools에 의존성 관계를 디버깅할 수 있는 기능을 시범적으로 도입했었습니다. 그 이후로 몇달이 지났고, 이번에는 프레임워크가 실행되는 시점에 인젝터 트리에 접근하는 디버깅 API를 새롭게 추가했습니다.

 

 이 API를 활용하면 이런 내용을 확인할 수 있습니다.

• 컴포넌트의 의존성 관계
• 인젝터 트리와 의존성 결정 과정
• 특정 인젝터에 선언된 프로바이더

 아래 애니메이션을 확인해 보세요. 그리고 자세한 내용은 angular.io 사이트의 Angular DevTools 문서를 참고하세요.

 

컴포넌트 의존성 관계, 인젝터 트리 확인하기

 

 이제는 UI를 좀 더 다듬으려고 합니다. 인젝터 계층, 프로바이더, 의존성이 결정되는 과정을 좀 더 나은 모습으로 제공할 수 있기를 바랍니다.

독립 API를 처음부터 시작하기

 독립 컴포넌트, 디렉티브, 파이프에 대한 피드백을 1년반 동안 받아오면서 개발자 경험을 더 다듬어 왔고, 그 결과물은 새 애플리케이션의 기본 사항으로 도입할 수 있게 되었습니다. 이제 ng generate 명령으로 독립 컴포넌트, 디렉티브, 파이프를 생성할 수 있습니다.

 

 이와 함께 저희는 일관성 있는 학습 경험, 개발 모범 사례, 권장사항을 정리하기 위해 angular.io와 angular.dev에 있는 문서 전체를 다시 검토했습니다.

 

 당분간은 NgModule은 유지할 예정이지만, 새로 도입된 독립 API가 어떤 장점을 갖는지 확인하면서 점차 NgModule에서 독립 API를 사용하는 방식으로 이동할 것을 적극 권장합니다. 이 과정을 자동화하는 스키매틱도 준비해뒀습니다:

 

ng generate @angular/core:standalone

 

자세한 내용은 마이그레이션 가이드 문서를 참고하세요.

반응성의 다음 단계

 Angular의 변경사항 중에서 아주 큰 변화 중 하나는 시그널 기반의 반응형 시스템으로 전환하는 것이었습니다. 이 과정을 진행하면서 이전 버전은 물론이고, Zone.js 기반의 변화 감지 시스템의 호환성도 보장하기 위해 노력했습니다.

 

 이제는 Angular의 시그널 기반 반응형 시스템이 개발자 프리뷰를 졸업한 것을 알립니다. 당분간은 보완사항이 있는지 점검하기 위해 effect 함수는 개발자 프리뷰로 남겨두지만 말입니다.

 

 앞으로 몇달간은 시그널 기반의 입력, 뷰 쿼리 등의 기능을 추가로 도입할 것입니다. 그리고 내년 5월에 올라갈 Angular v18에서는 시그널과 관련하여 개발자 경험을 개선할 수 있는 기능들과 함께 다시 돌아오겠습니다.

테스트의 미래

 Angular팀은 개발자들이 원하는 성능이 나오는지, 자유롭게 변형할 수 있는지, 그리고 직관적인지 확인하기 위해 Jest를 꾸준히 실험해보고 있습니다. 여기에 추가로 Web TestRunner를 실험해보기 시작했고, 초기 구현에 대한 공개 PR을 진행하고 있습니다. 당분간은 Karma에 사로잡혀 있는 프로젝트를 먼저 구해내기 위해 Web Test Runner 리서치에 집중할 예정입니다.

매터리얼 3

 Angular 팀은 Google의 매터리얼 디자인 팀과 긴밀하게 협업하며 디자인 토큰을 통합하고 Angular Material을 리팩토링해왔습니다. 디자인 토큰이란, 구성요소에 훨씬 더 많은 사용자 정의 옵션을 지원하고 Material 3 지원을 활성화하는 체계입니다. 하지만 v17 버전에는 디자인 토큰이나 매터리얼 3를 탑재할 준비가 아직 되지 않았기 때문에, 이 내용은 v17의 마이너 릴리즈 중에 탑재될 것으로 예상됩니다.

 

 2022년 4분기에 새로운 MDC 기반의 Angular Material 컴포넌트들을 발표했고, 기능이 동일하지만 DOM 구조나 스타일이 다른 기존 컴포넌트는 지원을 중단하기로 결정했습니다. 이 컴포넌트들은 v15에 지원 중단이 결정되었기 때문에 v17에는 제거되었습니다. 하지만 Angular 버전을 v17로 올리더라도 Angular Material은 v16을 그대로 사용할 수 있습니다. 아직은 Angular 17버전이 Angular Material v16과 호환되기 때문이지만, Angular v18이 나오게 되면 Angular Material 버전도 올려야 할 것입니다. 마이그레이션을 수행할 수 없는 경우를 대비해서 종료되지 않는 유료 지원을 제공하는 HeroDevs의 파트너와도 협력하고 있습니다.

삶의 질을 높여주는 개선사항

 미래를 지향하는 굵직한 변경사항 정도는 아니지만, 이번에는 삶의 질을 살짝이라도 개선할 수 있는 기능을 소개합니다.

뷰 전환 효과 - 실험적 지원

 뷰 전환 API를 활용하면 전환 효과를 적용하면서 자연스럽게 DOM을 변경할 수 있습니다. 이제는 withViewTransitions 를 활용하는 방식으로 Angular 라우터가 뷰 전환 API를 직접 지원하며, 전환 효과는 브라우저의 네이티브 성능으로 동작합니다.

 

 이 기능을 사용하려면 애플리케이션 부트스트랩 단계에서 라우터 프로바이더를 선언하면 됩니다.

 

bootstrapApplication(App, {
  providers: [
    provideRouter(routes, withViewTransitions()),
  ]
});

 

withViewTransitions는 onViewTransitionCreated 프로퍼티가 있는 객체를 옵션으로 받을 수 있습니다. 이 객체를 활용하면:

• 전환 효과를 적용하지 않는 경우를 지정할 수 있습니다.
• 전환 효과가 적용되는 동안에만 추가되었다가 제거되는 스타일 지정용 클래스를 추가할 수 있습니다.

자동 연결되는 이미지 디렉티브

 Angular의 이미지 디렉티브는 이제 이미지 로더에 인자로 지정한 도메인에 대해 사전 링크를 자동으로 생성합니다. 이 때 오리진을 식별하지 못하거나 사전 링크를 감지하지 못하면 개발 단계에서 경고가 표시됩니다.

 

자세한 내용은 이미지 디렉티브 가이드 문서를 참고하세요.

애니메이션 모듈을 지연 로딩하기

 이 기능을 활용하면 처음 로딩되는 빌드 결과물의 크기를 60KB(gzip 압축하면 16KB) 줄일 수 있습니다. 이 기능은 커뮤니티 컨트리뷰터인 Matthieu Riegler가 제안해줬으며, 이렇게 사용하면 됩니다:

 

import { provideAnimationsAsync } from '@angular/platform-browser/animations-async';

bootstrapApplication(RootCmp, {
  providers: [provideAnimationsAsync()]
});

 

입력값 보정

 컴포넌트에 불리언 타입으로 입력 프로퍼티를 받는 경우는 아주 흔한 케이스입니다. 그런데 이런 경우는 보통 컴포넌트에 전달하는 값의 타입을 보정해야 하기도 합니다. 이런 컴포넌트가 있다고 합시다:

 

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

 

 이 컴포넌트를 이렇게 사용하려고 합니다:

 

<my-expander expanded/>

 

 그러면 문자열 값을 불리언 타입에 할당할 수 없다는 에러를 만나게 될 것입니다. 이런 경우에는 입력 프로퍼티를 이렇게 작성하면 됩니다:

 

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}

 

 HTML 어트리뷰트에 불리언 프로퍼티를 사용할 수 있도록 요청했던 GitHub 리퀘스트를 직접 확인해 보세요.

styles, styleUrls에 문자열 사용하기

 Angular 컴포넌트에는 스타일 시트를 여러개 적용할 수 있습니다. 하지만 보통은 스타일 시트 하나만 적용하거나 인라인 스타일을 작성하는 경우가 대다수입니다. 그래서 이런 경우들이라면:

 

@Component({
  styles: [`
    ...
  `]
})

 

...
@Component({
  styleUrls: ['styles.css']
})
...

 

 이렇게 간단하게 작성할 수 있습니다:

 

@Component({
  styles: `
    ...
  `
})

 

...
@Component({
  styleUrl: 'styles.css'
})
...

 

 배열을 사용해서 스타일 시트를 여러개 적용하는 방식은 여전히 유효합니다. 사용하기 편하고, 직관적이며, 포매팅 툴을 더 잘 지원하기 위한 방식을 추가한 것 뿐입니다.

커뮤니티 스키매틱 제작 지원

 개발자 커뮤니티에서 스키매틱을 만들 때 활용할 수 있는 유틸리티 메서드들을 모아서 @schematics/angular/utility로 제공합니다. 이 패키지를 활용하면 Angular 앱의 가장 깊숙한 곳까지 직접 접근해서 원하는 기능을 가져올 수 있으며, package.json에 종속성을 추가하는 기능도 구현할 수 있습니다.

 

 자세한 내용은 스키매틱 가이드 문서를 참고하세요.

Angular 개발자 학습 코스

 Angular 팀은 대화형 교육 플랫폼을 운영하는 SoloLearn과 협업해서 "Introduction to Angular"라는 학습 코스를 런칭했습니다. 최근 2개월동안 이 학습 코스를 거쳐간 개발자들은 7만명이 넘습니다!

 

SoloLearn이 제공하는 Angular 학습 코스

 

 자세한 내용은 이 문서를 참고하세요.

커뮤니티 하이라이트

 Angular v17을 더 특별하게 만들어준 346명의 컨트리뷰터들에게 감사를 전합니다! 이 중 주목할만한 소식은 이런 것들이 있습니다:

• httpClient가 백엔드에서 동작하도록 확장되면서 Angular가 엣지 워커에서 동작할 수 있습니다. Matthieu Riegler에게 감사를 전합니다.
• Matthieu는 POST 요청의 헤더, 필터, 캐시를 커스터마이징하는 HttpTransferCache 기능 개발에도 기여했습니다.
• Cédric Exbrayat는 새로운 애플리케이션 빌더에 활용되는 namedChunks를 도입해습니다.
• Thomas Laforge가 제공하는 Angular Challenges는 Angular 개발자들이 다음 단계로 도약할 수 있도록 돕는 훌륭한 학습 코스입니다.
• AnalogJS는 꾸준히 성장해서 이제 1.0 버전을 준비하고 있습니다. Brandon Roberts의 이 엄청난 작업을 응원합니다!
• Santosh Yadav의 Angular 초심자 코스는 1백만 뷰를 돌파했습니다.

Angular로 미래를 만드세요

 

 Angular 팀은 지난 6개월동안 더 나은 개발자 경험과 성능을 향상시키는 기능을 지속적으로 발표하며 Angular 르네상스를 이어왔습니다. 그리고 오늘은 Angular의 새로운 브랜드와 angular.dev를 소개하면서 전환점을 맞이하게 된 것 같아 아주 기쁜 날입니다.

 

 다음 릴리즈에는 신호 기반의 반응성, 하이브리드 렌더링, 더 많은 학습 여정을 소개할 수 있을 것이라 기대합니다.

 

 Angular로 미래를 만드는 당신의 여정에 함께 할 수 있어서 영광입니다! 감사합니다!