Angular 로드맵

시그널 폼

시그널 폼이 안정화되었습니다. 이 새로운 방식은 개발자가 시그널로 폼 상태를 관리하도록 하여 편리한 폼 작성 경험을 제공합니다. 시그널 폼을 안정화하고 반응형 폼과의 상호 운용성을 개선하여, 각 팀이 자신에게 맞는 속도로 대규모 폼을 점진적으로 마이그레이션할 수 있도록 했습니다.

반응성

유연한 비동기 데이터 처리를 위해 새로운 시그널 API인 resource()와 httpResource()를 도입했습니다. 이 API들을 안정화했습니다.

변경 감지

존리스가 안정화되고 기본값이 됨에 따라, 현재의 모범 사례를 따르도록 기본 변경 감지 전략을 OnPush로 설정했습니다. 또한 ChangeDetectionStrategy.Default의 이름을 ChangeDetectionStrategy.Eager로 변경했습니다.

자세한 내용은 RFC 토론을 참고하세요.

HMR(핫 모듈 리로드) 개선

핫 모듈 교체를 활성화하여 편집 후 새로고침하는 주기를 단축하고자 합니다. Angular v19에서 CSS와 템플릿 HMR의 초기 지원을 제공했고, v20에서는 템플릿 HMR을 안정화했습니다. 이 프로젝트를 완료로 표시하기 전에 개발자의 요구를 충족하는지 확인하기 위해 계속 피드백을 수집하겠습니다.

Angular 시그널 제공

이 프로젝트는 반응성의 기본 요소로 시그널을 도입하여 Angular의 반응성 모델을 새롭게 설계합니다. 초기 계획 과정에서 수백 건의 논의, 개발자와의 대화, 피드백 세션, 사용자 경험 연구, 일련의 RFC가 이루어졌으며, RFC에는 1,000개가 넘는 의견이 달렸습니다.

Angular v20에서는 signal, effect, linkedSignal, 시그널 기반 쿼리와 입력을 포함한 모든 핵심 반응성 기본 요소를 안정화했습니다.

2차원 드래그 앤 드롭 지원

이 프로젝트의 일환으로 Angular CDK 드래그 앤 드롭에 방향을 혼합하여 사용할 수 있는 기능을 구현했습니다. 이는 저장소에서 가장 많이 요청된 기능 중 하나입니다.

SSR 및 사전 렌더링에서 이벤트 재실행

v18에서는 서버 사이드 렌더링이나 사전 렌더링을 사용할 때 이벤트를 재실행하는 기능을 도입했습니다. 이 기능은 Google.com에서 사용하는 이벤트 디스패치 기본 요소(이전 이름은 jsaction)에 의존합니다.

Angular v19에서 이벤트 재실행을 안정화하고 모든 새 프로젝트에서 기본적으로 활성화했습니다.

Angular Material의 맞춤 설정 확장

Angular Material 컴포넌트를 더 유연하게 맞춤 설정하고 Material 3 기능을 사용할 수 있도록 Google의 Material Design 팀과 협력하여 토큰 기반 테마 API를 정의할 예정입니다.

v17.2에서 Angular Material 3의 실험적 지원을 공개했고, v18에서는 이를 안정화했습니다.

지연 로딩 도입

v17에서 지연 가능한 뷰를 개발자 미리보기로 제공하여 코드를 편리하게 지연 로딩하는 API를 도입했습니다. v18에서는 라이브러리 개발자도 지연 가능한 뷰를 사용할 수 있게 했으며 API를 안정화했습니다.

기존 하이브리드 렌더링 프로젝트의 esbuild 및 vite 전환 자동화

v17에서 vite와 esbuild 기반 애플리케이션 빌더를 제공하고 새 프로젝트에서 기본적으로 활성화했습니다. 이 빌더는 하이브리드 렌더링 프로젝트의 빌드 시간을 최대 87% 개선합니다. v18의 일부로 기존 하이브리드 렌더링 프로젝트를 새 빌드 파이프라인으로 마이그레이션하는 스키매틱과 가이드를 제공했습니다.

Angular.dev를 Angular 개발자의 공식 홈으로 전환

Angular.dev는 Angular 개발을 위한 새로운 사이트이자 도메인, 공식 홈입니다. 새 사이트에는 개발자가 Angular의 최신 기능으로 개발하는 데 도움이 되는 최신 문서, 튜토리얼, 안내가 포함되어 있습니다.

내장 흐름 제어 도입

v17에서 새로운 흐름 제어를 개발자 미리보기로 제공했습니다. 이는 성능을 크게 개선하고 템플릿을 더 편리하게 작성할 수 있도록 합니다. 기존 *ngIf, *ngFor, *ngSwitch를 새 구현으로 전환할 수 있는 마이그레이션도 제공했습니다. v18부터 내장 흐름 제어가 안정화되었습니다.

최신 번들러 조사

Angular v16에서 ng build와 ng serve를 지원하는 esbuild 기반 빌더를 개발자 미리보기로 릴리즈했습니다. ng serve 개발 서버는 Vite와 esbuild 및 Angular 컴파일러의 다중 파일 컴파일을 사용합니다. v17에서는 이 빌드 도구를 개발자 미리보기에서 안정화하고 새 프로젝트에서 기본적으로 활성화했습니다.

의존성 주입 디버깅 API 도입

Angular와 Angular DevTools의 디버깅 기능을 개선하기 위해 의존성 주입 런타임에 접근하는 API를 개발할 예정입니다. 이 프로젝트의 일환으로 인젝터 계층과 관련 프로바이더 간 의존성을 탐색할 수 있는 디버깅 메서드를 공개할 예정입니다. v17에서는 의존성 주입 라이프사이클에 연결할 수 있는 기능을 제공했습니다. 인젝터 트리 시각화와 각 노드에 선언된 프로바이더를 검사하는 기능도 출시했습니다.

독립형 컴포넌트 문서와 스키매틱 개선

NgModule 없이 앱을 만들 수 있는 ng new --standalone 스키매틱 모음을 개발자 미리보기로 릴리즈했습니다. v17에서는 새 애플리케이션 작성 형식을 독립형 API로 전환하고 이 권장 사항을 반영하도록 문서를 변경했습니다. 또한 기존 애플리케이션을 독립형 컴포넌트, 디렉티브, 파이프로 업데이트할 수 있는 스키매틱을 제공했습니다. 당분간 NgModule을 계속 제공하겠지만, 개발자 경험을 개선하고 새 API를 위해 개발하는 새로운 기능의 이점을 누릴 수 있도록 새 API를 살펴보는 것을 권장합니다.

비파괴 전체 앱 하이드레이션

v16에서 비파괴 전체 하이드레이션을 개발자 미리보기로 릴리즈했습니다. 이를 통해 Angular는 앱을 처음부터 다시 만드는 대신 서버 사이드 렌더링된 페이지의 기존 DOM 노드를 재사용할 수 있습니다. 자세한 내용은 하이드레이션 가이드를 참고하세요.

이미지 디렉티브 개선

v15에서 Angular 이미지 디렉티브를 안정화하여 릴리즈했습니다. 명시적인 크기를 지정하는 대신 이미지가 부모 컨테이너에 맞춰 채워지도록 하는 새로운 채우기 모드 기능을 도입했습니다. 지난 두 달 동안 Chrome Aurora 팀은 이 디렉티브를 v12 이후 버전으로 백포트했습니다.

문서 리팩토링

기존 문서 전체가 일관된 콘텐츠 유형 체계에 맞도록 정리합니다. 튜토리얼 형식에 지나치게 의존하는 문서는 독립적인 주제로 바꿉니다. 주요 튜토리얼 외의 콘텐츠가 일련의 가이드에 강하게 결합되지 않고 독립적으로 이해될 수 있도록 하는 것이 목표입니다. 2022년 2분기에는 템플릿과 의존성 주입 콘텐츠를 리팩토링했습니다. 2023년 1분기에는 HTTP 가이드를 개선했으며, 이를 끝으로 문서 리팩토링 프로젝트를 잠정 중단합니다.

이미지 성능 개선

Aurora 팀과 Angular 팀은 Core Web Vitals 개선을 목표로 이미지 디렉티브를 구현하고 있습니다. v15에서 이미지 디렉티브의 안정 버전을 제공했습니다.

최신 CSS

웹 생태계는 끊임없이 발전하며, Angular에도 최신 표준을 반영하고자 합니다. 이 프로젝트는 개발자가 레이아웃과 스타일링 등의 모범 사례를 따를 수 있도록 Angular에서 최신 CSS 기능을 사용하는 지침을 제공하는 것을 목표로 합니다. 공식 레이아웃 지침을 공개했으며, 이 작업의 일환으로 flex layout의 배포를 중단했습니다.

호스트 엘리먼트에 디렉티브 추가 지원

호스트 엘리먼트에 디렉티브를 추가하는 기능은 오래전부터 요청되어 왔습니다. 이 기능을 통해 개발자는 상속 없이 자신의 컴포넌트에 동작을 추가할 수 있습니다. v15에서 호스트 엘리먼트를 디렉티브로 확장할 수 있는 디렉티브 조합 API를 제공했습니다.

스택 트레이스 개선

Angular 팀과 Chrome DevTools 팀은 오류 메시지의 스택 트레이스를 더 읽기 쉽게 만들기 위해 협력하고 있습니다. v15에서는 관련성이 높고 링크로 연결되는 개선된 스택 트레이스를 릴리즈했습니다. 우선순위가 더 낮은 작업으로, 템플릿에 더 정확한 호출 프레임 이름을 제공해 스택 트레이스를 이해하기 쉽게 만드는 방법을 탐색할 예정입니다.

MDC Web 통합으로 Angular Material 컴포넌트 개선

MDC Web은 Google Material Design 팀이 만든 라이브러리로, Material Design 컴포넌트를 만들기 위한 재사용 가능한 기본 요소를 제공합니다. Angular 팀은 이 기본 요소를 Angular Material에 통합하고 있습니다. MDC Web을 사용하면 Angular Material이 Material Design 명세에 더 가까워지고, 접근성과 컴포넌트 품질이 향상되며, 팀의 개발 속도도 빨라집니다.

NgModule을 선택적으로 사용하는 API 구현

Angular를 더 단순하게 만들기 위해 개발자가 NgModule 없이 앱을 초기화하고, 컴포넌트 인스턴스를 만들고, 라우터를 사용할 수 있는 API를 도입하고 있습니다. Angular v14는 독립형 컴포넌트, 디렉티브, 파이프를 위한 API의 개발자 미리보기를 도입합니다. 앞으로 몇 분기 동안 개발자의 피드백을 수집하고 API를 안정화하여 프로젝트를 마무리할 예정입니다. 다음 단계로는 TestBed, Angular 엘리먼트 등의 사용 사례를 개선할 예정입니다.

템플릿에서 protected 필드 바인딩 허용

Angular 컴포넌트의 캡슐화를 개선하기 위해 컴포넌트 인스턴스의 protected 멤버에 바인딩할 수 있도록 했습니다. 따라서 템플릿에서 사용하기 위해 필드나 메서드를 public으로 노출할 필요가 없습니다.

고급 개념 가이드 발행

변경 감지를 심도 있게 다루는 가이드를 작성하고 발행합니다. Angular 앱의 성능 프로파일링 콘텐츠를 작성합니다. 변경 감지가 Zone.js와 상호작용하는 방식을 다루고, 언제 실행되는지, 실행 시간을 어떻게 프로파일링하는지, 성능 최적화에 일반적으로 어떤 방법을 사용하는지 설명합니다.

@angular/forms에 엄격한 타입 적용

2021년 4분기에 폼에 엄격한 타입을 도입하는 방안을 설계했고, 2022년 1분기에 관련 RFC를 마무리했습니다. 현재는 기존 프로젝트에도 개선 사항을 적용할 수 있도록 자동 마이그레이션 단계를 포함한 도입 전략을 구현하고 있습니다. 외부 커뮤니티에 원활한 마이그레이션 경로를 제공하기 위해 먼저 Google의 2,500개 이상 프로젝트에서 이 방안을 테스트하고 있습니다.

기존 View Engine 제거

모든 내부 도구를 Ivy로 전환한 뒤 기존 View Engine을 제거하여 Angular의 개념적 부담, 패키지 크기, 유지 관리 비용, 코드베이스의 복잡성을 줄일 예정입니다.

NgModule을 선택 사항으로 만들어 Angular 이해 방식 단순화

Angular를 이해하고 배우는 과정을 단순화하기 위해 NgModule을 선택 사항으로 만드는 작업을 진행할 예정입니다. 이를 통해 개발자가 독립형 컴포넌트를 개발할 수 있도록 하고, 컴포넌트의 컴파일 범위를 선언하는 대체 API를 구현합니다. 이 프로젝트는 상위 수준 설계 논의로 시작했으며, 논의 내용을 RFC에 정리했습니다.

@angular/forms의 엄격한 타입 설계

하위 호환성을 깨뜨리는 영향을 최소화하면서 반응형 폼에 더 엄격한 타입 검사를 구현하는 방법을 찾을 예정입니다. 이를 통해 개발자가 개발 중에 더 많은 문제를 발견하고, 텍스트 편집기와 IDE의 지원을 강화하며, 반응형 폼의 타입 검사를 개선할 수 있습니다.

Angular DevTools와 프레임워크 통합 개선

Angular DevTools와 프레임워크의 통합을 개선하기 위해 코드베이스를 angular/angular 모노레포로 옮기는 작업을 진행하고 있습니다. 여기에는 Angular DevTools를 Bazel로 전환하고 기존 프로세스와 CI 파이프라인에 통합하는 작업이 포함됩니다.

고급 컴파일러 진단 출시

Angular 컴파일러의 진단 범위를 타입 검사 너머로 확장합니다. 정확성과 모범 사례 준수를 더욱 보장하기 위해 다른 정확성 검사와 준수 검사를 도입합니다.

e2e 테스트 전략 업데이트

장기적으로 유효한 e2e 테스트 전략을 제공하기 위해 Protractor의 현황, 커뮤니티의 혁신, e2e 모범 사례를 평가하고 새로운 기회를 탐색하고자 합니다. 첫 단계로 RFC를 공개하고 파트너와 협력하여 Angular CLI와 최신 e2e 테스트 도구가 원활하게 통합되도록 했습니다. 다음 단계에서는 권장 사항을 확정하고 전환에 필요한 자료 목록을 정리해야 합니다.

Angular 라이브러리의 Ivy 사용

2020년 초에 Ivy 라이브러리 배포에 관한 RFC를 공개했습니다. 커뮤니티의 소중한 피드백을 바탕으로 프로젝트를 설계했습니다. 현재는 Ivy 라이브러리 배포 개발에 투자하고 있습니다. 여기에는 Ivy 컴파일을 사용하도록 라이브러리 패키지 형식을 업데이트하고, View Engine 라이브러리 형식과 ngcc의 사용 중단 권고를 가능하게 하는 작업이 포함됩니다.

테스트 환경 자동 정리로 테스트 시간과 디버깅 개선

테스트 시간을 줄이고 테스트 간 격리를 강화하기 위해 각 테스트 실행 후 TestBed가 테스트 환경을 자동으로 정리하고 해제하도록 변경하고자 합니다.

IE11 지원 중단 및 제거

Internet Explorer 11(IE11)은 Angular가 웹 플랫폼의 일부 최신 기능을 활용하는 데 걸림돌이 되어 왔습니다. 이 프로젝트의 일환으로 IE11 지원을 중단하고 제거하여 자동으로 최신 상태를 유지하는 브라우저가 제공하는 현대적인 기능을 활용할 수 있도록 할 예정입니다. 커뮤니티의 피드백을 수집하고 앞으로의 단계를 결정하기 위해 RFC를 진행했습니다.

ES2017+를 기본 출력 언어로 활용

최신 브라우저를 지원하면 더 간결하고 표현력이 높으며 성능이 뛰어난 새로운 JavaScript 문법을 활용할 수 있습니다. 이 프로젝트에서는 이를 추진하는 데 어떤 장애물이 있는지 조사하고 필요한 조치를 취할 예정입니다.

Angular DevTools로 디버깅과 성능 프로파일링 가속화

디버깅과 성능 프로파일링 유틸리티를 제공하는 Angular 개발 도구를 만들고 있습니다. 이 프로젝트는 개발자가 Angular 앱의 컴포넌트 구조와 변경 감지를 이해하도록 돕는 것을 목표로 합니다.

Angular 버전 관리와 브랜치 통합으로 릴리즈 간소화

Angular의 여러 GitHub 저장소(angular/angular, angular/angular-cli, angular/components)에서 릴리즈 관리 도구를 통합하고자 합니다. 이를 통해 인프라를 재사용하고, 프로세스를 통일하고 단순화하며, 릴리즈 프로세스의 신뢰성을 높일 수 있습니다.

커밋 메시지 표준화로 개발 일관성 향상

개발 과정의 일관성을 높이고 인프라 도구를 재사용하기 위해 Angular 저장소(angular/angular, angular/components, angular/angular-cli) 전반의 커밋 메시지 요구 사항과 준수 방식을 통일하고자 합니다.

Angular 언어 지원 서비스를 Ivy로 전환

이 프로젝트는 언어 지원 서비스를 Ivy로 전환하여 사용 경험을 개선하고 기존 의존성을 제거하는 것을 목표로 합니다. 현재 언어 지원 서비스는 Ivy 앱에서도 여전히 View Engine 컴파일러와 타입 검사를 사용합니다. Angular 언어 지원 서비스에 Ivy 템플릿 파서와 개선된 타입 검사를 사용하여 앱의 동작과 일치시키고자 합니다. 이 마이그레이션은 View Engine 제거를 가능하게 하는 단계이기도 하며, 이를 통해 Angular를 단순화하고 npm 패키지 크기를 줄이며 프레임워크의 유지 관리성을 개선할 수 있습니다.

Angular의 네이티브 Trusted Types로 보안 강화

Google 보안 팀과 협력하여 새로운 Trusted Types API 지원을 추가하고 있습니다. 이 웹 플랫폼 API는 개발자가 더 안전한 웹 앱을 만드는 데 도움이 됩니다.

Angular CLI webpack 5로 빌드 속도와 번들 크기 최적화

v11 릴리즈의 일부로 Angular CLI에서 선택적으로 활성화할 수 있는 webpack 5 미리보기를 도입했습니다. 안정성을 보장하면서 빌드 속도와 번들 크기를 개선할 수 있도록 구현을 계속 다듬을 예정입니다.

Universal 앱의 핵심 스타일 인라인화로 앱 속도 향상

외부 스타일시트를 불러오는 작업은 렌더링을 차단하므로, 브라우저는 참조하는 CSS를 모두 불러오기 전까지 앱 렌더링을 시작할 수 없습니다. 페이지의 헤더에 렌더링을 차단하는 리소스가 있으면 최초 콘텐츠 표시 시간 같은 로딩 성능에 큰 영향을 줄 수 있습니다. 앱 속도를 높이기 위해 Google Chrome 팀과 협력하여 핵심 CSS를 인라인화하고 나머지 스타일을 비동기적으로 불러오도록 하고 있습니다.

더 나은 Angular 오류 메시지로 디버깅 개선

오류 메시지는 개발자가 문제를 해결하는 데 필요한 실질적인 정보를 충분히 제공하지 못하는 경우가 많습니다. 더 원활한 디버깅 경험을 위해 관련 코드를 추가하고 가이드와 기타 자료를 개발하여 오류 메시지에 대한 정보를 더 쉽게 찾을 수 있도록 작업하고 있습니다.

입문 문서 개편으로 개발자 온보딩 개선

사용자의 학습 과정을 새롭게 정의하고 입문 문서를 개편할 예정입니다. Angular의 이점과 기능을 탐색하는 방법을 명확히 설명하고, 개발자가 가능한 한 짧은 시간에 프레임워크에 익숙해질 수 있도록 안내하겠습니다.

컴포넌트 하네스 모범 사례 확장

Angular CDK는 버전 9에서 컴포넌트 테스트 하네스라는 개념을 Angular에 도입했습니다. 테스트 하네스를 사용하면 컴포넌트 작성자가 컴포넌트 상호작용을 테스트하기 위한 공식 지원 API를 만들 수 있습니다. 이 하네스 인프라를 계속 개선하고 하네스 사용 모범 사례를 명확히 하고 있습니다. Google 내부에서도 하네스 도입을 확대하기 위해 노력하고 있습니다.

콘텐츠 프로젝션 가이드 작성

콘텐츠 프로젝션은 Angular의 핵심 개념이지만 문서에서 충분히 다뤄지지 않고 있습니다. 이 프로젝트에서는 콘텐츠 프로젝션의 핵심 사용 사례와 개념을 파악하고 문서화하고자 합니다.

ESLint로 마이그레이션

TSLint 사용 중단 권고에 따라 ESLint로 전환할 예정입니다. 이 과정에서 현재 권장하는 TSLint 설정과의 하위 호환성을 확보하고, 기존 Angular 앱의 마이그레이션 전략을 구현하며, Angular CLI 도구 체인에 새로운 도구를 도입할 예정입니다.

백로그 줄이기 작전(Operation Bye Bye Backlog, 별칭 Operation Byelog)

커뮤니티 전반의 요구를 명확히 이해할 때까지 엔지니어링 역량의 최대 50%를 이슈와 PR 분류에 적극적으로 투입하고 있습니다. 그 이후에는 새로 접수되는 내용을 신속하게 처리하기 위해 엔지니어링 역량의 최대 20%를 투입할 예정입니다.