! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Angular 9의 새로운 기능 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트

IT&개발 정보 Angular 9의 새로운 기능

페이지 정보

작성자 GrapeCity 작성일 2020-01-20 00:00 조회 6,376회 댓글 0건

본문

이 포스팅에서는 Angular 9의 새로운 기능을 살펴볼 것입니다. 대부분 버그 수정과 관련되어 있지만 몇가지 흥미로운 새로운 Angular 9 기능을 소개하겠습니다.


  1. 내장 Angular 기능
  2. Angular를 통한 성숙한 개발
  3. Angular 뷰 엔진 이해
  4. Angular Ivy의 장기적인 문제 해결
  5. Angular Ivy와 모바일
  6. 선택기 없는 지시어
  7. Angular 진단 개선
  8. Angular Ivy를 통한 국제화
  9. Angular 9의 DI 및 타입 안전
  10. Angular 코어의 종속성 주입 변화
  11. Angular 벤치 마크 (Angular 8.2.7 vs. 9.0.0-next.5)


Angular는 웹 및 모바일 애플리케이션을 구축하기 위한 가장 유명한 오픈소스 프레임 워크 중 하나입니다. Google이 개발한 Angular는 수년에 걸쳐 웹 앱을 구축하는 데 필요한 모든 도구와 컴포넌트를 포함하는 포괄적인 개발 프레임 워크로 발전했습니다. Angular는 6개월마다 릴리스되는 새로운 주요 Angular 버전과 함께 명확한 로드맵을 따릅니다. Angular 팀은 API를 변경할 필요가 없도록 (적어도 Angular 1에서 2만큼 크게 변경하지 않도록) 신중하게 작업하며, TypeScript 또는 JavaScript가 지원하는 최신 상태를 유지합니다.


우리는 Wijmo Angular UI 컴포넌트와 Angular 개발의 다른 측면에 대한 팁과 함께 다른 포스팅에서 Angular 8 을 다루었습니다 . 이 포스팅에서는 다운로드 시간에 부정적인 영향을 미치는 큰 번들 파일과 그에 따른 애플리케이션 성능에 대해 살펴 보겠습니다.


우리가 깊게 살펴볼 새로운 기능은 Ivy 컴파일러입니다. 우리는 Ivy가 하는 일과 미래에 중요한 기능인 이유를 설명 할 것입니다. (미리 약간의 스포를 하자면.. 대규모 번들 및 애플리케이션 성능과 관련된 일부 문제를 해결합니다.)


선택기없는 바인딩 및 국제화 지원을 포함한 몇 가지 새로운 기능에 대해 살펴 보겠습니다. 


마지막으로, Angular 8과 시험판 버전 Angular 9의 성능을 비교하기 위해 벤치 마크 테스트를 수행할 것입니다. 최신 Angular 9 Release Candidate (9.0.0.rc-9)가 최근에 게시되었으며 이 최신 릴리스를 포함하는 벤치 마크가 업데이트되었습니다. 



 


자바 스크립트 번들 및 성능


이전 Angular 버전에서 계속되었던 문제 중 하나는 상대적으로 크기가 큰 앱의 파일 크기였습니다. 보다 정확하게는 생성된 JavaScript 번들의 파일 크기입니다. Angular를 React 또는 Vue.js와 같은 다른 라이브러리와 비교해보면, Angular 앱의 크기가 훨씬 더 큽니다.


런타임에는 아마도 차이를 느끼지 못할 것입니다. Angular의 런타임 성능은 좋지만 간단한 앱이라도 비교적 클 수 있으므로 로딩 시간이 오래 걸릴 수 있습니다.


JavaScript 번들의 크기는 또 다른 문제를 암시하는데, Angular는 많은 내장된 개발자 도구가 포함된 완전한 프레임워크이고 다른 JavaScript 라이브러리는 컴포넌트에 더 중점을 두고 있기 때문에 Angular에 대해 더 배울 것이 있습니다.


이제 Angular팀은 이전 Angular 버전의 대용량 번들 파일에서 발생하는 문제를 완화하기 위해 무엇을 할 수 있을까요?


Angular ViewEngine 이해


Angular 8 이전에는 프레임워크가 브라우저에서 코드를 빌드하고 렌더링하기 위해 ViewEngine (VE)에만 의존했습니다. Angular 컴포넌트는 TypeScript 언어를 사용하여 작성됩니다. TypeScript는 JavaScript의 상위 세트이며, 컴파일러 또는 변환기를 사용하여 TypeScript를 브라우저에서 실행되는 JavaScript로 렌더링합니다. Angular는 역사적으로 ViewScript를 사용하여 TypeScript 코드에서 JavaScript로의 변환 작업을 수행했습니다.


Angular ViewEngine은 템플릿과 컴포넌트를 가져와서 브라우저에서 해석하고 표시할 수 있도록 일반 HTML 및 JavaScript로 변환합니다.



 


Angular Ivy는 오랜 문제를 해결합니다.


Angular 8과 함께 제공되는 가장 중요한 기능 중 하나는 옵트 인 Ivy 미리보기였습니다. Ivy는 Angular의 새로운 내부 빌드 및 렌더링 파이프라인입니다. 렌더러는 템플릿을 사용하여 Angular 컴포넌트에 입력한 지시 사항을 가져 와서 DOM (Document Object Model)을 변경하는 지시 사항으로 변환하는 엔진입니다.


Ivy 컴파일러는 숨겨져 있으며 ViewEngine을 Ivy로 대체해도 Angular 작업 방식은 변경되지 않습니다. 그러나 이 변경은 생성되는 코드에 큰 영향을 미칩니다.


Angular 8 미리보기를 통해 사용자는 Ivy로 이것저것 해볼 수 있습니다. Angular 9에서는 Ivy가 표준 렌더러입니다. 렌더러가 더 효율적이거나 구현하기 쉬운 경우 필요한 명령이 적어지기 때문에 코드를 더 적게 제공할 수 있으며 이것이 바로 Ivy의 목적입니다.


Ivy는 훨씬 작은 JavaScript 번들을 생성하므로 Ivy는 Angular 번들의 약점을 해결합니다. Ivy는 성능과 크기 측면에서 Angular 애플리케이션을 완전히 새로운 차원으로 끌어 올릴 수 있기 때문에 판도를 바꿔놓을 것입니다.


Ivy는 Angular의 사용 방식을 변경하지 않지만 앱 생성 방식을 변경합니다. Angular 팀은 Angular와 함께 제공되는 최신 JavaScript의 차등 로딩과 같은 계획에 중점을 두었습니다. 즉, 서로 다른 폴리필 번들이 만들어지고 함께 배포됩니다. 런타임시 특정 브라우저에 필요한 폴리필만 로드되므로 코드 다운로드 횟수가 줄어 듭니다.
 

*폴리필(Polyfill) :  개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인
 


 


Angular Ivy와 더 빠른 모바일 앱


스마트폰 및 기타 모바일 장치는 전세계 웹 사이트 트래픽의 약 절반을 차지합니다 . 이러한 모바일 장치의 상당 부분은 인터넷 연결 속도가 느린 위치에서 웹 페이지에 액세스합니다. 


개발자는 기존 앱을 재설계하여 다운로드 가능한 자산의 크기를 줄이고 모바일 사용자 경험을 향상시킬 수 있지만 이러한 과정은 어렵고 비용이 많이 들며 예상치 못한 프로젝트 위험을 가져올 수 있습니다.


JavaScript 번들의 크기를 줄임으로써 Ivy는 애플리케이션 시작 속도를 높이려는 개발자에게 개선의 대상이되었습니다.


Ivy를 업무에 투입


Angular 9에서는 새로운 Ivy 컴파일러가 기본값이 되므로 Ivy로 빌드 된 Angular 앱이 더 빠르고 효율적입니다.


Angular 8에서 Ivy는 선택 사항이므로 프로젝트 폴더의 tsconfig.json 파일에 다음 줄을 추가하여 명시적으로 활성화해야 했습니다.


"angularCompilerOptions": {  
  "enableIvy": true  
}


그런 다음 프로젝트 폴더 내에서 ngc 명령을 실행하여 컴파일러를 실행해야 했습니다.


node_modules/.bin/ngc


Angular 9에서는 Ivy 렌더러가 기본값이므로 tsconfig.json 파일에서 enableIvy 옵션을 설정할 필요가 없습니다.



 


선택기 없는 지시어


ViewEngine에서 사용 가능한 Angular 8 Ivy 미리보기에서 누락된 한 가지 기능은 선택기 없는 지시문을 기본 클래스로 사용하는 기능이었습니다.


Angular 9에서는이 기능이 Ivy에 추가되어 개발자가 Ivy 컴파일의 이점을 얻을 수 있지만 이전 기능 또한 놓치지 않습니다.


undecorated 기본 클래스에서 생성자를 상속하는 decorated 자식 클래스를 보여주는 다음 패턴을 확인해 보세요.


export class BaseDir {  
  constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {}  
}

@Directive({  
  selector: '[child]',  
})  
export class ChildDir extends BaseDir {  
  // constructor inherited from BaseDir  
}


Angular ViewEngine은 이미 이 패턴을 지원하지만, 여전히 Ivy의 초기 릴리스에서는 누락되었습니다. @directive 주석이 BaseDir 클래스를 지시문으로 식별하지 않으면 Ivy 컴파일러는 생성자 매개 변수에 대한 정보를 해석하지 않았습니다.


버전 9는 이제 모든 Angular 코드베이스에서 일관되게 기능을 제공합니다.


Angular 진단 개선


이전에는 Angular Compiler가 기본 TypeScript 진단 및 자체 내부 API 진단을 모두 생성했습니다. 그러나 TypeScript 진단은 API 진단에서 구현되지 않은 최근의 향상된 기능을 통해 이점을 얻었습니다.


Angular 9는 여러 형식을 지원하는 대신 모든 Angular TypeScript Compiler (ngtsc) 진단을 동일한 TypeScript 진단 형식으로 변환하여 프로세스를 단순화합니다.


버전 9는 스키마 레지스트리를 사용하여 DOM 바인딩을 확인함으로써 잠재적인 바인딩 문제로 앱이 실행되지 않도록 합니다. 또한 일관성 있는 템플릿 진단을 사용하여 설명성이 높은 오류 메시지 생성을 지원합니다. 

Angular Ivy를 통한 국제화



 

또 다른 Ivy 향상은 국제화와 관련이 있습니다.


Angular CLI를 사용하면 번역자용 파일을 만들고 여러 언어로 앱을 게시하는 데 필요한 대부분의 표준 코드를 생성 할 수 있습니다.


예를 들어, 영어로 된 이 HTML 제목을 가진 애플리케이션을 생각해보십시오.


<h1>Hello world!</h1>


“Hello world!”를 번역 가능한 텍스트로 표시하기 위해 i18n 속성을 추가 할 수 있습니다.  ( "i18n"은 "국제화(internationalization)" - "i"와 사이에 있는 18글자와 "n"의 줄임말입니다.)


<h1 i18n>Hello world!</h1>


i18n을 사용하도록 앱을 구성한 후 xi18n 명령을 실행하여 현지화(Localization) 가능한 텍스트를 파일로 추출할 수 있습니다 . 아래에서 생성된 messages.xlf 파일의 스니펫을 볼 수 있습니다. 


<trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca" datatype="html"><source>Hello World!</source><target/></trans-unit>


그런 다음 messages.xlf 파일을 아래 messages.es.xlf 파일로 복사한 후 번역된 내용을 사용하여 스페인어(es) 위치용 앱을 빌드하도록 변경할 수 있습니다. 


<trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca" datatype="html">  
    <source>Hello World!</source>  
    <target>¿hola, qué tal?</target>  
</trans-unit>


Angular 9에서 i18n 코드는 컴파일 타임 인라인 추가를 위한 더 나은 플랫폼을 제공하기 위해 리팩터링되었습니다.


Angular 코어의 종속성 주입 변화


이제 Angular 9에서 볼 수 있는 환영할 만한 업데이트 및 개선 사항을 살펴 보겠습니다.


Angular Core의 기능도 향상되었습니다. 예를 들어, Angular 9는 providedIn 값에 대한 종속성 주입 지원을 추가하였습니다.


@Injectable({  
  providedIn: 'platform'  
})  
class MyService {...}


Angular 9는 providedIn 속성에 대한 어휘를 확장하여 'platform' 및 'any' 범위도 포함합니다.


Angular 코어의 Type-safe 변경


Angular 9는 수정된 TestBed (Angular 앱의 기본 단위 테스트 API)를 제공하여 이전 get 함수를 새로운 inject 메소드로 대체합니다. get 메소드는 여전히 작동하지만 더 이상 사용되지 않습니다. TestBed.inject는 Angular 9에서부터 선호되는 옵션입니다.


// This code still works, but it's deprecated:  
TestBed.get(ChangeDetectorRef) // returns any

// inject() now replaces get():  
TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef


현재 TestBed.get은 Type-safe 하지 않아 TestBed.get을 수정하면 큰 변화가 생깁니다. 이러한 이유로 Angular 팀은 TestBed.inject로 교체하기로 결정했습니다.


언어 서비스 개선


Visual Studio Code 및 WebStorm 용 Angular 9 Language Service는 일부 개선된 기능을 활용할 수 있습니다. 예를 들어, URL 정의가 보다 일관성 있게 됩니다. 스타일 URL은 템플릿 URL과 같은 방식으로 확인됩니다.


빌드는 비용이 많이 들고 테스트 스크립트와 번들로 묶이면 안되기 때문에 Angular 9는 편리한 스크립트를 도입하여 배포 빌드가 레포지토리에서 발생할 필요가 없습니다. 언어 서비스 통합 테스트는 빌드될 때마다 Angular 배포를 다시 설치해야 합니다.


Angular Language Service에서도 진단 기능이 향상될 것입니다. 예를 들어, TypeScriptHost는 로그, 오류 및 디버그 방법으로 심각도 로깅을 구별할 수 있습니다. 또한 실제 파일을 가리키지 않는 템플릿 URL 및 스타일 URL은 이제 언어 서비스에 의해 진단됩니다.


앞으로 언어 속성 구현은 지시문 속성 열거 및 공통 논리 통합으로 더욱 향상될 수 있습니다.



 


API Extractor 개선


Angular는 별도로 진화하는 많은 소프트웨어 라이브러리에 의존합니다. 잠재적인 버그가 해결되고 이러한 라이브러리에서 새로운 기능이 구현됨에 따라 Angular 사용자는 놓칠 수 있습니다.


이에 대한 응답으로 Angular 9는 API Extractor를 최신 버전으로 업데이트합니다. Angular는 자동화 및 소프트웨어 테스트를 구축 할 수있는 오픈 소스 도구인 Bazel을 사용합니다. Bazel은 Angular 툴 체인에 의해 빌드 타임에 호출된 툴인 API Extractor를 참조합니다. TypeScript 컴파일러 엔진을 사용하여 프로젝트의 내보낸 API 표면을 감지하고 계약 보고서를 작성하며 누락된 내보내기 및 일관성이 없는 가시성을 지적하며 API 문서를 생성합니다.


가장 흥미로운 업데이트는 아니지만, 앱을 코딩할 때 프레임워크를 생산적이고 효율적으로 만드는 Language Service 및 API Extractor의 정기적인 개선과 같은 세부 정보입니다. 


Angular 8 vs. Angular 9 벤치마킹


Angular 8은 버전 Angular 7과 비교하여 이미 작고 빠른 앱을 허용했습니다. Angular 팀은 성능 개선 작업을 멈추지 않았기 때문에, 대부분의 사람들은 Ivy를 기본 컴파일러로 추가하여 Angular 9가 어떻게 비교될지 기다렸습니다. 


이 벤치 마크는 Angular CLI로 작성된 새로운 애플리케이션으로 실행되었습니다.


ng new angular-new


그런 다음 Angular CLI를 사용하여 Production 빌드 옵션으로 다시 빌드했습니다.


ng build --prod


벤치 마크는 다음 테스트 설정을 사용하여 Chrome이 기본 제공하는 심사 기능으로 수행되었습니다.


  1. 기기 : 모바일
  2. 심사 : 성과
  3. 조절 : 적용 느린 4G, 4x CPU 속도 저하


Angular 8.2.7


Angular 8.2.7을 사용한 Production 빌드 결과 ES2015 브라우저의 main.js는 246KB였습니다. 다음은 성능 결과의 스크린 샷입니다.



 


Angular 9.0.0- next.5


Angular 9.0.0-next.5를 사용한 빌드는 214KB보다 약간 작은 main.js 파일을 생성했습니다. Angular 8에서 13 % 향상되었습니다.


다음은 Angular 9.0.0-next.5 벤치 마크 결과입니다.



 


이 결과는 Angular 9의 Ivy 렌더러가 구현한 성능 향상을 일부 반영한 것입니다.


업데이트 : Angular 9.0.0-rc.9


이제 Angular 9 최종 출시 버전에 가까워졌으므로, 번들 크기와 성능이 변경되었는지 다시 한 번 살펴 보겠습니다.


앱의 전체 ES2015 번들 크기는 이제 177KB로 Angular 8 및 이전에 테스트한 Angular 9 시험판 버전보다 훨씬 작습니다. 다음으로 성능을 살펴 보겠습니다.



 


심사 점수가 이전보다 한 점 낮았지만 이것은 유의미한 성능 저하를 나타내지 않습니다.


Angular 8보다 향상된 성능과 훨씬 작은 앱 번들 크기로 인해, 대부분의 Angular 개발자는 최종 릴리스 후의 Angular 9를 사용하도록 앱을 업데이트하려고 합니다.


Angular의 미래


Angular 9를 통해 커뮤니티는 더 작은 고성능 애플리케이션과 더 나은 개발자 경험을 활용할 수 있습니다. 개발자는 이제 명확한 구문과 명확한 프로젝트 구조를 경험할 수 있습니다.


향후 어떤 변경 사항이 Angular에 통합될까요?


Angular 팀은 급격한 API 변경이 필요하지 않다고 말했습니다. 향상된 개발자 경험은 항상 기대됩니다. 앞으로는 컴포넌트와 지시문을 개발하는 데 더 많은 시간을 할애할 것이며, 그것들을 결합하는 데 더 적은 시간을 할애할 것입니다.


프레임워크에 구애받지 않는 웹 컴포넌트를 찾고 계신가요?



Wijmo : JavaScript 기반 Chart, Grid, Input, UI 컨트롤 

SpreadJS : JavaScript 기반 MS Excel 스프레트 시트


Ivy 컴파일러 지원


GrapeCity는 고객이 Angular v9를 사용할 수 있도록 새로운 Ivy Compiler를 지원하기 위해 Angular 팀과 긴밀히 협력하고 있습니다. Angular 팀은 모듈 패키징에 대한 몇 가지 권장 사항을 지원하고 일부 컴파일러 문제도 수정했습니다. 이 과정에서 GrapeCity 또한 Angular 팀의 권장 사항에 따라 Ivy Compiler에서 더 나은 구문 분석을 위해 Terser 축소기를 사용하도록 마이그레이션했습니다Wijmo가 Angular 9 및 Ivy Compiler를 지원 하는 방법에 대해 자세히 알아보세요.


몇 가지 Angular 데모도 살펴보세요.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.