FEConf 2019 발표자료

1. Angular는 사실
어렵지 않습니다.
｜한장현

2. 발표자
• Angular Development with TypeScript 출간 (2016)
• Angular 컨트리뷰터
• angular.kr 한국어 공식 가이드문서 운영
• 오픈소스 프로젝트 운영
• ejv@1.1.5
• badak@0.0.9
2
github.com/han41858
han41858@gmail.com

3. 오늘의 목표
• 새 프로젝트에 쓸 프론트엔드 프레임워크를 골라보자.
4
Angular는 어려우니까…
어렵지 않습니다!!

4. Angular에 대한 오해

5. AngularJS? 6
v1.x.x
JavaScript
angularjs.org
+v2.x.x
TypeScript
angular.io
angular.kr
AngularJS Angular

6. 가파른 러닝 커브? 7
사람들의 생각 실제 러닝 커브
언어, 프레임워크와 무관

7. 알아야 할 것이 많다? 8
요즘 프론트엔드 개발에 필요한 기술

8. 알아야 할 것이 많다? 9
컴포넌트
추상화
HTTP 통신
상태 관리
axios
+
애니메이션 SSR라우터 PWA i18n
…

9. 양방향 바인딩이 기본이다? 10
단방향 바인딩이 기본입니다.
AngularJS 때 성능 문제가 있었고
Angular v2.0.0부터 바뀌었습니다.

10. 양방향 바인딩이 기본이다? 11
property binding + event binding
꼭 필요한 경우에만 권장합니다.
양방향 바인딩은 사실

11. 느리다?
• 테이블 조작 성능
13

12. 느리다?
• 초기 실행 시간
• 메모리 점유율
14

13. 느리다? 15
• TODO를 확장한 앱 기준 – 초기 실행속도

14. 용량이 크다?
• Angular CLI v8.2.9 기준
16
ng build -- prod
폴더 6개, 파일 30개
(45.4KB)
+
node_modules
(240MB)
파일 10개
(700KB)
http-server . -g
(342KB)

15. 용량이 크다? 17
• TODO를 확장한 앱 기준 – 빌드 결과물 크기

16. 용량이 크다? 18
• TODO를 확장한 앱 기준 – Line of Code

17. Angular는 하향세다?
• npm-stat.com
• 2015. 1. 1 ~ 2019. 10. 20
19
react
vue

18. Angular는 하향세다?
• npm-stat.com
• 2015. 1. 1 ~ 2019. 10. 20
20
@angular/core
아직 올라가는 중

19. Angular는 하향세다?
• npm-stat.com
• 2015. 1. 1 ~ 2019. 10. 20
21
angular
AngularJS는 이제 그만 놓아줍시다…

20. Angular는 하향세다? 22
0
1000000
2000000
3000000
4000000
5000000
6000000
2015-01-10
2015-03-10
2015-05-10
2015-07-10
2015-09-10
2015-11-10
2016-01-10
2016-03-10
2016-05-10
2016-07-10
2016-09-10
2016-11-10
2017-01-10
2017-03-10
2017-05-10
2017-07-10
2017-09-10
2017-11-10
2018-01-10
2018-03-10
2018-05-10
2018-07-10
2018-09-10
2018-11-10
2019-01-10
2019-03-10
2019-05-10
2019-07-10
2019-09-10
react vue @angular/core angular
• npm-stat.com
• 2015. 1. 1 ~ 2019. 10. 20

21. Angular는 하향세다?
• angular.kr
• 2019. 1. 13 ~ 2019. 10. 24
• Google Analaytics
23

22. 버전이 너무 빨리 올라간다.
버전 발표일자 간격 주요 변경사항
2.0.0 2016. 9. 14 새로운 프레임워크로 재작성
3.0.0
4.0.0 2017. 3. 23 6개월 + 9일
*ngIf 문법에 else 추가, @angular/core가 WeakMap을 사용, Angular
Universal 도입
5.0.0 2017. 11. 1 7개월 + 12일 i18n API 리팩토링, OpaqueToken → InjectionToken
6.0.0 2018. 5. 3 6개월 + 2일
TypeScript, RxJS 라이브러리 버전업, <template> → <ng-template>,
@angular/animation 패키지 분리
7.0.0 2018. 10. 18 5개월 + 15일 TypeScript, RxJS 라이브러리 버전업
8.0.0 2019. 5. 28 5개월 + 10일 Ivy, Bazel 실험 도입, @ViewChild, @ContentChild에 static 플래그 추가
9.0.0 2019. 10~11 Ivy, Bazel 정식 도입
24
정기 버전업일 뿐입니다.
- Major : 6개월마다
- Minor : Major 사이에 1~3번
- Patch : 매주
하위 호환성은 유지
제거 되더라도 1년 유지

23. TypeScript 때문에 어렵다?
• 기본 문법은 JavaScript
• + future JavaScript
• async/await
• 제네레이터 함수
• + α
• 정적 타입 지정
• 제네릭
• 인터페이스
• @어노테이션
• React, Vue도 TypeScript를 도입하는 추세
• .tsx
• Vue 3.0
25
Future
JavaScript
TypeScript
JavaScript

24. 옵저버블은 필수다?
• 언어와 무관한 반응형, 함수형 개발 방법
26
RxJava
RxJS
Rx.NET
RxScala
RxClojure
RxCpp
RxLua
Rx.rb
RxPY
RxGo
RxGroovy
RxJRuby
RxKotlin
RxSwift
RxPHP
reaxive
RxDart
RxNetty
RxAndroid
RxCocoa

25. 옵저버블은 필수다?
• 안써도 됩니다.
27
.toPromise()

26. 이래서 쉽습니다.

27. 웹 표준 준수 29
템플릿
HTML
스타일
CSS
동작 로직
TypeScript
컴포넌트
Web Component

28. 강력한 CLI – 모든 개발 단계에 활용
• Command Line Interface
30
npm
Yeoman
mean.js
IDE
gulp
grunt
Webpack
tsc
node.js
lite-server
webpack-dev-servermocha
karma
protractor
git
AWS-cli
Angular CLI
Boilerplate
Making
Components
Build Running Server
Unit /
End-to-end Test
Deploy

29. 강력한 CLI – 명령 하나로 프로젝트 생성 끝
• ng new : 애플리케이션 기본 틀 생성 + α
• 개발환경 구성
• git
• TypeScript 환경설정 + TSLint
• .editconfig
• 테스트 환경 구성 : ng test
• Karma
• Protractor
• 배포 환경 구성 : ng build
• browserslist
• environment.prod.ts
• 전세계 개발자가 동일한 환경을 구성
• 문제가 있으면 Angular가 대응해야 하는 레벨
• 혼자 외롭지 않아요.
31

30. 강력한 CLI – 라이브러리 설치 + α
• ng add : yarn add + 프로젝트 자동 설정
• @angular/pwa
• angular-fire-schematics
• 커스텀 라이브러리 구현 가능
32

31. • ng generate : 구성요소 기본틀 생성 + 모듈에 추가
• appShell
• application
• class
• component
• directive
• enum
• guard
• interface
• library
• module
• pipe
• service
• serviceWorker
• universal
• webWorker
강력한 CLI – 구성요소 생성 33
+ IDE 지원

32. 다른 라이브러리는…
• 컴포넌트 라이브러리 + 상태 관리
• 수많은 선택지
• 해결 방법 파편화
34
setState()

33. 방대한 가이드 문서 35

34. 방대한 가이드 문서 36

35. 이런 점은 더 좋습니다.
약간 어렵지만

36. 종합 프레임워크 38
관련 기능을 프레임워크 차원에서 제공
개발 방법 단일화, 이미 보장된 안정성 & 최적화
MEAN 스택에서 JSON 객체 사용이 자유로운 것과 비슷한 느낌
버전업 스트레스 ↓

37. 종합 프레임워크
• @angular 패키지
39
animations fire platform-browser-dynamic
bazel flex-layout platform-server
cdk forms platform-webworker-dynamic
cdk-experimental http router
cli language-service service-worker
common localize upgrade
compiler material youtube-player
compiler-cli material-experimental …
core material-moment-adapter
elements platform-browser

38. 안전 참조 연산자 : ?. 와 !. 40
<ng-container *ngIf="!!obj">
<ng-container *ngIf="!!obj.a">
<ng-container *ngIf="!!obj.a.b">
<ng-container *ngIf="!!obj.a.b.c">
<span>{{ obj.a.b.c }}</span>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<span>{{ obj?.a?.b?.c }}</span>

39. 파이프 & 비동기 파이프
• 비동기 파이프
• Promise 자동 실행
• Observable 직접 구독
41
@Component({
selector : 'async-observable-pipe',
template : `
<div>
Time: {{ time | async }}
</div>
`
})
export class AsyncObservablePipeComponent {
time = new Observable<string>((observer : Observer<string>) => {
setInterval(() => observer.next(new Date().toString()), 1000);
});
}
@Component({
selector : 'async-promise-pipe',
template : `
<div>
<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
<span>Wait for it... {{ greeting | async }}</span>
</div>
`
})
export class AsyncPromisePipeComponent {
greeting : Promise<string> | null = null;
arrived : boolean = false;
...
}
<span>{{ balance : currency | 'KRW' }}</span>

40. 프론트엔드
SPA
인터셉터 체인 42
캐시 확인 헤더에 키 추가 데이터 파싱
HTTP 요청
HTTP 응답
백엔드
서버
CacheInterceptor AuthInterceptor ParseInterceptor
@Injectable()
export class CacheInterceptor implements HttpInterceptor {
intercept (req : HttpRequest<any>, next : HttpHandler) : Observable<HttpEvent<any>> {
return next.handle(req);
}
}

41. Lifecycle Hooks
시점 Angular React Vue
props 주입, 초기화
클래스 선언부
constructor()
ngOnInit()
ngOnChanges()
클래스 선언부
constructor()
클래스 선언부
beforeCreate()
created()
컴포넌트 마운트 전 componentWillMount() beforeMount()
렌더링 render()
컴포넌트 마운트 후
ngAfterContentInit()
ngAfterContentChecked()
componentDidMount() mounted()
자식 컴포넌트 마운트 후
ngAfterViewInit()
ngAfterViewChecked()
변화감지
ngOnChanges()
DoCheck()
componentWillReceiveProps() beforeUpdate()
렌더링 판단 shouldComponentUpdate()
렌더링 render()
변화감지 반영 후 ngAfterContentChecked() componentDidUpdate() updated()
자식 컴포넌트 변화감지 반영 후 ngAfterViewChecked()
컴포넌트 종료 전 ngOnDestroy() componentWillUnmount() beforeDestroy()
컴포넌트 종료 후 destroyed()
43

42. Lifecycle Hooks + α
• 라우터 이벤트
44
this.router.events
.pipe(
filter((event : RouterEvent) => event instanceof NavigationEnd),
filter((event : NavigationEnd) => event.url.startsWith('/user/profile'))
)
.subscribe((event : NavigationEnd) => {
});
NavigationStart
RouterConfigLoadStart
RouterConfigLoadEnd
RouterRecognized
GuardsCheckStart
ChildActivationStart
ActivationStart
GuardsCheckEnd
ResolveStart
ResolveEnd
ChildActivationEnd
ActivationEnd
NavigationEndNavigationCancel NavigationError
Scroll

43. 최신 트렌드를 적극 반영
• 웹 컴포넌트
• PWA
• 크로스 플랫폼
• 웹, 모바일, 네이티브 앱, 데스크탑 애플리케이션
• 리액티브 프로그래밍
• 서버 사이드 렌더링
• 머티리얼 디자인
• Angular CLI
• Augury
45

44. 뭐가 더 좋아요? 46

45. 뭐가 더 좋아요? 47

46. 뭐가 더 좋아요? 48

47. 뭐가 더 좋아요? 49

48. Angular는 어렵지 않습니다.
그래도 어려우면 메일주세요.
han41858@gmail.com

49. 홍보 – angular.kr
• 공식 가이드 문서 한국어판
51

50. 홍보 – angular.kr
• 공식 가이드 문서 한국어판
52

51. 홍보 – ejv
• Easy JSON Validator
53
ejv(newUser, [
{
key : 'userId', type : 'string',
minLength : USER_ID_LENGTH, maxLength : USER_ID_LENGTH, pattern : RANDOM_STR_REG_EXP
},
{ key : 'birth', type : 'date', optional : true },
{ key : 'email', type : 'string', format : 'email' },
{ key : 'password', type : 'string', pattern : PASSWORD_FORMAT_EXP },
{ key : 'encryptionKey', type : 'string', minLength : 1, pattern : RANDOM_STR_REG_EXP },
{ key : 'gender', type : 'string', enum : Object.values(GENDER_TYPE), optional : true },
{ key : 'created', type : 'date' },
{ key : 'withdrawal', type : 'date', optional : true }
]);

52. Q & A

53. 감사합니다.