Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,096 views

Published on

최근 프론트엔드 개발 생태계의 변화와 Angular Framework에 대한 개괄

Published in: Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com and Watch latest Blogs On Latest and New Technology @ https://www.ThesisScientist.com/blog
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 좋은 강연 진행해 주시고, 자료 공유해 주신 것 정말 감사 드립니다 ㅎㅎ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Angular Seminar 앵귤러 아키텍처 하루만에 훑어보기 조우진 (jwj0831@gmail.com) 한빛미디어 리얼타임 세미나 05
  2. 2. 발표에 앞서 다루는 내용 • Angular와 연관된 프론트엔드 개발 생태계 • Angular Framework의 아키텍처 • Angular CLI와 Spring boot를 사용한 Angular 개발 과정 데모
  3. 3. 발표에 앞서 다루지 않는 것 • 프론트엔드 웹 개발에 한정된 개념 혹은 지식 • TypeScript의 고유한 syntax 및 feature • Angular Framework 패키지별 API 사용 방법 • RxJs 및 Server Side Rendering 등 고급 주제
  4. 4. 세미나의 목표 • Self-Learning을 위한 마중물 붓기 • Angular Framework 전체 구조 파악하기 • (어디가서 최신 프론트엔드 개발환경 아는 척 하기)
  5. 5. Angular #1 프론트엔드 생태계 변화와 Angular Framework 한빛미디어 리얼타임 세미나 05
  6. 6. 옛날 옛적에 JavaScript의 탄생 • Brendan이 말씀하시니 2주만에 JavaScript가 생 기니라… http://speakingjs.com/es5/ch04.html
  7. 7. Savior for JavaScript
  8. 8. Savior for JavaScript ECMA2015 (ES6) https://www.w3schools.com/js/js_versions.asp
  9. 9. JavaScript의 변화 http://kangax.github.io/compat-table/es6/
  10. 10. http://slides.com/sakataa/deck-2#/
  11. 11. Node.js https://twitter.com/BusyRich/status/494959181871316992
  12. 12. 왜 Node.js ? OS JVM Java codes… Browser V8, Gecko, … JS codes… OS Node.js (V8) JS codes…
  13. 13. Node.js & NPM http://www.modulecounts.com
  14. 14. 알아야 할 것이 점점 늘어난다…
  15. 15. 프론트엔드 관련 생태계 http://joaoperibeiro.com/the-front-end-developer-spectrum
  16. 16. • 패키지 관리 도구 • Bower • NPM • Yarn 주요 도구 분류 1/3
  17. 17. • 자동화 및 Task 도구 • Grunt • Gulp • Yeoman • NPM 주요 도구 분류 2/3
  18. 18. • Compiler (Preprocessor) • CoffeeScript • Babel • Typescript 주요 도구 분류 3/3
  19. 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. 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. 21. Module화를 향한 노력 https://bertrandg.github.io/the-javascript-module-mess/
  22. 22. Angular #2 Angular Framework 아키텍처 이해하기 한빛미디어 리얼타임 세미나 05
  23. 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. 24. Def 1) Framework Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  25. 25. Def 2) Client Application • View가 있는 모든 플랫폼 • Web, Mobile Web, native mobile, and native desktop
  26. 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. 27. 주요개념 1: Component Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  28. 28. 주요개념 1: Component Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  29. 29. 주요개념 1: Component • 모든 View는 Component로 통한다.
  30. 30. 주요개념 1: Component • 모든 View는 Component로 통한다.
  31. 31. 주요개념 1: Component • 모든 View는 Component로 통한다.
  32. 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. 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. 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. 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. 36. 주요개념 1: Component • 컴포넌트는 View를 관리하는 컨테이너와 같다. • Angular App은 컴포넌트 트리를 반드시 갖는다. • 컴포넌트 트리의 최상위 루트 컴포넌트를 관례적으 로 AppComponent라 한다. • View를 컴포넌트로 나누는 기준은 없다. • 재사용성 • 페이지 단위
  37. 37. 주요개념 2: Template Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  38. 38. 주요개념 2: Template Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  39. 39. 주요개념 2: Template • View를 구성하는 Angular-style의 마크업 • View를 구성하기 위하여 Component와 짝을 이룸 • HTML을 포함한 Angular에서 제공하는 다양한 연 산자 및 syntax를 사용하여 View를 구성하는 코드 를 작성
  40. 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. 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. 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. 43. 주요개념 3: Component Lifecycle Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  44. 44. 주요개념 3: Component Lifecycle Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  45. 45. 주요개념 3: Component Lifecycle • Component의 생성과 소멸 주체 • 우리가 아닌 Angular Framework • Lifecycle을 Hooking하여 내 로직 실행
  46. 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. 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. 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. 49. 주요개념 4: Directive & Pipe Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  50. 50. 주요개념 4: Directive & Pipe Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  51. 51. 주요개념 4: Directive & Pipe • View를 동적으로 만들어주는 요소 • Directive • Structural Directives • DOM 구조를 동적으로 변화시킬 때 사용 • NgIf, NgFor, NgSwitch, … • Attribute Directives • 컴포넌트, DOM 요소의 표현 및 동작방식을 변경할 때 사용 • NgStyle, NgClass, …
  52. 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. 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. 54. 주요개념 5: Data Binding Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  55. 55. 주요개념 5: Data Binding Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  56. 56. 주요개념 5: Data Binding • Component(+Template)과 View 사이의 연결고리 • 모든 일은 Angular가 한다. 우리는 선언만 할 뿐 • 절차적인 방식 vs 선언적인 방식 • http://www.notforme.kr/archives/1698
  57. 57. 주요개념 5: Data Binding • 3가지 바인딩: Property, Event, Two-way Binding
  58. 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. 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. 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. 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. 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. 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. 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. 65. 주요개념 6: Service & DI Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  66. 66. 주요개념 6: Service & DI Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  67. 67. 주요개념 6: Service & DI • Service • 애플리케이션에서 사용할 값, 함수 등 무엇이든 OK! • 일반적으로 View와 관련 없는 로직 • 비즈니스로직, 애플리케이션 공통 코드, Data Store, … • 단일 책임 원칙 • Dependency Injection • 우리가 보는 것은 Framework입니다. • Angular에도 의존성 주입 기능이!!!
  68. 68. 주요개념 6: Service & DI • Dependency Injection • 우리가 보는 것은 Framework입니다. • Angular에도 의존성 주입 기능이!!! • DI를 위해 필요한 것 1. 의존성 정보를 어딘가 기록하고 2. 의존 하는 쪽에서는 constructor에서 Arg.로 받음
  69. 69. 주요개념 6: Service & DI import { Injectable } from '@angular/core'; @Injectable() export class TestDiService { constructor() { } print() { console.log('hello'); } } 컴포넌트에서 의존할 서비스 클래스를 간단히 선언합니다.
  70. 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. 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. 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. 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. 74. 주요개념 6: Service & DI • DI를 사용하는 이유 • 객체 간의 결합도 낮추기 (Framework에게 맡겨줘) • 단일 인스턴스 보장 받기 • 서비스 클래스를 애플리케이션 전역에서 사용하는 MemoryDB, Message Bus등으로 쓸 수 있어요~~
  75. 75. 주요개념 7: Module • ES6에서 말하는 모듈이 아님 • 지금까지 설명했던 Angular의 요소들을 하나로 담는 컨테이너 • Angular Framework의 많은 기능은 모듈 단위로 제공 • FormsModule, ReactiveFormsModule, RouterModule, HttpModule, …
  76. 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. 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. 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. 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. 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. 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. 82. Angular에서 제공하는 주요 Module • CommonModule: Angular에서 제공하는 각종 지시자 등을 포함하는 기본 모 듈 • BrowserModule: 웹에서 실행할 때 필요한 기본 모듈, CommonModule을 내 장하고 있음 • FormsModule, ReactiveFormsModule: 폼 구성에 필요한 지시자 등을 제공, ngModel을 쓰려면 반드시 필요 • HttpModule, JsonpModule: ajax 호출과 관련된 서비스 클래스 등을 제공 • BrowserAnimationsModule: 브라우저의 애니메이션 처리(css) API를 제공
  83. 83. Angular를 구성하는 요소들 Component LifeCycle View Component Service Dependency Injection Template Directive Pipe Data Binding Metadata
  84. 84. Angular #3 Angular (CLI) – SpringBoot 데모 세션 한빛미디어 리얼타임 세미나 05
  85. 85. Angular CLI • Angular 프로젝트를 CLI에서 쉽게 구성/개발할 수있도록 도와주는 도 구 • Google에서 관리하는 오픈소스는 아님! • Google에서는 추후 Bazel + Clouser 기반의 빌드 도구가 나올수도 있 음 • (2017년 7월) 현재까지는 Angular 개발환경 셋팅에 가장 좋은 도구 • 설치: npm install -g @angular/cli
  86. 86. Angular CLI + Spring Boot Frontend 폴더에 angular source가 있습니다.
  87. 87. Angular CLI + Spring Boot Frontend 폴더에 angular source가 있습니다. "apps": [ { "root": "src", "outDir": "../resources/static", "assets": [ "assets", "favicon.ico" ], .angular-cli.json에 빌드 결과물의 위치를 Boot의 static으로 지정합니다.
  88. 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. 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. 90. 감사합니다.

×