티스토리 뷰

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

 

한국시각으로 2021년 5월 13일 오전에 Angular 12.0.0 버전이 릴리즈 되었습니다.
벌써 Angular 공식 가이드 문서에도 새 버전이 반영되었습니다 :)

 

이번 릴리즈 노트에는 어떤 내용이 있는지 살펴봤습니다.

 


 

샌프란시스코의 알라모 스퀘어 공원 - Minko Gechev

드디어 돌아왔습니다, 여러분. Angular v12가 새로 릴리즈 되었다는 기쁜 소식을 빠르게 전해드리겠습니다.

 

업데이트된 내용을 살펴보기 전에 Angular가 걸어온 길을 잠시 돌아봅시다. 현재 Angular의 핵심은 Ivy이며 이 렌더링 엔진은 특정 플랫폼에 종속되지 않습니다. 그리고 지난 몇 번의 릴리즈 동안 저희는 Angular 생태계를 기존 렌더링 엔진에서 Ivy로 전환하기 위한 작업을 해왔습니다. 이 과정을 저희는 "Ivy Everywhere"라고 불렀습니다.

 

이 과정을 거치면서 이런 내용들이 변경되었습니다.

Ivy Everywhere 달성하기

Angular가 다음 단계로 나아가기 위한 중요한 작업이 드디어 끝났습니다. 이제 View Engine 지원이 완전히 중단되었습니다.

  • View Engine 지원이 중단되었기 때문에 다음 메이저 릴리즈에는 View Engine이 제거될 것입니다.
  • View Engine 기반으로 구현된 라이브러리는 개발자가 별도로 작업하지 않아도 Ivy 앱에서 동작합니다. 하지만 라이브러리 개발자들은 이제 Ivy로 전환할 준비를 시작해야 합니다.

자세한 내용은 이 블로그 글에 작성해두었습니다. 라이브러리 개발자분들이나 이 내용에 관심있는 분은 확인해 보세요.

오래된 i18n 메시지 ID 형식 버리기

지금까지는 i18n 시스템에 오래된 메시지 ID 형식들이 사용되고 있었습니다. 이 형식들은 공백 문자를 사용하거나 템플릿 형태를 조작할 때, ICU 표현식을 사용할 때 제대로 동작하지 않는 경우가 많았습니다. 이 문제를 해결하기 위해 저희는 이 형식들을 버리기로 결정했습니다. 이제는 더 유연하고 직관적인 새 메시지 ID 형식을 사용합니다. 공백 문자가 맞지 않아서 번역이 제대로 적용되지 않는 문제는 이전보다 줄어들 것이고, 번역 작업을 다시 해야 하는 스트레스도 함께 줄어들 것입니다.

 

Angular 11 버전으로 프로젝트를 생성하면 이미 새로운 메시지 ID 형식이 자동으로 적용되고 있습니다. 이보다 이전 버전으로 만든 프로젝트에서 번역 파일을 마이그레이션 하려면 이 문서를 참고하세요.

Protractor 대체하기

Angular 팀은 커뮤니티와 함께 논의하며 Protractor를 대체하는 작업을 준비하고 있습니다. 그리고 지금은 RFC로 접수된 피드백들을 검토하고 있지만, 아직은 대체할 툴을 확정하지 못했습니다. 그래서 새 프로젝트를 만들 때 사용할 툴을 고정한 상태는 아니며, 괜찮은 서드파티 솔루션을 Angular CLI와 함께 사용할 수 있도록 옵션 형태로 제공하고 있습니다. 현재는 Protractor 대신 Cypress, WebdriverIO, TestCafe를 이런 형태로 사용할 수 있습니다.

Null 병합(Nullish Coalescing)

TypeScript 코드에서 Null 병합 연산자(??)를 사용하면 코드를 더 깔끔하게 작성할 수 있습니다. Angular v12 버전부터는 이 기능을 템플릿에서도 사용할 수 있습니다!

 

템플릿에 이런 코드가 있다고 합시다:

{{age !== null && age !== undefined ? age : calculateAge() }}

이제 이 코드는 이렇게 작성할 수 있습니다:

{{ age ?? calculateAge() }}

이 기능은 새 버전에서 바로 사용할 수 있습니다!

Angular 학습하기

Angular 팀은 개발자들이 Angular를 학습하는 과정을 개선하기 위해서도 힘쓰고 있습니다. 그래서 가이드 문서도몇가지변경된 내용이 있습니다. 실제로 활용할 수 있는 내용을 추가해서 컨텐츠 프로젝션(Content Projection) 가이드 문서를 새로 추가하기도 했습니다.

 

또 다른 이슈도 있었습니다. Angular 팀은 개발자들이 직접 문서를 수정할 수 있냐는 질문을 수도 없이 받았습니다. 그래서 이제는 직접 가이드 문서를 개선하고 싶은 분들을 위해 컨트리뷰터 가이드를 추가했습니다.

하나 더 있습니다. 이전 릴리즈에는 에러 메시지와 관련된 가이드 문서와 영상 자료를 추가했습니다. 이 내용은 에러를 디버깅하는 데에 큰 도움이 된다는 피드백을 커뮤니티로부터 받았습니다. 아직 보지 못했다면 어떤 내용이 있는지 직접 확인해 보세요!

스타일 지정방식 개선

Angular v12 버전부터는 Angular 컴포넌트가 인라인 Sass를 지원하기 때문에 @Component 데코레이터 styles 안에 Sass 코드를 직접 작성할 수 있습니다. 이전까지 Sass는 Angular 컴파일러를 거쳐야만 사용할 수 있었습니다. 하지만 이제는 angular.json파일에 "inlineStyleLanguage": "scss"를 추가하면 바로 사용할 수 있습니다. 새 프로젝트를 만드는 경우에도 물론 사용할 수 있습니다.

 

Angular는 v11.2 버전부터 Tailwind CSS를 지원하고 있습니다. Tailwind CSS를 사용하려면 npm 패키지를 설치하고 프로젝트에 tailwind.config.js 파일을 생성하면 됩니다. 이제 Angular 안에서 Tailwind를 자유롭게 사용할 수 있습니다.

 

Angular CDK와 Angular 매터리얼은 내부적으로Sass의 최신 모듈 시스템을 사용하고 있습니다. 애플리케이션이 Angular CDK나 Angular Material을 사용하고 있다면 node-sass 패키지가 아니라 sass 패키지를 사용하고 있는지 꼭 확인해 보세요. node-sass 패키지는 현재 관리되고 있지 않으며 새로 추가된 Sass 스펙을 반영하고 있지 않습니다.

 

그리고 Angular CDK와 Angular 매터리얼은 모두 @use 문법을 사용할 수 있는 형태로도 API를 제공하고 있습니다. 직접 사용하는 방식과 비교해볼 때 API를 사용하는 방식이 다를뿐이지 동작은 같지만, 좀 더 명확하고 이해하기 쉬운 형태로 사용할 수 있습니다. 그리고 이 내용을 반영하기 위해 material.angular.io 문서도 완전히 새롭게 개편되었습니다. 이전보다 자세한 설명과 설계 의도, API를 확인할 수 있습니다.

 

ng update 명령을 실행하면 Angular v12 버전으로 전환하면서 Angular CDK와 Angular 매터리얼 코드도 새로운 Sass API 형태로 자동 전환됩니다. 이 명령을 실행하면 Angular CDK와 Angular 매터리얼이 사용하는 Sass @import 구문이 @use로 변경됩니다. 어떻게 변경되는지 예제를 확인해 보세요.

또 다른 기능들

이번 릴리즈에 변경된 내용 중에서 놓치면 안되는 것들을 더 살펴봅시다:

  • ng build 명령이 운영용을 기본으로 빌드하도록 변경되었습니다. 이전보다 빌드 과정이 간단해졌으며 개발용 빌드가 운영 환경에 배포되는 사고를 방지할 수 있습니다!
  • 엄격한(strict) 모드가 기본값이 되었습니다. 엄격한 모드를 사용하면 앱이 실행될 때 발생할 수 있는 에러를 개발 단계에서 미리 잡아낼 수 있습니다. 엄격한 모드에 대해 자세하게 알아보려면 이 문서블로그 글을 참고하세요.
  • 언어 지원 서비스(Language Service)가 Ivy 기반으로 전환되었습니다. 언어 지원 서비스를 활용하면 코드 자동완성, 에러 검출, 힌트, 코드 참조/이동 기능을 사용할 수 있기 때문에 생산성을 대폭 높일 수 있습니다. 자세한 내용은 이 영상을 확인하세요.
  • Angular v11 버전은 Webpack 5를 실험적으로 지원했습니다. 이제는 Webpack 5 정식 버전이 Angular에 사용됩니다.
  • TypeScript 버전이 4.2로 상향되었습니다. TypeScript 4.2 버전에 대한 내용은이 글을 참고하세요.

IE11 지원 중단

Angular는 살아있는 플랫폼이기 때문에 급격하게 진화하는 웹 생태계에서도 최신 상태를 유지하려고 합니다. 그래서 오래된 브라우저에 대한 지원을 중단하면서 최근에 더 좋은 방식으로 개선된 사용방법을 개발자들에게 제공하고 싶습니다.

 

이제 IE11에서 Angular v12 버전으로 개발된 앱을 실행하면 지원이 중단된다는 경고 메시지가 표시됩니다.
Angular v13 버전에서는 완전히 지원이 중단될 예정입니다.

 

이 논의가 어떻게 이루어졌는지 확인하려면 이 RFC를 참고하세요.

커뮤니티의 지원

Angular 커뮤니티에서 보내주신 지원은 Angular 프레임워크의 발전에 큰 도움이 되면서 결국 모든 Angular 개발자들의 개발 경험을 개선하고 있습니다. 감사합니다!

 

그 중 주목할만한 PR은 이런 것들이 있었습니다:

  • 네비게이션동작 중 불필요한 ngZone 경고 메시지 제거(#25839)
  • HttpClient에 메타데이터 지정 기능 추가(#25751)
  • 폼 유효성 검사기에 min, max 추가(#39063)
  • 옵저버블을사용할 때 APP_INITIALIZER 지원(#33222)

정리

Angular 팀은 다양한 분야에 걸쳐 커뮤니티와 협업하고 있습니다. 새로운 내용을 빠르게 확인하려면 저희 트위터를 팔로우하거나 유튜브 채널을 확인해 보세요.

 

Angular v12에 변경된 내용 중에서 가장 흥미있는 내용은 무엇인가요? 이 블로그 글에 댓글을 달아주세요.

 

훌륭한 Angular 커뮤니티의 일원으로 활동해주셔서 감사합니다.
다음 소식을 전해드릴때가지계속 훌륭한 앱을 만들어 주세요!

댓글
댓글쓰기 폼
공지사항
Total
446,874
Today
44
Yesterday
33
링크
«   2021/08   »
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 31        
글 보관함