![홍보 – 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 }
]);](https://image.slidesharecdn.com/angularisnotdifficultinfact-191031132833/85/Angular-51-320.jpg)
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는 어려우니까… 어렵지 않습니다!!
- 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. 감사합니다.