2017. 8. 27 GDG WebTech 밋업 발표 자료

1. 2017. 8. 27
한장현
Angular 기본 개념 잡기

2. • 전 삼성SDS 선임
• TV플랫폼 JavaScript 애플리케이션 구현
• 리테일 솔루션 백엔드 & 프론트엔드 구현
• 스타트업 CTO
• JS/TS Full-stack Engineer
• Angular Development with TypeScript 저자
• GDG Korea WebTech 운영진
한장현 (Janghyun Han)
han41858.tistory.com
github.com/han41858
han41858@gmail.com
2

3. Angular는
AngularJS와 다르다.
3

4. AngularJS & Angular
TS를 도입하면서 프레임워크 이름 변경
– 정기적인 버전업 → 버전 숫자가 빠르게 증가
– 철학은 비슷, 개발방법도 비슷
버전 정책은 SemVer (http://han41858.tistory.com/22)
– 숫자에 겁먹을 필요는 없다. 벌써 5.0.0 나왔는데 뭐…
4
1.6.6
5.0.0-beta.4
0.9.0 1.0.0
2.0.0 4.0.03.0.0
AngularJS
Angular

5. Angular는
종합 프레임워크다.
5

6. 종합 프레임워크
전체를 아우르는 구조를 제공
– 경쟁 프레임워크와 가장 큰 차이
– 뷰, 데이터 풀, 폼, 라우터, Http, 애니메이션 (+머티리얼 디자인), 서버 사이드 렌더링, CLI, 테스트
각 모듈의 정합성, 자연스러운 데이터 연결이 보장
– MEAN 스택에서 JSON 객체 사용이 자유로운 것과 비슷한 느낌
6
@angular/animations
@angular/app-shell
@angular/benchpress
@angular/cdk
@angular/cli
@angular/common
@angular/compiler
@angular/compiler-cli
@angular/core
@angular/flex-layout
@angular/forms
@angular/http
@angular/language-service
@angular/material
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/platform-server
@angular/platform-webworker
@angular/platform-webworker-dynamic
@angular/router
@angular/service-worker
@angular/tsc-wrapped
@angular/typescript
@angular/upgrade

7. Angular로는
프론트엔드 SPA를 만든다.
7

8. 프론트엔드 SPA
페이지 내부에서 라우터로 뷰를 전환
– 전통적인 HTML 페이지 전환 방식과 다름
해당 주소일 때 동작하는 컴포넌트를 등록
– 자식 라우터를 사용하면 딥 링크도 가능 (/product/1515/seller/3)
8

9. Angular는
TypeScript로 개발한다.
9

10. TypeScript
JavaScript 상위집합(superset)
– JavaScript + α
– 정적 타입, 제네릭, 인터페이스, TSLint
@어노테이션 === 함수
Angular 프레임워크에서 지원
– 함수 타입, 변수 타입 제공
– 기본 TSLint도 구성
Future
JavaScript
TypeScript
10
JavaScript

11. Angular는
컴포넌트 기반이다.
11

12. 컴포넌트 기반
추상화된 DOM 엘리먼트
– 템플릿 + 클래스 코드 (+ 스타일, 테스트 스펙)
– DOM에 직접 접근하는 것은 지양
어노테이션으로 Angular 컴포넌트 등록
– 객체 생성, 주입은 Angular가 관리
– 라이프싸이클 지원(생성 - 변화감지 - 종료)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
12

13. 컴포넌트 기반
컴포넌트의 조합, 트리로 구성
AppComponent
Carousel
NavBar
Search
Product Product Product
Footer
13

14. Angular는
데이터 바인딩을 지원한다.
14

15. 데이터 바인딩
AngularJS에서 가장 인기있었던 기능
– 성능 향상을 위해 단방향 바인딩이 기본
– 양방향 바인딩도 가능
– 프로퍼티 바인딩 : <span>{{ title }}</span>, <img [src]="imagePath"/>
– 이벤트 바인딩 : <div (click)="itemClick()"></div>
– 양방향 바인딩 : <input [(ngModel)]="email"/>
15

16. Angular는
옵저버블을 지원한다.
16

17. 옵저버블
Push Model Data Stream Publisher
콜백 체인 → Promise 체인 → Async 체인 → Observable 체인
RxJS 내장
– 기본 패키지에 포함
데이터 스트림에 사용
– Everything is stream?
– 키보드 입력 이벤트, 서비스 상태 전달에 적합
– Http는…?
– WebSocket에 더 어울림
17

18. Angular는
서비스를 의존성으로 주입한다.
18

19. 서비스 & 의존성 주입
컴포넌트를 연결
– 전역 데이터 풀로 활용
의존성 주입기가 인스턴스를 생성하고 주입
– 생성 방법을 등록하면 컴포넌트에서 선언만 하고 사용
– 인스턴스 생성 방법을 신경 쓸 필요가 없음
– 컴포넌트처럼 의존성 구성 가능
– 더미 객체를 사용하는 단위 테스트에 유리
19

20. Angular는
모듈화를 지원한다.
20

21. 모듈화
ES6 모듈의 연장, 대체는 아님
– export, import 사용
– import로 불러오고 @NgModule에 등록
Angular 모듈 : @NgModule
– Angular에서 제공하는 모듈 : import
– 사용자가 만든 컴포넌트 : declarations
– 객체 생성이 필요하면 : providers
– 시작 컴포넌트는 : bootstrap
21
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations : [
AppComponent
],
imports : [
BrowserModule
],
providers : [],
bootstrap : [AppComponent]
})
export class AppModule {
}

22. Angular는
CLI를 지원한다.
22

23. Angular CLI
Command Line Interface
– 프로젝트 기본 틀 생성 + 구성요소 추가 + 서버 실행 + TSLint + 테스트 + 빌드 + 배포 자동화
– CLI 버전에 따라 기본 구성이 달라짐
23

24. Angular CLI
Boilerplate
Making
Components
Build Running Server
Unit /
End-to-end Test
Deploy
npm
generator
Yeoman
mean.js
IDE
gulp
grunt
webpack
node.js
lite-server
webpack-dev-server
mocha
karma
git
AWS-cli
Angular CLI
24

25. Angular는
최신 트렌드를 적극 도입한다.
25

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

27. 27
앞으로 공부해야 할 것
지금 공부해야 할 것,

28. 28
지금 공부해야 할 것
TypeScript
Angular 프레임워크
컴포넌트 기반 아키텍트
리액티브 프로그래밍
앞으로 공부해야 할 것
WebPack 최적화
서버 사이드 렌더링 & 검색 엔진 최적화
머티리얼 디자인 & 애니메이션

29. Q & A
29

30. 책 사신 분 스티커 드립니다!!
30

31. 고맙습니다.
31