Angular2 톺아보기

Angular1 을 만들고 보니 ..

- 양방향 바인딩 (Two-Way-Binding) 의 성능 문제

- 의존성 주입 (Dependency Injection)의 불편함

- Directive 문제

- Scope 상속 문제

- 서버사이드 렌더링을 할 수 없는 문제

양방향 바인딩의 성능문제

모든 model 들은 $watch list 에 등록이 됨

$scope.$apply() 실행$digest loop 수행

양방향 바인딩의 성능문제

$digest loop 는 $watch list 의 데이터들에 대해 dirty check 를 하는 로직

dirty check 를 하는 시간이 길어질 수록 DOM rendering 시간은 늘어남

$watch list 의 갯수가 늘어나면 치명적인 성능문제를 일으 킬 수 있음

$scope.$apply() 가 발생하면 이 $digest loop 는 계속해서일어남으로 , $http 를 통해서 데이터를 받아와 ng-repeat 로

데이터를 뿌려줄 때등 , 많은 경우에 해당 loop 를 수행하게 됨

결국 복잡한 web application 일수록 해당 현상은 심각하게일어남

의존성 주입 (Dependency Injection) 의 불편함Angular1 의 의존성 주입은 파라미터의 이름으로 수행함 .

하지만 난독화 할 경우 파라미터의 이름을 찾지 못해 안습 (...) 작업이 멈추는 현상이 발생 현재는 아래와 같은 패턴이 일반화

되어있다 .

애초에 의존성 주입 방법이 파라미터 방식이 아니었다면 좀 더 깔끔한 코드를 볼 수 있지 않았을까 ..

의존성 주입 (Dependency Injection) 의 불편함Angular1 의 의존성 주입 선언 방법은 하나로 통일 되어있다 .

그런데 Angular1 에서의 의존성 종류 ( provider, factory, value, service, constant ) 가 많음에도 결국은 위의 하나의 방법으로

선언하기 때문에 딱히 다른 의존성이라고 생각하기 힘들다 .

Angular1 을 사용하는 사람중에 저 모든것을 구분해서 사용하는 사람이 얼마나 될까 ?

이런 의존성은 정리가 좀 필요하다 .

직관적이지 못한 scope 상속 문제

위의 두 ng-model 의 obj 는 같은 scope 에 위치 해 있을까요 ? NO

ng-if 로 인해 새로운 scope 가 생성ng-if 뿐 아니라 ng-repeat 등 모든 동작에서 새로운 scope 를생성한다

scope 생성시 필수적으로 부모 scope 를 상속하지만 부모scope 의 변수를 함께 공유하며 사용하는 건 .. … 음

server-side rendering 지원 문제

- server-side rednering 의 엄청난 속도 지원 불가- ( 물론 server-side rendering 을 지원하지 않는 angular 코드가 간결할진 모르지만 , 트렌드를

지원하지 못한다는 점은 어쩔 수 없는 단점 )

- SEO( Search Engine Optimize, 검색엔진 최적화 ) 지원 불가

Angular1 vs Angular2

Angular1 의 단점을 보완한 Web Framework

- Component 기반으로 변경

- 단방향 바인딩 지원

- 간단한 architecture

- ServerSide 랜더링 지원

= ReactJS?- 추가 ) TypeScript 지원

- 추가 ) Redux / RxJs 연동

Angular2 의 구조적 변화

- $scope 삭제

- dependency 를 service 로 통합

- MVC 모델 변경

Moduleapplication

AppModule

AModule

BModule

CModule

component service

value fn

Component- Angular1 의 controller +

view

- Angular2 에서의 view 의 단위

- 자체적인 life cycle 을 가지고 있음

template- Component 의 표현 개체

- Component 에서 metadata 로 templateUrl, template 로 연결

- Angular 고유의 attribute들 지원 마크업을 깨트리는 아크마

<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><ul> <li *ngFor="let hero of heroes"

(click)="selectHero(hero)"> {{hero.name}} </li></ul><hero-detail *ngIf="selectedHero"

[hero]="selectedHero"></hero-detail>

template- meta data 의 selector 와

template 의 특정 tag 를 연결 , 자식 component 로 연결 가능

Data-binding

<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

Service- Application 이 필요로 하는

function, value, data 등을 정의 해 놓은 것

- 각종 Component 에서 공통적으로 사용하는 내용 및 Component내에서 메인 로직외의 내용을 따로 정리하고 싶을때 사용

- Angular1 에서의 service 군 (factory, value, service, provider, constant) 을 하나로 통합한 내용

Dependency-InjectionService 를 Component 에 주입하는 방법

1)Component 의 constructor 의 파라미터로 연동하는 방법 본격 파라미터 덕후

2)Component metadata 변수인 provider 로 연동하는 방법

3)Module 의 metadata 변수인 provider 로 연동하는 방법

TypeScript - MicroSoft 에서 만든 스크립트 스크립트계의 IE

- 자바스크립트가 대형 프로젝트에 어울리지 않는다는 이유로 제작

특징 )

- 변수별로 type 이 존재하며 , interface를 통해 type 선언이 가능

- 기본적으로 객체지향 언어로 개발 되었다

- 상당히 C# 스러운 문법을 구사 ..

- ES6 를 통해 자바스크립트 자체적으로 많은 부분 개선 되었기 때문에 지속적으로 필요한가는 의문

- 자체적인 lint 도 지원하다 OMG..

Typescript CompileTypeScript 는 기본적으로 자바스크립트가 아니다 . 자바스크립트로 C# 을 구현했으니까

파일 확장자도 *.ts 로 다르기 때문에 스크립트로 사용하려면 자바스크립트 형태로의 변환이 필요하다 .

angular2 에서는 기본적으로 컴파일러 모듈을 지원한다 . (@angular/compiler)

typescript-compiler 모듈은 npm 모듈로 별도로 존재한다 .

compile option 은 tsconfig.json 을 통해 정의 가능하다 .

Typescript 맛보기

Why Typescript ?Angular2 는 Typescript, Javascript, Dart 를 이용해 개발 가능

공식사이트도 그렇고 Typescript 를 활용한 예제들이 많음

Angular1 이 대형 프로젝트에서 약점을 많이 보여 TypeScript 를 이용해 상당부분의 약점들을 해결하고자 함 .

ES6 보다 좀 더 OOP 스러운 문법들을 많이 지원함 ( interface, 상속 , 각종 type )

google 내 angular 팀이 typescript 를 상당히 선호한다는 말도 있음 . 결국 개발자 마음

Code 로 확인하는 Angular2 Application

- 상당히 주관적으로 개발해 본 내용이므로 다르게 개발 가능

- 상당히 불편하게 개발하는 내용을 포함하고 있을지도 모르니 주의

Directory 구조

- app/ : application root 디렉토리- build/ : gulp 로 빌드 했을때 destination 디렉토리- typings/ : typing 으로 정의한 라이브러리들의 destination

디렉토리- bs-config.json : lite-server 로 웹서버 돌릴때 config 파일- gulpfile.ts : gulp config 파일- index.html : angular2 application 을 렌더링하는 root 파일- systemjs.config.js : systemjs config 파일- tsconfig.json : typescript-compiler 의 설정 파일- tslint.json : tslint 사용시 설정파일- typings.json : typing 이용할 때 설정파일

package.json

주요 모듈

- @angular 계열- gulp 계열- typescript 계열- rxjs 모듈- systemjs 모듈- lite-server 모듈

tsconfig.json