Angular2를 샅샅이 톺아 나가면서 살펴봤습니다.

1. Angular2 톺아보기

2. Angular1을 만
들고 보니..
- 양방향 바인딩(Two-Way-Binding) 의 성능
문제
- 의존성 주입(Dependency Injection)의 불
편함
- Directive 문제
- Scope 상속 문제
- 서버사이드 렌더링을 할 수 없는 문제

3. 양방향 바인딩의 성능문제
모든 model 들은 $watch list에 등록이 됨
$scope.$apply() 실행
$digest loop 수행

4. 양방향 바인딩의 성능문제
$digest loop는 $watch list 의 데이터들에 대해 dirty check
를 하는 로직
dirty check를 하는 시간이 길어질 수록 DOM rendering
시간은 늘어남
$watch list의 갯수가 늘어나면 치명적인 성능문제를 일으 킬
수 있음
$scope.$apply() 가 발생하면 이 $digest loop는 계속해서
일어남으로, $http를 통해서 데이터를 받아와 ng-repeat로
데이터를 뿌려줄 때등, 많은 경우에 해당 loop를 수행하게 됨
결국 복잡한 web application일수록 해당 현상은 심각하게
일어남

5. 의존성 주입(Dependency Injection)의 불편함
Angular1의 의존성 주입은 파라미터의 이름으로 수행함.
하지만 난독화 할 경우 파라미터의 이름을 찾지 못해 안습(...) 작
업이 멈추는 현상이 발생 현재는 아래와 같은 패턴이 일반화 되어
있다.
애초에 의존성 주입 방법이 파라미터 방식이 아니었다면 좀 더 깔
끔한 코드를 볼 수 있지 않았을까..

6. 의존성 주입(Dependency Injection)의 불편함
Angular1의 의존성 주입 선언 방법은 하나로 통일 되어있다.
그런데 Angular1에서의 의존성 종류 ( provider, factory, value,
service, constant ) 가 많음에도 결국은 위의 하나의 방법으로 선
언하기 때문에 딱히 다른 의존성이라고 생각하기 힘들다.
Angular1을 사용하는 사람중에 저 모든것을 구분해서 사용하는
사람이 얼마나 될까?
이런 의존성은 정리가 좀 필요하다.

7. 직관적이지 못한 scope 상속 문제
위의 두 ng-model의 obj는 같은 scope에 위치 해 있을까요? NO
ng-if로 인해 새로운 scope가 생성
ng-if 뿐 아니라 ng-repeat 등 모든 동작에서 새로운 scope를 생성
한다
scope 생성시 필수적으로 부모 scope를 상속하지만 부모 scope
의 변수를 함께 공유하며 사용하는 건.. 음…

8. server-side rendering 지원 문제
- server-side rednering의 엄청난 속도 지원 불가
- (물론 server-side rendering을 지원하지 않는 angular 코드가 간결할진 모르지만, 트렌드를 지원하지 못
한다는 점은 어쩔 수 없는 단점)
- SEO( Search Engine Optimize, 검색엔진 최적화) 지원 불가

9. Angular1 vs Angular2

10. Angular1의 단
점을 보완한
Web Framework
- Component 기반으로 변경
- 단방향 바인딩 지원
- 간단한 architecture
- ServerSide 랜더링 지원
= ReactJS?- 추가 ) TypeScript 지원
- 추가 ) Redux / RxJs 연동

11. Angular2의 구조적 변화
- $scope 삭제
- dependency를 service로 통합
- MVC 모델 변경

12. Module
application
AppModule
A
Module
B
Module
C
Module
component service
value fn

13. Component
- Angular1의 controller + view
- Angular2에서의 view의 단위
- 자체적인 life cycle을 가지고
있음

14. 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>

15. template
- meta data의 selector와
template의 특정 tag를 연결,
자식 component로 연결 가능

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

17. Service
- Application이 필요로 하는 function,
value, data 등을 정의 해 놓은 것
- 각종 Component에서 공통적으로 사
용하는 내용 및 Component내에서
메인 로직외의 내용을 따로 정리하고
싶을때 사용
- Angular1에서의 service군 (factory,
value, service, provider, constant)을
하나로 통합한 내용

18. Dependency-Injection
Service를 Component에 주입하는 방법
1) Component의 constructor의 파라미터로 연동하는 방법 본격 파라미터 덕후
1) Component metadata 변수인 provider로 연동하는 방법
1) Module의 metadata 변수인 provider로 연동하는 방법

19. TypeScript - MicroSoft에서 만든 스크립트 스크립트계의 IE
- 자바스크립트가 대형 프로젝트에 어울리
지 않는다는 이유로 제작
특징)
- 변수별로 type이 존재하며, interface를 통
해 type 선언이 가능
- 기본적으로 객체지향 언어로 개발 되었다
- 상당히 C#스러운 문법을 구사..
- ES6를 통해 자바스크립트 자체적으로 많
은 부분 개선 되었기 때문에 지속적으로
필요한가는 의문

20. Typescript Compile
TypeScript는 기본적으로 자바스크립트가 아니다. 자바스크립트로 C#을 구현했으니까
파일 확장자도 *.ts 로 다르기 때문에 스크립트로 사용하려면 자바스크립트 형태로
의 변환이 필요하다.
angular2에서는 기본적으로 컴파일러 모듈을 지원한다. (@angular/compiler)
typescript-compiler 모듈은 npm 모듈로 별도로 존재한다.
compile option은 tsconfig.json 을 통해 정의 가능하다.

21. Typescript 맛보기

22. Why Typescript ?
Angular2는 Typescript, Javascript, Dart를 이용해 개발 가능
공식사이트도 그렇고 Typescript를 활용한 예제들이 많음
Angular1이 대형 프로젝트에서 약점을 많이 보여 TypeScript를 이용해 상당부분의
약점들을 해결하고자 함.
ES6보다 좀 더 OOP스러운 문법들을 많이 지원함 ( interface, 상속, 각종 type )
google내 angular팀이 typescript를 상당히 선호한다는 말도 있음. 결국 개발자 마음

23. Code로 확인하
는 Angular2
Application
- 상당히 주관적으로 개발해 본 내용이므로
다르게 개발 가능
- 상당히 불편하게 개발하는 내용을 포함하
고 있을지도 모르니 주의

24. 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 이용할 때 설정파일

25. package.json
주요 모듈
- @angular 계열
- gulp 계열
- typescript 계열
- rxjs 모듈
- systemjs 모듈
- lite-server 모듈

26. tsconfig.json