Coding Log


Angular Framework 포스팅을 하기 전에

본 카테고리는 구글에서만든 javascript framework인 Angular에 대해 작성한다.

Typescript나 Dart로 개발할 수 있으며 본 블로그의 포스팅에서는 Typescript를 이용해 작성하도록 하겠다.

튜토리얼은 공식 홈페이지에 잘 나와있다.

참고 Angular 공식 사이트

Angular란 무엇인가

angular-card

Angular는 위에서 언급했듯 구글에서 만든 모바일/데스크톱 Framework이다.

Angular에 대해서 조금이라도 서치해보았다면 AngularJS 에 대해서도 접해보았을 것이다.

AngularJS는 구글의 미스코 헤브리(MiŠko Hevery)가 시작한 개인 프로젝트로 많은 관심속에 구글의 공식 프로젝트로 승격된 프로젝트다.

프로토타입 혹은 소규모 프로젝트를 제작하는 데 있어 빠르기로 유명한 MEAN 스택 중 하나로 Front-End를 담당하고 있으며, 2014년 Angular 2가 발표되었으며 2016년 정식 버전인 Angular 2.0.0이 출시 되었다.

참고 MEAN Stack은 아래와 같이 구성되어 있다.
M ongoDB
E xpress
A ngularJS
N ode.js

위와 같은 역사를 가진 Angular의 특징은 아래와 같다.

Component 기반 개발

Angular는 Component를 기반으로 개발 자체의 생산성을 높이고, 대규모 애플리케이션에 걸맞는 구조를 형성한다.

기존의 AngularJS에서 Controller 중심의 개발이었던 것과 차이점을 가지고 있으며 Component가 Controller의 역할을 완전히 대체하였다.

Typescript 채택

Angular의 주력 언어는 Typescript이며, 이 Typescript는 마이크로소프트에서 만든 Javascript의 superset 언어이다. superset이므로 당연하게도 Javascript 문법을 그대로 사용할 수 있으며 ES6, ES7과 같은 최신 ECMA Script의 표준도 지원할 수 있다.

고성능 프레임워크

Angular는 모바일 환경을 목표로 두는 프레임워크이기 때문에 적은 용량으로 더욱 빠르게 프레임워크를 로딩하기 위한 튜닝을 진행하고 있다.

대표적인 방식으로 Lazy Loading 이 있으며, AngularJS에 비해 로딩시간은 2.5배 렌더링 성능은 4.2배 증가하였다.

참고 Lazy Loading : 애플리케이션 실행시 모든 모듈을 로딩하는 것이 아니라 현재 페이지에 필요한 부분의 모듈만 로딩하는 방식

AoT Compile

AoT Compile은 Ahead of Time compilation의 준말로 사전 컴파일 방식을 말한다.

이 방식은 HTML 템플릿과 CSS 파일을 컴파일하여 코드로 삽입하는 방식으로 Angular에서 지원하는 특정 지시자를 브라우저 레벨에서 실행하지 않고 미리 실행가능한 Javascript 코드로 변환해놓는다.

위와 같은 과정을 통해 Angular는 템플릿을 렌더링할 때 컴파일하지 않고 바로 화면을 보여줄 수 있게 된다.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다