티스토리 뷰

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

한국시각으로 2020년 11월 12일 오전에 Angular 11.0.0이 릴리즈되었습니다.
Angular 공식 가이드 문서에 v11.0.0 버전이 빠르게 반영되었고, 공식 블로그에 릴리즈 노트도 게재되었습니다.
릴리즈 노트에 어떤 내용이 있는지 살펴봤습니다.

 


 

Angular 11 버전이 릴리즈되었습니다.

전 세계 Angular 개발자들을 위해 야심 차게 준비한 Angular 11 버전이 드디어 나왔습니다. 이번 릴리즈는 프레임워크가 동작하는 플랫폼부터 CLI, 컴포넌트 등 Angular 전반에 걸쳐 변경된 내용이 있습니다. 지금부터 알아봅시다!

변경된 내용

Operation Byelog

이전에 Angular 로드맵에서 공유한 것 중에 Operation Byelog와 관련된 내용이 있었습니다. Angular 팀은 커뮤니티 구성원들이 원하는 것이 무엇인지 정확하게 알기 위해 이슈와 PR을 꼼꼼하게 분류하고 점검했습니다. 이제 그 결과가 나왔음을 알려드립니다! Operation Byelog 3개 저장소에서 관리되던 이슈들은 모두 처리되었으며, 앞으로 발견되는 이슈 처리에도 힘쓰겠습니다.

앞으로의 목표는 이렇습니다: 새로 등록되는 이슈는 2주 안에 분류를 마치겠습니다.

이 과정을 진행하면서 오래된 라우터 이슈 와 폼 이슈도 드디어 해결되었다는 것을 알려드립니다.

국제화 이슈도 함께 해결되었습니다!

이제는 Angular 커뮤니티를 어떻게 더 지원할 수 있을지 구체적인 계획을 마련하고 있습니다.
앞으로도 계속해서 새로운 이슈를 분류하고 수정해 나갈 것이며 커뮤니티 구성원들의 기여를 받는 과정도 개선하겠습니다.

폰트 자동 내장

애플리케이션이 처음 렌더링 되는 시점을 더 빠르게 당기기 위해 폰트 자동 내장(automatic font inlining) 기능을 도입했습니다. 앱에 사용되거나 링크된 폰트 파일은 이제 Angular CLI로 앱을 컴파일하는 시점에 다운받아져 애플리케이션 내부에 포함됩니다. 이 기능은 Angular 11부터 기본으로 적용됩니다. 아무것도 하지 않아도 앱 초기 실행이 얼마나 빨라지는지 확인해 보세요!

컴포넌트 테스트 하네스

컴포넌트 테스트 하네스(harnesses)는 Angular 9 버전에 도입된 기능이었습니다. 이 기능은 원래 Angular Material 컴포넌트를 테스트하기 위해 간단한 API 형태를 제공하는 기능이었습니다.

Angular 11 버전부터는 모든 컴포넌트에 이 기능을 제공합니다! 이제 개발자가 테스트 스펙을 좀 더 다양하게 작성할 수 있습니다.

기존에 있던 기능을 확장하며 성능을 개선했으며 새로운 API를 추가하기도 했습니다. 그리고 컴포넌트를 병렬로 테스트하더라도 모든 병렬 로직이 비동기냐에 관계없이 제대로 동작하기 때문에 테스트 스펙을 작성하기도 편해졌습니다. manualChangeDetection 함수를 활용하면 기본 변화 감지 로직을 비활성화시키고 변화 감지 로직을 수동으로 조작할 수 있습니다.

예제와 함께 자세한 내용을 확인하려면 Angular Material 테스트 하네스 문서를 참고하세요!

진행상황 표시방식 개선

애플리케이션을 빌드할 때 표시되는 화면을 개선했습니다. 이제 Angular CLI 실행결과가 좀 더 보기 좋게 표시됩니다.

언어 지원 서비스 개선

Angular 언어 지원 서비스는 개발 효율성을 향상시키는 것 외에 개발을 좀 더 재미있게 만드는 점에서도 유용합니다. 지금까지는 이전 버전인 View Engine으로 동작하고 있었지만 이제부터 이 기능이 Ivy 기반으로 동작합니다. 이제 이 기능은 좀 더 다양하고 정확하게 동작합니다.

언어 지원 서비스는 TypeScript 컴파일러와 비슷하게 템플릿에 사용된 객체의 제네릭 타입을 추론하는 용도로 사용됩니다. 아래 화면을 예로 들면 템플릿에서 반복되는 객체가 문자열이라는 것을 확인할 수 있습니다.

언어 지원 서비스의 효율성을 더 높일 수 있는 기능은 아직 개발 중입니다. 다음 버전에는 이 기능을 반영할 수 있길 바라면서 진행 소식을 먼저 공유해드립니다.

핫 모듈 갱신 기능 지원

Angular는 핫 모듈 갱신(Hot Module Replacement, HMR) 기능을 제공하고 있긴 했지만 이 기능을 활성화하려면 환경설정과 프로젝트 코드를 일부 수정해야 했기 때문에 Angular 프로젝트에 간단하게 도입하기 어려웠습니다. Angular 11 버전부터는 Angular CLI로 ng serve 명령을 실행할 때 간단하게 이 기능을 활성화할 수 있습니다. 이렇게 사용하면 됩니다:

ng serve --hmr

이 명령을 실행하고 로컬 서버가 시작되면 HMR 기능이 활성화되었다는 메시지가 로그에 출력됩니다:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

webpack을 사용하는 환경에서 HMR을 활성화하려면 webpack 문서를 참고하세요.

이제 개발하는 동안 컴포넌트, 템플릿, 스타일 코드를 변경하면 이 내용이 실행 중인 애플리케이션에 즉시 반영됩니다. 화면 새로고침도 이제 일어나지 않습니다. 폼에 입력했던 데이터는 그대로 유지되며, 스크롤했던 위치도 그대로 유지됩니다. 개발 생산성이 더욱 증가하길 바랍니다.

더 빨라진 빌드

일부 코드를 변경하면서 빌드 싸이클을 빠르게 단축했습니다.

  • 의존성 패키지를 설치하는 동안 실행되는 ngcc update 성능이 2~4배 빨라졌습니다.
  • TypeScript v4.0을 활용하면서 컴파일 속도가 빨라졌습니다.

webpack 5 일부 지원

현재 Angular 팀은 webpack v5를 테스트해보고 있습니다. 아직까지는 모듈 병합(module federation)과 같은 webpack v5 일부 기능만 사용해볼 수 있지만, 이후에는 webpack v5를 활용해서 이런 이점을 얻을 수 있을 것입니다:

  • 삭제되지 않는 디스크 캐시를 활용해서 빌드 시간을 줄일 수 있습니다.
  • cjs 트리 셰이킹을 활용해서 빌드 결과물의 용량을 줄일 수 있습니다.

하지만 아직 이 기능들은 테스트 중이기 때문에 당장 운영용 애플리케이션에 도입하는 것은 권장하지 않습니다.

그래도 Angular 프로젝트에 webpack 5 버전을 적용하려면 package.json 파일에 아래 코드를 추가하면 됩니다:

"resolutions": {
     "webpack": "5.4.0"
}

다만, resolutions 프로퍼티는 npm이 지원하지 않기 때문에 yarn을 사용해야 합니다.

린트(linting)

이전까지는 Angular 프로젝트를 생성했을 때 TSLint를 기본 린트 툴로 함께 설치했습니다. 하지만 얼마 전부터 TSLint 운영자가 지원을 중단하며 ESLint로 대체할 것을 권장하고 있습니다. 그래서 Angular 팀은 typescript-eslint, angular-eslint, tslint-to-eslint-config를 개발한 James Henry와 함께 이 이슈를 정리했습니다! 이제 기존 TSLint 스택을 ESLint 스택으로 원활하게 전환할 수 있습니다.

Angular 11 버전부터는 TSLint와 Codelyzer를 사용하지 않습니다. 이 말은, 이제 Angular 프로젝트에 기본으로 적용되는 린트 툴이 없어진다는 이야기입니다.

Angular 프로젝트에 적용된 TSLint를 ESLint로 전환하는 방법은 angular-eslint 공식 가이드 문서를 참고하세요.

묵은 때 제거

이번 버전부터 IE9, IE10, IE 모바일 지원이 중단되고 IE 중에서는 IE11만 유일하게 지원하는 버전이 될 것입니다. 지원이 중단되는 것으로 계획되었던 API가 일부 반영되었으며, 새로운 지원 중단 목록이 추가되기도 했습니다. 지원이 중단되는 기능을 사용하고 있지 않은지 꼭 확인해 보세요.

로드맵

또 현재 우선순위에 대한 소식을 계속 알려드리기 위해 Angular 로드맵도 최신화했습니다. 이 글에 언급한 항목 중 아직 개발 중인 기능은 로드맵에도 추가되어 있습니다. Angular 팀은 큰 공수가 들어가는 작업을 점진적으로 진행하려고 노력하고 있으며, 개발자들의 피드백도 정식 버전 출시 전에 빠르게 받아보려고 합니다.

또한 Angular 커뮤니티의 Lukas Ruebbelke와 지속적으로 협력하면서 개발자들에게 좀 더 나은 정보를 제공하기 위해 프로젝트 내용 일부를 수정하기도 했습니다.

Angular 11로 업데이트하는 방법

이전과 마찬가지로 Angular 애플리케이션을 새 버전으로 바꾸려면 Angular CLI 명령을 실행하면 됩니다:

ng update @angular/cli @angular/core

새 버전에 변경된 내용을 확인하려면 update.angular.io 문서를 참고하세요. 언제나 그렇듯 메이저 버전은 하나씩 올려야 버전 업그레이드 과정을 원활하게 진행할 수 있습니다.

이번에 도입된 기능들이 여러분들에게 도움이 되기를 바랍니다. 그리고 이 버전을 어떻게 생각하는지 Twitter에 남겨주세요!

댓글
댓글쓰기 폼
공지사항
Total
417,576
Today
1
Yesterday
145
링크
«   2020/11   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
글 보관함