앵귤러 첫걸음(Angular for beginers) : 앵귤러 아키텍쳐 하루만에 훑어보기

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로 통한다.

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

31. 주요개념 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. 감사합니다.