Angular 소개
- Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스킓트 프레임워크
- 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분 기능을 갖추고 있다.
- TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경
Angular VS AngularJS
- Angular는 정적 타이핑 ECMAScript6 스펙을 충족시키기 위해 TypeScript로 재작성
- Controller와 $scope 기반 개발 --> 컴포넌트 기반 개발(CBD, Component Based Development)로 전환
- angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하며 API 또한 단순화
- 선택적 바인딩을 지원하고 디렉티브와 서비스 의존성주입은 간소화
- 주력 개발 언어로써 TypeScript를 도입, 대규모 개발에 적합한 정적타입과 인터페이스 제네릭 등 타입체크 지원 기능
- ECMAScript6에서 새롭게 도입된 모듈, 클래스 등과 ECMAScript7의 데코레이터를 지원
- 강력한 개발환경 지원 도구인 Angular CLI를 제공
- 그냥 AngularJS와 Angular는 후속버전이긴 하지만, 호환성이 없는 새로운 프레 워크로 이해
Angular 장점
- 개선된 개발 생산성
- 컴포넌트 기반 개발
- Angular에서는 컴포넌트가 개발의 중심 (CBD: Component Based Development)
- 개발 생산성을 향상시키며 대규모 애플리케이션에 적합한 구조
- TypeScript의 도입
- 2012년 MS에서 발표한 오픈소스로 강력한 정적 타이핑
- ECMAScript6(ECMAScript 2015)의 클래스, 모듈 등
- ECMAScript7의 데코레이터를 지원
- 다양한 도구를 지원
- IntelliSense
- 코드 어시스
- 타입 체크
- 리팩토링
- 명시적 적적 타입 지정은 코드의 가독성을 향상
- 모듈, 클래스, 인터페이스 등 강력한 OOP지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 돕는다.
- JavaScript, Dart 도 작성할 수 있다. 하지만 커뮤니티에서는 TypeScript를 사용
- 개발 도구의 통합 및 개발 환경 구축 자동화
- Angular CLI를 통한 간편한 개발 환경 구축을 지원
- 폴더 구조, 기본파일 생성, 빌드를 위한 설정, 디펜던시, 트랜스 파일러, 번들러 등
- 성능의 향상
- Digest Loop로 인한 성능저하 문제의 해결
- AngularJs의 단점 중 대표적인 것이 Digest Loop(Model의 변화를 View에 반영시키는 과정)로 인한 성능저하
- 양방향 바인딩을 위해서는 watcher가 추가되어야 하고 watcher에 대해 Digest Loop가 실행되기 때문에 watcher가 늘어날수록 성능은 저하
- AoT 컴파일 (ahead of time compilation)
- AoT컴파일은 사전 컴파일 방식을 의미
- ngIf, ngFor, ngSwitch와 같은 구조 디렉티브(Structual directive)를 브라우저가 실행 가능한 코드로 변환하여야 하는데, 이러한 과정을 런타임에 실시하지 않고 사전에 컴파일하여 실행 속도를 향상시키는 기법
- AoT컴파일의 또 다른 이점은 JIT(just-in-time)컴파일러를 필요로 하지 않기 때문에 프레임워크 크기를 기존 Angular보다 50%정도 줄일 수 있다는 것
- Lazy Loading
- 애플리케이션에서 모든 모듈을 한꺼번에 로딩하지 않고, 필요한 시점에 필요한 모듈만을 로딩하는 방식 (로딩 속도 향상)
- 지연로딩은 SPA의 태생적 단점을 극복하기 위한 하나의 대안
- 코드 최적화
- 참고
출처 : ourcstory.tistory.com/440?category=630698