Angular 10.0.0 릴리즈 노트

 안녕하세요. 한장현입니다.

 

 한국시각으로 6/25 새벽 03:46에 Angular 10.0.0이 출시되었습니다.
 이전 메이저 업데이트가 Ivy 때문에 오래 걸려서 그런지 이번 업데이트는 기존 주기보다 약간 빠른 시기에 발표되었는데, 어떤 내용이 바뀌었는지 릴리즈 노트를 살펴봤습니다.

 

---

 

 Angular 10.0.0 버전이 드디어 나왔습니다! 이번 메이저 릴리즈는 Angular가 실행되는 플랫폼 관련 코드 전체와 Angular Material, Angular CLI를 모두 포함하는 대규모 업데이트 입니다. 하지만 Angular 9.0을 발표한지 아직 4개월밖에 되지 않았기 때문에, 이번 릴리즈는 지금까지 있었던 릴리즈와 비교하면 변동량이 적은 편입니다.

 

Butterfly Beach by Minko Gechev

 

 Angular 팀은 급변하는 JavaScript 생태계와 속도를 맞추기 위해 1년에 두 번 메이저 버전 릴리즈하는 것을 목표로 하고 있습니다. 그래서 Angular 11은 이번 가을에 나올 예정입니다.

 

 이번 릴리즈에는 어떤 것이 달라졌나요?

 기간 선택 컴포넌트

 

 기간을 선택할 수 있는 컴포넌트가 Angular Material에 추가되었습니다.

 

기간 선택 컴포넌트

 

 이 컴포넌트는 mat-date-range-input이나 mat-date-range-picker 컴포넌트로 사용하면 됩니다.

 

 StackBlitz에서 동작하는 것을 직접 확인해 보세요.

 그리고 Angular Material 문서도 확인해 보세요.

 

 

 CommonJS 모듈이 사용되면 경고 표시

 

 CommonJS 모듈 방식으로 패키징된 의존성 패키지를 사용하면 애플리케이션의 빌드 결과물 용량이 커지고 앱도 느려질 수 있습니다.

 

 그래서 Angular 10 버전부터는 이런 패키지가 사용되었을 때 경고 메시지를 표시합니다. 이 경고 메시지가 출력되면 CommonJS 모듈로 빌드된 패키지 대신 ECMAScript 모듈(ESM)로 빌드된 패키지를 사용할 수 있는지 검토해 보는 것이 좋습니다.

 

CommonJS나 AMD 방식으로 빌드된 패키지가 사용되었을 때 표시되는 경고

 

 엄격한 규칙 옵션

 

 Angular 10 버전부터는 ng new 명령으로 워크스페이스를 생성할 때 좀 더 엄격한 규칙을 지정할 수 있습니다.

 

ng new --strict

 

 이 플래그를 사용하면 새로운 프로젝트를 생성하면서 이 프로젝트의 TypeScript 환경설정과 Angular CLI 환경설정에 엄격한 개발 규칙을 적용합니다. 이런 구성 방식은 버그를 사전에 발견할 수 있다는 점에서 유리하기 때문에 유지보수 측면에서 도움이 될 수 있습니다. 어떤 내용이 적용되는지 자세하게 알아보면 이렇습니다:

 

• TypeScript strict 모드를 활성화합니다.
• 템플릿 타입 검사 모드를 strict 모드로 설정합니다.
• 번들 결과물의 한계 용량을 20% ~ 40% 정도로 줄입니다.
• TypeScript 규칙에 no-any 규칙을 추가합니다.
• 애플리케이션이 받는 트리 셰이킹의 효과를 최대화하기 위해 "sideEffects": false 설정을 추가합니다.

 

 JavaScript 생태계와 발 맞추기

 

 그리고 지금까지 그러했듯이 JavaScript 생태계의 발전 속도에 맞추기 위해 의존 관계에 있는 패키지 버전을 업데이트했습니다.

 

• TypeScript 3.9 버전을 기준으로 지원합니다.
• TSLib v2.0 버전을 적용했습니다.
• TSLint v6 버전을 적용했습니다.

 

 프로젝트 파일 구조도 약간 변경되었습니다. Angular 10 버전부터는 tsconfig.base.json 파일이 새로 추가됩니다. 이 파일은 기존에 있던 tsconfig.json 파일과 비슷한 역할을 하지만, 코드 에디터에 활용되는 타입정보와 패키지 정보를 더 효율적으로 제공하기 위해 도입했습니다.

 

 지원 브라우저 변경

 

 Angular 10 버전으로 생성하는 프로젝트는 오래된 브라우저를 더 조금만 지원합니다.

 

v9 기본 목록

 

v10 기본 목록

 

 이렇게 오래된 브라우저를 버리면서 얻게된 이득이 있습니다. 이제는 설정을 변경하지 않는한 애플리케이션을 ES5 버전으로 빌드하지 않습니다. 정책상 IE나 UC 브라우저를 지원하기 위해 증분 로딩용 ES5 빌드가 필요하다면 .browserlistrc 파일에 지원 브라우저 목록을 추가하면 됩니다.

 

 오래된 이슈 처리

 

 이번 메이저 릴리즈를 준비하면서 커뮤니티 활동에도 큰 노력을 기울였습니다. 그래서 최근 3주간 Angular 팀이 처리한 이슈는 프레임워크나 툴, 컴포넌트 모두 포함해서 700건 정도 됩니다. 그리고 현재 처리중인 이슈는 2,000개가 넘으며, 앞으로 몇달동안 좀 더 집중해서 그동안 해결하지 못했던 이슈를 최대한 처리하려고 합니다.

 

 지원이 중단되는 기능

 

 지원이 중단되는 것으로 새롭게 지정된 내용이 있습니다.

 

 Angular 프레임워크 패키지는 더이상 ESM5 버전이나 FESM5 버전으로 제공되지 않습니다. 이제는 굳이 ES5 버전으로 프레임워크 코드를 제공하지 않아도 된다고 판단했기 때문에 이런 결정을 내렸습니다. 이 결정으로 인해 이제는 yarn이나 npm을 사용해서 Angular 패키지를 설치할 때 받아야 하는 용량이 119MB 정도 줄었으며, 설치 시간도 당연히 줄어들었습니다.

 

 그리고 커뮤니티와 오랫동안 대화를 나눠본 결과, IE 9/10, Internet Explorer Mobile은 지원을 중단하기로 결정했습니다.

 

 지원이 중단되는 기능과 정책에 대해 자세하게 알아보려면 이 문서를 참고하세요.

 

 역주: Angular에서 지원을 중단하기로 결정한 기능은 수정할 시간을 제공하기 위해 메이저 버전 2개까지는 해당 코드를 제거하지 않습니다. 따라서 IE 9/10 지원은 Angular 11 버전까지 유효할 것이며, 메이저 버전이 6개월마다 발표되기 때문에 약 1년 후 발표되는 Angular 12 버전부터 IE 9/10 지원이 중단될 것으로 보입니다.

 

 Angular 10 버전으로 업그레이드하려면

 

 버전 업그레이드와 관련된 설명과 진행방법을 확인하려면 이전과 마찬가지로 update.angular.io 사이트를 확인하면 됩니다. 그리고 이 때 메이저 버전을 여러개 바꿔야 한다면 원활한 업그레이드를 위해 한 번에 메이저 버전 하나씩 작업하는 것이 좋습니다.

 

 Angular 9버전에서 간단하게 업그레이드 하려면 다음 명령을 실행하면 됩니다.

 

ng update @angular/cli @angular/core

 

 버전 업그레이드 과정에 대해 자세하게 알아보려면 이 문서를 참고하세요.

 

---

 

 이전과 비교했을 때 이번 메이저 릴리즈를 적용한다고 해도 기존 코드를 수정할 필요는 거의 없습니다.

 기존 프로젝트에서 ng update를 실행해 봤을 때 browserlist 파일을 .browserlistrc 파일로 바꾸는 것이나 tsconfig.base.json 파일이 생성되는 것은 모두 ng update 명령이 자동으로 처리했습니다.

 그리고 ng serve로 이전 버전에서 만든 프로젝트를 바로 실행할 수 있었습니다.

 

 다만, TypeScript 기준 버전이 3.9로 올라갔기 때문에 이와 관련된 코드를 수정해야 할 수 있으며, strict 모드를 적용한다면 코드 수정량이 매우 많아질 수 있습니다.

 저는 strict 모드에서 적당히 잡다가 다시 이전 모드로 돌아왔습니다.

 

 

 이 글이 Angular를 사용하시는 분들에게 도움이 되기를 바랍니다.

 

 감사합니다.