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.
2017. 8. 27
한장현
Angular 기본 개념 잡기
• 전 삼성SDS 선임
• TV플랫폼 JavaScript 애플리케이션 구현
• 리테일 솔루션 백엔드 & 프론트엔드 구현
• 스타트업 CTO
• JS/TS Full-stack Engineer
• Angular Develo...
Angular는
AngularJS와 다르다.
3
AngularJS & Angular
TS를 도입하면서 프레임워크 이름 변경
– 정기적인 버전업 → 버전 숫자가 빠르게 증가
– 철학은 비슷, 개발방법도 비슷
버전 정책은 SemVer (http://han41858.tis...
Angular는
종합 프레임워크다.
5
종합 프레임워크
전체를 아우르는 구조를 제공
– 경쟁 프레임워크와 가장 큰 차이
– 뷰, 데이터 풀, 폼, 라우터, Http, 애니메이션 (+머티리얼 디자인), 서버 사이드 렌더링, CLI, 테스트
각 모듈의 정합성, ...
Angular로는
프론트엔드 SPA를 만든다.
7
프론트엔드 SPA
페이지 내부에서 라우터로 뷰를 전환
– 전통적인 HTML 페이지 전환 방식과 다름
해당 주소일 때 동작하는 컴포넌트를 등록
– 자식 라우터를 사용하면 딥 링크도 가능 (/product/1515/sell...
Angular는
TypeScript로 개발한다.
9
TypeScript
JavaScript 상위집합(superset)
– JavaScript + α
– 정적 타입, 제네릭, 인터페이스, TSLint
@어노테이션 === 함수
Angular 프레임워크에서 지원
– 함수 타입...
Angular는
컴포넌트 기반이다.
11
컴포넌트 기반
추상화된 DOM 엘리먼트
– 템플릿 + 클래스 코드 (+ 스타일, 테스트 스펙)
– DOM에 직접 접근하는 것은 지양
어노테이션으로 Angular 컴포넌트 등록
– 객체 생성, 주입은 Angular가 관리...
컴포넌트 기반
컴포넌트의 조합, 트리로 구성
AppComponent
Carousel
NavBar
Search
Product Product Product
Footer
13
Angular는
데이터 바인딩을 지원한다.
14
데이터 바인딩
AngularJS에서 가장 인기있었던 기능
– 성능 향상을 위해 단방향 바인딩이 기본
– 양방향 바인딩도 가능
– 프로퍼티 바인딩 : <span>{{ title }}</span>, <img [src]="i...
Angular는
옵저버블을 지원한다.
16
옵저버블
Push Model Data Stream Publisher
콜백 체인 → Promise 체인 → Async 체인 → Observable 체인
RxJS 내장
– 기본 패키지에 포함
데이터 스트림에 사용
– Eve...
Angular는
서비스를 의존성으로 주입한다.
18
서비스 & 의존성 주입
컴포넌트를 연결
– 전역 데이터 풀로 활용
의존성 주입기가 인스턴스를 생성하고 주입
– 생성 방법을 등록하면 컴포넌트에서 선언만 하고 사용
– 인스턴스 생성 방법을 신경 쓸 필요가 없음
– 컴포넌...
Angular는
모듈화를 지원한다.
20
모듈화
ES6 모듈의 연장, 대체는 아님
– export, import 사용
– import로 불러오고 @NgModule에 등록
Angular 모듈 : @NgModule
– Angular에서 제공하는 모듈 : impor...
Angular는
CLI를 지원한다.
22
Angular CLI
Command Line Interface
– 프로젝트 기본 틀 생성 + 구성요소 추가 + 서버 실행 + TSLint + 테스트 + 빌드 + 배포 자동화
– CLI 버전에 따라 기본 구성이 달라짐
23
Angular CLI
Boilerplate
Making
Components
Build Running Server
Unit /
End-to-end Test
Deploy
npm
generator
Yeoman
mean.js
...
Angular는
최신 트렌드를 적극 도입한다.
25
최신 트렌드
웹 컴포넌트
PWA
크로스 플랫폼
– 웹, 모바일, 네이티브 앱, 데스크탑 애플리케이션
리액티브 프로그래밍
서버 사이드 렌더링
머티리얼 디자인
Angular CLI
Augury
26
27
앞으로 공부해야 할 것
지금 공부해야 할 것,
28
지금 공부해야 할 것
TypeScript
Angular 프레임워크
컴포넌트 기반 아키텍트
리액티브 프로그래밍
앞으로 공부해야 할 것
WebPack 최적화
서버 사이드 렌더링 & 검색 엔진 최적화
머티리얼 디자인 &...
Q & A
29
책 사신 분 스티커 드립니다!!
30
고맙습니다.
31
Upcoming SlideShare
Loading in …5
×

Angular 기본 개념 잡기

2,544 views

Published on

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

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular 기본 개념 잡기

  1. 1. 2017. 8. 27 한장현 Angular 기본 개념 잡기
  2. 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. 3. Angular는 AngularJS와 다르다. 3
  4. 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. 5. Angular는 종합 프레임워크다. 5
  6. 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. 7. Angular로는 프론트엔드 SPA를 만든다. 7
  8. 8. 프론트엔드 SPA 페이지 내부에서 라우터로 뷰를 전환 – 전통적인 HTML 페이지 전환 방식과 다름 해당 주소일 때 동작하는 컴포넌트를 등록 – 자식 라우터를 사용하면 딥 링크도 가능 (/product/1515/seller/3) 8
  9. 9. Angular는 TypeScript로 개발한다. 9
  10. 10. TypeScript JavaScript 상위집합(superset) – JavaScript + α – 정적 타입, 제네릭, 인터페이스, TSLint @어노테이션 === 함수 Angular 프레임워크에서 지원 – 함수 타입, 변수 타입 제공 – 기본 TSLint도 구성 Future JavaScript TypeScript 10 JavaScript
  11. 11. Angular는 컴포넌트 기반이다. 11
  12. 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. 13. 컴포넌트 기반 컴포넌트의 조합, 트리로 구성 AppComponent Carousel NavBar Search Product Product Product Footer 13
  14. 14. Angular는 데이터 바인딩을 지원한다. 14
  15. 15. 데이터 바인딩 AngularJS에서 가장 인기있었던 기능 – 성능 향상을 위해 단방향 바인딩이 기본 – 양방향 바인딩도 가능 – 프로퍼티 바인딩 : <span>{{ title }}</span>, <img [src]="imagePath"/> – 이벤트 바인딩 : <div (click)="itemClick()"></div> – 양방향 바인딩 : <input [(ngModel)]="email"/> 15
  16. 16. Angular는 옵저버블을 지원한다. 16
  17. 17. 옵저버블 Push Model Data Stream Publisher 콜백 체인 → Promise 체인 → Async 체인 → Observable 체인 RxJS 내장 – 기본 패키지에 포함 데이터 스트림에 사용 – Everything is stream? – 키보드 입력 이벤트, 서비스 상태 전달에 적합 – Http는…? – WebSocket에 더 어울림 17
  18. 18. Angular는 서비스를 의존성으로 주입한다. 18
  19. 19. 서비스 & 의존성 주입 컴포넌트를 연결 – 전역 데이터 풀로 활용 의존성 주입기가 인스턴스를 생성하고 주입 – 생성 방법을 등록하면 컴포넌트에서 선언만 하고 사용 – 인스턴스 생성 방법을 신경 쓸 필요가 없음 – 컴포넌트처럼 의존성 구성 가능 – 더미 객체를 사용하는 단위 테스트에 유리 19
  20. 20. Angular는 모듈화를 지원한다. 20
  21. 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. 22. Angular는 CLI를 지원한다. 22
  23. 23. Angular CLI Command Line Interface – 프로젝트 기본 틀 생성 + 구성요소 추가 + 서버 실행 + TSLint + 테스트 + 빌드 + 배포 자동화 – CLI 버전에 따라 기본 구성이 달라짐 23
  24. 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. 25. Angular는 최신 트렌드를 적극 도입한다. 25
  26. 26. 최신 트렌드 웹 컴포넌트 PWA 크로스 플랫폼 – 웹, 모바일, 네이티브 앱, 데스크탑 애플리케이션 리액티브 프로그래밍 서버 사이드 렌더링 머티리얼 디자인 Angular CLI Augury 26
  27. 27. 27 앞으로 공부해야 할 것 지금 공부해야 할 것,
  28. 28. 28 지금 공부해야 할 것 TypeScript Angular 프레임워크 컴포넌트 기반 아키텍트 리액티브 프로그래밍 앞으로 공부해야 할 것 WebPack 최적화 서버 사이드 렌더링 & 검색 엔진 최적화 머티리얼 디자인 & 애니메이션
  29. 29. Q & A 29
  30. 30. 책 사신 분 스티커 드립니다!! 30
  31. 31. 고맙습니다. 31

×