[Angular] Angular 소개

Angluar

- SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크

- 정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공

- AngularJS에서 후속 버전의 Angular / Angular CLI를 제공

 

 

AngularJS ? Angular

- AngularJS의 Controller와 $Scope 기반 개발에서 Component 기반 개발로 전환됨. (CBD=Component Based Development)

- AngularJS의 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하고 API 단순화

- 선택적 데이터 바인딩인 양방향, 단방향을 지원하고 Directive와 Service, dependency Injection은 간소화

- Anuglar에서는 TypeScript를 도입해 정적 타입과 인터페이스, 제네릭 등 타입체크기능을 제공

- ECMAScript6의 모듈, 클래스 등과 ECMAScript 7의 decorator를 지원

- Angular CLI ( 개발환경 지원 도구)

 

* AngularJS에서의 $Scope는 양방향 데이터 바인딩의 핵심이자 view와 controller를 연결하는 개념

* Angular.module - Angular의 컴포넌트, 파이프, 서비스 등과 같이 관련된 요소들을 모은 하나의 단위이고 여러 모듈이 모여 하나의 애플리케이션을 구성한다.

* jQlite - jQuery의 기능을 수행할수 있음.

 

Angular Pros

1. 개발 생산성

- 컴포넌트 기반 개발 : 개발 생산성을 높이며 대규모 애플리케이션에 적합한 구조. Dependency Injection 지원을 통해서 기능에 따라 코드를 분리하고 재사용하기가 간편하다.

- TypeScript의 도입 : 정적 타이핑을 지원하고 높은 수준의 intellisense, code assist, type check, refactoring 등을 지원하고 가독성과 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다. 또한 모듈, 클래스, 인터페이스 등의 강력한 객체지향 프로그래밍 지원은 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있다.

- 개발 도구의 통합 및 개발환경 구축 자동화 : Angular CLI를 통해 간편한 개발환경 구축을 지원하고 간단한 명령어를 사용해서 프로젝트 생성에서 빌드, 테스트, 구성요소 추가 등을 간편하게 할 수 있다.

 

2. 성능개선

- digest loop(Model의 변화를 View에 반영시키는 과정)로 인한 성능저하를 개선해서 AngularJS보다 로딩 시간 및 렌더링이 2.5배 이상 빨라졋다.

- Ahead of Time(AOT) 컴파일이 가능하다. 그리고 Just-In-Time(JIT) 컴파일이 필요 없어 프레임워크 크기를 기존보다 50%정도 줄일 수 있다.

*ngIf,ngFor,ngSwitch와 같은 구조를 브라우저가 실행 가능한 코드로 변환해야 하는데 이러한 과정을 런타임에 실시하지 않고 사전에 컴파일하여 실행 속도를 향상시키는 기법.

- lazy loading으로 현재 페이지에서 불필요한 모듈까지 로딩하는 낭비를 방지하여 페이지 로딩속도를 높일 수 있다.

- Angular 코드 자체가 지속적으로 최적화 되고 있어 45KB 정도의 크기로 축소되었고 Mobile First를 지향하는 고성능 프레임워크를 표방하고 있는 만큼 코드 최적화가 잘 되어 있다.

 

Angular Cons

- 학습 분량이 많다. 예로들어서 TypeScript의 개념이랑 Angular가 지니고있는 여러가지 개념들도 학습해야한다.