Angular Seminar [한빛미디어 리얼타임 세미나]

1. Angular Seminar 앵귤러 아키텍처 하루만에 훑어보기 조우진 (jwj0831@gmail.com) 한빛미디어 리얼타임 세미나 05

2. 발표에 앞서 다루는 내용 • Angular와 연관된 프론트엔드 개발 생태계 • Angular Framework의 아키텍처 • Angular CLI와 Spring boot를 사용한 Angular 개발 과정 데모

3. 발표에 앞서 다루지 않는 것 • 프론트엔드 웹 개발에 한정된 개념 혹은 지식 • TypeScript의 고유한 syntax 및 feature • Angular Framework 패키지별 API 사용 방법 • RxJs 및 Server Side Rendering 등 고급 주제

4. 세미나의 목표 • Self-Learning을 위한 마중물 붓기 • Angular Framework 전체 구조 파악하기 • (어디가서 최신 프론트엔드 개발환경 아는 척 하기)

5. Angular #1 프론트엔드 생태계 변화와 Angular Framework 한빛미디어 리얼타임 세미나 05

6. 옛날 옛적에 JavaScript의 탄생 • Brendan이 말씀하시니 2주만에 JavaScript가 생 기니라… http://speakingjs.com/es5/ch04.html

7. Savior for JavaScript

8. Savior for JavaScript ECMA2015 (ES6) https://www.w3schools.com/js/js_versions.asp

9. JavaScript의 변화 http://kangax.github.io/compat-table/es6/

10. http://slides.com/sakataa/deck-2#/

11. Node.js https://twitter.com/BusyRich/status/494959181871316992

12. 왜 Node.js ? OS JVM Java codes… Browser V8, Gecko, … JS codes… OS Node.js (V8) JS codes…

13. Node.js & NPM http://www.modulecounts.com

14. 알아야 할 것이 점점 늘어난다…

15. 프론트엔드 관련 생태계 http://joaoperibeiro.com/the-front-end-developer-spectrum

16. • 패키지 관리 도구 • Bower • NPM • Yarn 주요 도구 분류 1/3

17. • 자동화 및 Task 도구 • Grunt • Gulp • Yeoman • NPM 주요 도구 분류 2/3

18. • Compiler (Preprocessor) • CoffeeScript • Babel • Typescript 주요 도구 분류 3/3

19. Rough Comparison b/w two J* Java JavaScript Build & Deployment Jenkins NPM, Gulp, Grunt Dependency Management, Build Configuration Maven, Gradle, Ivy,… NPM, Yarn Runtime Env. JVM(HotSpot, Rockit) V8, Gecko, Servo, …

20. Module화를 향한 노력 • 코드 재사용성 및 범용화를 위한 노력 • CommonJS, AMD • Webpack, Module in ES6 • 자세한 내용은… • http://d2.naver.com/helloworld/12864 • http://d2.naver.com/helloworld/591319 • http://d2.naver.com/helloworld/023981

21. Module화를 향한 노력 https://bertrandg.github.io/the-javascript-module-mess/

22. Angular #2 Angular Framework 아키텍처 이해하기 한빛미디어 리얼타임 세미나 05

23. Angular Framework • Angular is a framework • for building client applications • in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.

24. Def 1) Framework Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

25. Def 2) Client Application • View가 있는 모든 플랫폼 • Web, Mobile Web, native mobile, and native desktop

26. Def 3) TypeScript • TypeScript is a typed super set of JavaScript • that compiles to plain JavaScript. http://chariotsolutions.com/blog/post/angular2-starter-walkthrough-overview/

27. 주요개념 1: Component Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

28. 주요개념 1: Component Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

29. 주요개념 1: Component • 모든 View는 Component로 통한다.

32. 주요개념 1: Component import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

33. 주요개념 1: Component import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } ES6의 Module import 구문 (Java의 클래스 import와 유사하지요? )

34. 주요개념 1: Component import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } @는 데코레이터 데코레이터는 대상에 메타데이터 제공 및 Framework에게 정보를 주는 역할을 합니다. (Java의 어노테이션 같은… ) @Component에는 많은 메타데이터가 들어갑니다. selector, template, templateUrl, providers,….

35. 주요개념 1: Component import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } 컴포넌트는 (ES6, TypeScript) Class입니다. View에 노출할 값이나 이벤트 처리 로직 등을 이 클래스 안에서 작성합니다.

36. 주요개념 1: Component • 컴포넌트는 View를 관리하는 컨테이너와 같다. • Angular App은 컴포넌트 트리를 반드시 갖는다. • 컴포넌트 트리의 최상위 루트 컴포넌트를 관례적으 로 AppComponent라 한다. • View를 컴포넌트로 나누는 기준은 없다. • 재사용성 • 페이지 단위

37. 주요개념 2: Template Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

38. 주요개념 2: Template Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

39. 주요개념 2: Template • View를 구성하는 Angular-style의 마크업 • View를 구성하기 위하여 Component와 짝을 이룸 • HTML을 포함한 Angular에서 제공하는 다양한 연 산자 및 syntax를 사용하여 View를 구성하는 코드 를 작성

40. 주요개념 2: Template import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } 여기에 Template의 경로를 적었습니다.

41. 주요개념 2: Template import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<h1>Angular!!!</h1> ', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } template이 간단한 경우에는 이렇게 바로 template을 쓰기도 합니다.

42. 주요개념 2: Template <md-card> <div class="contents"> <md-input-container> <input mdInput name="value" placeholder="사용자 이름" [(ngModel)]="userName" (ngModelChange)="onChange()"> </md-input-container> <button md-raised-button (click)="showWelcomeMsg()">입력</button> <span class="welcome-msg">{{welcomeMsg}}</span> </div> </md-card> Html + Angular의 Template 구문으로 이뤄집니다. 처음 보는 속성들은 다음 개념 설명에서 알 수 있습니다. https://github.com/not-for-me/hb-angular-first/blob/master/ch03/ng- welcome-msg-app/src/app/welcome-msg/welcome-msg.component.html

43. 주요개념 3: Component Lifecycle Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

44. 주요개념 3: Component Lifecycle Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

45. 주요개념 3: Component Lifecycle • Component의 생성과 소멸 주체 • 우리가 아닌 Angular Framework • Lifecycle을 Hooking하여 내 로직 실행

46. 주요개념 3: Component Lifecycle import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core'; @Component({ … }) export class AppComponent implements OnInit, OnDestroy, DoCheck { ngOnInit() { console.log('[ngOnInit]'); } ngOnDestroy() { console.log('[ngOnDestory]'); } ngDoCheck() { console.log('[ngDoCheck]'); } }

47. 주요개념 3: Component Lifecycle import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core'; @Component({ … }) export class AppComponent implements OnInit, OnDestroy, DoCheck { ngOnInit() { console.log('[ngOnInit]'); } ngOnDestroy() { console.log('[ngOnDestory]'); } ngDoCheck() { console.log('[ngDoCheck]'); } } Hooking할 라이프 사이클 인터페이스를 구현 하겠다고 선언합니다.

48. 주요개념 3: Component Lifecycle import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core'; @Component({ … }) export class AppComponent implements OnInit, OnDestroy, DoCheck { ngOnInit() { console.log('[ngOnInit]'); } ngOnDestroy() { console.log('[ngOnDestory]'); } ngDoCheck() { console.log('[ngDoCheck]'); } } 인터페이스에 접두어로 ng 를 붙인 메서드 선언후, 필요한 로직을 작성합니다. http://bit.ly/hb-ng-seminar-1

49. 주요개념 4: Directive & Pipe Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

50. 주요개념 4: Directive & Pipe Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

51. 주요개념 4: Directive & Pipe • View를 동적으로 만들어주는 요소 • Directive • Structural Directives • DOM 구조를 동적으로 변화시킬 때 사용 • NgIf, NgFor, NgSwitch, … • Attribute Directives • 컴포넌트, DOM 요소의 표현 및 동작방식을 변경할 때 사용 • NgStyle, NgClass, …

52. 주요개념 4: Directive & Pipe • Pipe • View에 노출하는 데이터를 변형시킬 때 사용 • DatePipe, UpperCasePipe, CurrencyPipe, …. <p>Seminal Date: {{ seminarDate | date:'YYYY-MM-dd' }}</p> <p>Seminal Date: {{ seminarDate | date | uppercase }}</p>

53. 주요개념 4: Directive & Pipe • 실행 예제 • http://bit.ly/hb-af-ng-if • http:// bit.ly/hb-af-ng-for • http://bit.ly/hb-af-ng-switch • http://bit.ly/hb-af-pipe

54. 주요개념 5: Data Binding Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

55. 주요개념 5: Data Binding Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

56. 주요개념 5: Data Binding • Component(+Template)과 View 사이의 연결고리 • 모든 일은 Angular가 한다. 우리는 선언만 할 뿐 • 절차적인 방식 vs 선언적인 방식 • http://www.notforme.kr/archives/1698

57. 주요개념 5: Data Binding • 3가지 바인딩: Property, Event, Two-way Binding

58. 주요개념 5: Data Binding import { Component } from '@angular/core'; @Component({ … }) export class AppComponent { title = 'Hello, Angular'; myData = '1234'; inputSize= '10'; constructor() { } showData() { alert(this.myData); } checkInput($event) { console.log($event.target.value); } }

59. 주요개념 5: Data Binding import { Component } from '@angular/core'; @Component({ … }) export class AppComponent { title = 'Hello, Angular'; myData = '1234'; inputSize= '10'; constructor() { } showData() { alert(this.myData); } checkInput(e) { console.log(e.target.value); } } View에 바인딩할 때 필요한 속성입니다. Event 바인딩을 위해 메서드도 구현합니다.

60. 주요개념 5: Data Binding <h1> {{ title }} </h1> <input type="text" [ngModel]="myData" [size]="inputSize" (keyup)="checkInput($event)"> <button type="button" (click)="showData()">show me</button>

61. 주요개념 5: Data Binding <h1> {{ title }} </h1> <input type="text" [ngModel]="myData" [size]="inputSize" (keyup)="checkInput($event)"> <button type="button" (click)="showData()">show me</button> 컴포넌트의 데이터를 View에 interpolation 합니다.

62. 주요개념 5: Data Binding <h1> {{ title }} </h1> <input type="text" [ngModel]="myData" [size]="inputSize" (keyup)="checkInput($event)"> <button type="button" (click)="showData()">show me</button> Input 요소의 size property에 inputSize를 바인딩 했습니다.

63. 주요개념 5: Data Binding <h1> {{ title }} </h1> <input type="text" [ngModel]="myData" [size]="inputSize" (keyup)="checkInput($event)"> > <button type="button" (click)="showData()"> show me</button> showData() { alert(this.myData); } checkInput($event) { console.log($event.target.value); } Input의 keyup 이벤트에 checkInput 메서드를 바인딩했습니다. button의 click 이벤트에 showData 메서드를 바인딩했습니다.

64. 주요개념 5: Data Binding <h1> {{ title }} </h1> <input type="text" [ngModel]="myData" [size]="inputSize" (keyup)="checkInput($event)"> <button type="button" (click)="showData()">show me</button> Input에 myData와 양방향 바인딩을 선언했습니다.

65. 주요개념 6: Service & DI Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

66. 주요개념 6: Service & DI Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

67. 주요개념 6: Service & DI • Service • 애플리케이션에서 사용할 값, 함수 등 무엇이든 OK! • 일반적으로 View와 관련 없는 로직 • 비즈니스로직, 애플리케이션 공통 코드, Data Store, … • 단일 책임 원칙 • Dependency Injection • 우리가 보는 것은 Framework입니다. • Angular에도 의존성 주입 기능이!!!

68. 주요개념 6: Service & DI • Dependency Injection • 우리가 보는 것은 Framework입니다. • Angular에도 의존성 주입 기능이!!! • DI를 위해 필요한 것 1. 의존성 정보를 어딘가 기록하고 2. 의존 하는 쪽에서는 constructor에서 Arg.로 받음

69. 주요개념 6: Service & DI import { Injectable } from '@angular/core'; @Injectable() export class TestDiService { constructor() { } print() { console.log('hello'); } } 컴포넌트에서 의존할 서비스 클래스를 간단히 선언합니다.

70. 주요개념 6: Service & DI import { Component } from '@angular/core'; import { TestDiService } from './test-di.service'; @Component({ … providers: [TestDiService] }) export class AppComponent { constructor(private testService: TestDiService) { } foo() { this.testService.print(); } } 서비스 클래스에 의존성이 있는 컴포넌트 클래스 선언합니다.

71. 주요개념 6: Service & DI import { Component } from '@angular/core'; import { TestDiService } from './test-di.service'; @Component({ … providers: [TestDiService] }) export class AppComponent { constructor(private testService: TestDiService) { } foo() { this.testService.print(); } } 먼저 사용할 서비스 import 합니다. 의존성 정보를 @Component 메타데이터에 선언합니다. * 다음에 설명하는 Module 개념에서도 선언 가능

72. 주요개념 6: Service & DI import { Component } from '@angular/core'; import { TestDiService } from './test-di.service'; @Component({ … providers: [TestDiService] }) export class AppComponent { constructor(private testService: TestDiService) { } foo() { this.testService.print(); } } 생성자에서 Parameter로 선언하면 Angular가 해당 인스턴스를 주입합니다.

73. 주요개념 6: Service & DI import { Component } from '@angular/core'; import { TestDiService } from './test-di.service'; @Component({ … providers: [TestDiService] }) export class AppComponent { constructor(private testService: TestDiService) { } foo() { this.testService.print(); } } 주입 받은 서비스를 사용할 수 있습니다.

74. 주요개념 6: Service & DI • DI를 사용하는 이유 • 객체 간의 결합도 낮추기 (Framework에게 맡겨줘) • 단일 인스턴스 보장 받기 • 서비스 클래스를 애플리케이션 전역에서 사용하는 MemoryDB, Message Bus등으로 쓸 수 있어요~~

75. 주요개념 7: Module • ES6에서 말하는 모듈이 아님 • 지금까지 설명했던 Angular의 요소들을 하나로 담는 컨테이너 • Angular Framework의 많은 기능은 모듈 단위로 제공 • FormsModule, ReactiveFormsModule, RouterModule, HttpModule, …

76. 주요개념 7: Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDiService } from './test-di.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ TestDiService ], bootstrap: [ AppComponent ] }) export class AppModule { }

77. 주요개념 7: Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDiService } from './test-di.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ TestDiService ], bootstrap: [ AppComponent ] }) export class AppModule { } NgModule 데코레이터가 Angular의 모듈을 의미합니다. 모든 Angular App. 반드시 최소 하나의 모듈을 갖습니다. (관례적으로 AppModule이라 명명)

78. 주요개념 7: Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDiService } from './test-di.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ TestDiService ], bootstrap: [ AppComponent ] }) export class AppModule { } 필요한 모듈을 import 할 수 있습니다.

79. 주요개념 7: Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDiService } from './test-di.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ TestDiService ], bootstrap: [ AppComponent ] }) export class AppModule { } 모듈에 담을 요소는 declarations에 선언 해야 합니다. 최초 진입점인 루트 컴포넌트는 bootstrap에 명시해야 합니다.

80. 주요개념 7: Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDiService } from './test-di.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ TestDiService ], bootstrap: [ AppComponent ] }) export class AppModule { } 모듈 레벨에서 의존성 주입 선언도 가능합니다. (컴포넌트에 선언하는 것보다 모듈에 선언한는 것을 권장합니다.)

81. Angular에서 제공하는 package • @angular/common • @angular/compiler (@compiler-cli) • @angular/core • @angular/forms • @angular/http • @angular/platform-browser (platform-browser-dynamic) • @angular/palatform-server • …

82. Angular에서 제공하는 주요 Module • CommonModule: Angular에서 제공하는 각종 지시자 등을 포함하는 기본 모 듈 • BrowserModule: 웹에서 실행할 때 필요한 기본 모듈, CommonModule을 내 장하고 있음 • FormsModule, ReactiveFormsModule: 폼 구성에 필요한 지시자 등을 제공, ngModel을 쓰려면 반드시 필요 • HttpModule, JsonpModule: ajax 호출과 관련된 서비스 클래스 등을 제공 • BrowserAnimationsModule: 브라우저의 애니메이션 처리(css) API를 제공

83. Angular를 구성하는 요소들 Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata

84. Angular #3 Angular (CLI) – SpringBoot 데모 세션 한빛미디어 리얼타임 세미나 05

85. Angular CLI • Angular 프로젝트를 CLI에서 쉽게 구성/개발할 수있도록 도와주는 도 구 • Google에서 관리하는 오픈소스는 아님! • Google에서는 추후 Bazel + Clouser 기반의 빌드 도구가 나올수도 있 음 • (2017년 7월) 현재까지는 Angular 개발환경 셋팅에 가장 좋은 도구 • 설치: npm install -g @angular/cli

86. Angular CLI + Spring Boot Frontend 폴더에 angular source가 있습니다.

87. Angular CLI + Spring Boot Frontend 폴더에 angular source가 있습니다. "apps": [ { "root": "src", "outDir": "../resources/static", "assets": [ "assets", "favicon.ico" ], .angular-cli.json에 빌드 결과물의 위치를 Boot의 static으로 지정합니다.

88. Build 과정 • Build 시에는 frontend-maven-plugin을 사용 • https://github.com/eirslett/frontend-maven-plugin <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>${frontend-plugin.version}</version> <configuration> <workingDirectory>src/main/frontend</workingDirectory> <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot> <nodeVersion>${node.version}</nodeVersion> <npmVersion>${npm.version}</npmVersion> <installDirectory>target</installDirectory> </configuration>

89. <executions> <execution> <id>install node and npm</id> <goals><goal>install-node-and-npm</goal></goals> <phase>generate-resources</phase> </execution> <execution> <id>npm install</id> <goals><goal>npm</goal></goals> <configuration> <arguments>install</arguments> <installDirectory>target</installDirectory> </configuration> </execution> <execution> <id>angular cli build</id> <goals><goal>npm</goal></goals> <phase>generate-resources</phase> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions>

90. 감사합니다.

Angular Seminar [한빛미디어 리얼타임 세미나]

Woojin Joe

Angular Seminar [한빛미디어 리얼타임 세미나]