![컴포넌트 기반
추상화된 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](https://image.slidesharecdn.com/angular-170827185827/85/Angular-12-320.jpg)
![데이터 바인딩
AngularJS에서 가장 인기있었던 기능
– 성능 향상을 위해 단방향 바인딩이 기본
– 양방향 바인딩도 가능
– 프로퍼티 바인딩 : <span>{{ title }}</span>, <img [src]="imagePath"/>
– 이벤트 바인딩 : <div (click)="itemClick()"></div>
– 양방향 바인딩 : <input [(ngModel)]="email"/>
15](https://image.slidesharecdn.com/angular-170827185827/85/Angular-15-320.jpg)
![모듈화
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 {
}](https://image.slidesharecdn.com/angular-170827185827/85/Angular-21-320.jpg)
Angular 기본 개념 잡기
- 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
- 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
- 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
- 8. 프론트엔드 SPA 페이지 내부에서 라우터로 뷰를 전환 – 전통적인 HTML 페이지 전환 방식과 다름 해당 주소일 때 동작하는 컴포넌트를 등록 – 자식 라우터를 사용하면 딥 링크도 가능 (/product/1515/seller/3) 8
- 10. TypeScript JavaScript 상위집합(superset) – JavaScript + α – 정적 타입, 제네릭, 인터페이스, TSLint @어노테이션 === 함수 Angular 프레임워크에서 지원 – 함수 타입, 변수 타입 제공 – 기본 TSLint도 구성 Future JavaScript TypeScript 10 JavaScript
- 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
- 15. 데이터 바인딩 AngularJS에서 가장 인기있었던 기능 – 성능 향상을 위해 단방향 바인딩이 기본 – 양방향 바인딩도 가능 – 프로퍼티 바인딩 : <span>{{ title }}</span>, <img [src]="imagePath"/> – 이벤트 바인딩 : <div (click)="itemClick()"></div> – 양방향 바인딩 : <input [(ngModel)]="email"/> 15
- 17. 옵저버블 Push Model Data Stream Publisher 콜백 체인 → Promise 체인 → Async 체인 → Observable 체인 RxJS 내장 – 기본 패키지에 포함 데이터 스트림에 사용 – Everything is stream? – 키보드 입력 이벤트, 서비스 상태 전달에 적합 – Http는…? – WebSocket에 더 어울림 17
- 19. 서비스 & 의존성 주입 컴포넌트를 연결 – 전역 데이터 풀로 활용 의존성 주입기가 인스턴스를 생성하고 주입 – 생성 방법을 등록하면 컴포넌트에서 선언만 하고 사용 – 인스턴스 생성 방법을 신경 쓸 필요가 없음 – 컴포넌트처럼 의존성 구성 가능 – 더미 객체를 사용하는 단위 테스트에 유리 19
- 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 { }
- 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
Editor's Notes
- #5: 가장 큰 차이는 이름이 변경된 것, 그 다음은 개발 언어, 정기적인 버전업 AngularJS의 디렉티브를 엘리먼트 중심으로 썼다면 개발 방법은 거의 비슷 0.9.0 (2010-10-20) dragon-breath 1.0.0 (2012-06-13) temporal-dominatio 1.2.31 (2016-10-10) barking-moustache 1.6.6 (2017-08-18) interdimensional-cable 2.0.0 (2016-09-14) proprioception-reinforcemen 4.0.0 (2017-03-23) invisible-makeover 5.0.0-beta.4
- #7: 프레임워크에서 전부 제공. 개발 방법이 단일화, 이미 보장된 최적화 조합이 다르다고 내 개발 스택에서 돌아가지 않는 문제는 없음 많은 부분을 다룬다 === 공부할 내용이 많다. 해당 기능을 쓰려면 어떤 프레임워크라도 어차피 공부해야 한다. React router : react-router, react-enroute 데이터 풀 : Flux, Redux, MobX HTTP : jquery, axios, fetch, superagent Vue HTTP : jquery, vue-resource, axios
- #9: 딥링크는 서버 처리 필요 (딥링크 주소에는 index.html 이 없으니까) 딥링크 주소에 Angular 애플리케이션 페이지를 전달하면 주소는 Angular가 알아서 적용
- #11: TypeScript를 사용하면 정적 타입을 명시적으로 지정해야 하기 때문에 귀찮은 것은 사실 개발의 편의보다는 유지보수에 더 큰 이득이 있음
- #16: 어트리뷰트 바인딩은 조금 애매함
- #20: Redux, MobX 중에 뭐가 좋은가.. 걱정할 필요 없음
- #24: 컴포넌트는 보통 클래스 코드, 템플릿, 스타일, 스펙 파일이 필요 CLI로 한 번에 만드는 것이 정신건강에 좋음 버전에 따라 기본 템플릿이 변경되거나 구성요소가 변경되는 경우도 있음 최근 추가 : 라우터 가드 생성 명령, i18n을 지원하는 ng xi18n
- #27: 네이티브 앱 : Ionic, NativeScript