[Angular] Basic

Angular Basic

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의 태생적 단점을 극복하기 위한 하나의 대안
  • 코드 최적화

• 참고

  • http://poiemaweb.com/angular-basics