Angular2 (1)

angular 2 정의

ECMA 스크립트

최초 스크립트, 브라우저 언어인 자바스크립트와 Jscript 간의 차이를 줄이기 위한

공통 스펙 제안으로 출발됨(1997, EMCA-262) 즉 표준화.

ECMA International 은 전세계적인 표준 기관. 

c#, JSON, Dart 를 포함한 많은 언어의 표준 관리중,

ES3부터 브라우저들의 공통 지원이 시작되고

ES5부터 JSON 지원, 2015년에는 ES6에서 모듈 및 클래스를 지원,

ES7  부터는 (2016)타입스크립트를 지원한다.

Angular 2 생태계의 중심은 표준화된  ECMA 스크립트,

TypeScript : 자바스크립트 + 타입

MS에서 개발한 자바스크립트의 상위집합 언어

표준(ECMA)를 따르는 차세대 자바스크립트,

Angular 2가 채택함.

명시적인 타입 제공, 컴파일 단계에서 오류 제거 가능,

MS에서 만든 덕에 인텔리 센스가 지원됨.

현재 브라우저들은 ES5까지 지원하고 있기 떄문에

트랜스 파일러가 필요.

트랜스 파일러 : ES2015(ES6) 이후 문법에 대해서 자바스크립트, ES5 형태로 변환시키는 도구

트랜스파일러 = TSC

Web 프론트엔드에서의 환경 변화

jQuery(library) -> MVC 프레임워크(Angular JS 1.0 , Backbone.js) -> Component(Angular 2)

그럼 Angular 1은 무엇인가.

Angular 1은 구글에서 만든 오픈소스 웹 어플리케이션 MVC Framework 이다.

타입스크립트를 사용하여 OOP를 지원하고 명확한 형정의 제공, 프리컴파일링이 필요하다.

PC보다는 모바일 앱을 위한 프레임워크에 가깝다.

1은 JS기반이고 자바스크립트의 한계점을 넘어서기 위한 2는 새로 만들었다고 볼수 있다.

모바일을 고려한 프레임워크이기 떄문에 적은 대역폭으로 이용할 수 있도록 했다.

Angular 1에 비해 빠른속도를 가지고있다.

서비스가 컴포넌트를 호출하고

속성값들을 바인딩하여 Template 에 제공하며, 이벤트를 바인딩 하여 컴포넌트로 다시 제공

Component란 ?

기능 명세에 의한 개발,

명세에 따른 배포, 조립 가능한 독립 구성단위, 모듈화.

컴포넌트는 인터페이스만을 통해서 접근

관심사 분리의 개발방법이기 때문에 결합도가 낮다.

재활용가능한 컴포넌트라는점. -> 생산성 향상

//

커스텀 엘리먼트, 태그로 명시되어 사용가능하다.

컴포넌트는 따라서, 태그를 만든다고 쉽게 생각하면 된다.

<hello-Component></hello-Component>(selector 명시)

컴포넌트 중심의 Angular 2,

Angular 2는 컴포넌트 중심이다.

컴포넌트는 Template과 로직을 포함하고 있다.

컴포넌트는 하나의 독립적인 모듈 결합을 가진다.

Module 이란?

Angular 는 많은 모듈로 이루어져있다.

Module 은 다른 모듈에 의해 Import 될수 있다.

@angular/core (angular 핵심 모듈)

@angular/Common, @angular/router, @angular/http 등등..

참조 : http://www.slideshare.net/mrg7211/angular2-62010576

'

서비스란?

재사용이 빈번한 기능들을 서비스로 정의한것.

왜 써야하나.

코드의 일관성 : 개인 스타일의 편차가 적게됨.

구조적 (MVC패턴)

코드량의 감소, 이벤트 바인딩과 뷰 업데이트 코드 등

코드의 재사용성

양방향 데이터 바인딩

템플릿 화 시켜서 사용할 경우, 퍼블리싱 해야하는 경우와의 최대한의 독립 가능, -> 웹개발자가 서버처리 개발에만 집중가능.

공지 사항이 여러개 있다면, 반복해서 같은 데이터를 바인딩 해야한다면.

Shim,.js / polyfill - > 오래된 브라우저가 사용하는 방식에 맞게 바꾸어주는 녀석