Angular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
1. 자바빈
[1995년] JAVA 탄생, 애플릿의강력함에매력
[1996년12월] Sun MicroSystems에서 자바빈1.0 명세발표, (자바를 위한 소프트웨어 콤포넌트 모델을 정의) 자바빈즈는 너무 단순했고, 개발자는 엔터프라이즈 개발자들은 좀 더 나은 것을 원함. 정교한 애플리케이션은 트랜잭션 지원, 보안, 분산컴퓨팅같은 서비스가 필요한데 반해 자바빈즈는 너무 단순함
[1998년3월] EJB 1.0 발표. EJB는엔터프라이즈급의 서비스를 제공하고 자바 콤포넌트의 사상을 서버측으로 확장했지만 원래의 자바빈즈가 가지고 있던 단순함은 잃어버림. 성공한 많은 애플리케이션이 EJB를 기반으로 구축되었음에도 EJB는본래 의도와 달리 엔터프라이즈 애플리케이션 개발을 단순화하지는 못함. 모든버전의EJB 명세에는“EJB는엔터프라이즈 애플리케이션의 작성을 쉽게 해준다” 라고 되어있다. EJB의 선언적 프로그래밍 모델이 트랜잭션, 보안과 같은 개발의 기반 구조의 여러 측면을 단순화했지만 배치설명자(Deployment Descriptor), 홈 인터페
이스, 원격인터페이스 등과 같은 과도한 코드를 기술하도록 함으로써 복잡성을 가중시켰고 시
간이 지날수록 개발자들은 환멸을 느꼈으며 결국 EJB 명성은 쇠퇴하기 시작했다.
“오라클자바몰”이라는 회사를 만들어서 내가 잘 아는 분야인 차를 팔기로 정했다. 차량의 구매는 현대자동차와하고, 현대자동차에 돈을 지불하고 차를 받기로 했다.
STS
New → Project → Spring Legacy Project
Project Name : carmaker
Simple Projects : Simple Spring Maven
프로젝트생성후
- 프로젝트 루트 아래의 pom.xml 파일을 오픈 후 스프링 버전을 4.2.0으로 변경
src/main/java 아래에서 edu.biz.ioc 패키지 생성
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
1. 자바빈
[1995년] JAVA 탄생, 애플릿의강력함에매력
[1996년12월] Sun MicroSystems에서 자바빈1.0 명세발표, (자바를 위한 소프트웨어 콤포넌트 모델을 정의) 자바빈즈는 너무 단순했고, 개발자는 엔터프라이즈 개발자들은 좀 더 나은 것을 원함. 정교한 애플리케이션은 트랜잭션 지원, 보안, 분산컴퓨팅같은 서비스가 필요한데 반해 자바빈즈는 너무 단순함
[1998년3월] EJB 1.0 발표. EJB는엔터프라이즈급의 서비스를 제공하고 자바 콤포넌트의 사상을 서버측으로 확장했지만 원래의 자바빈즈가 가지고 있던 단순함은 잃어버림. 성공한 많은 애플리케이션이 EJB를 기반으로 구축되었음에도 EJB는본래 의도와 달리 엔터프라이즈 애플리케이션 개발을 단순화하지는 못함. 모든버전의EJB 명세에는“EJB는엔터프라이즈 애플리케이션의 작성을 쉽게 해준다” 라고 되어있다. EJB의 선언적 프로그래밍 모델이 트랜잭션, 보안과 같은 개발의 기반 구조의 여러 측면을 단순화했지만 배치설명자(Deployment Descriptor), 홈 인터페
이스, 원격인터페이스 등과 같은 과도한 코드를 기술하도록 함으로써 복잡성을 가중시켰고 시
간이 지날수록 개발자들은 환멸을 느꼈으며 결국 EJB 명성은 쇠퇴하기 시작했다.
“오라클자바몰”이라는 회사를 만들어서 내가 잘 아는 분야인 차를 팔기로 정했다. 차량의 구매는 현대자동차와하고, 현대자동차에 돈을 지불하고 차를 받기로 했다.
STS
New → Project → Spring Legacy Project
Project Name : carmaker
Simple Projects : Simple Spring Maven
프로젝트생성후
- 프로젝트 루트 아래의 pom.xml 파일을 오픈 후 스프링 버전을 4.2.0으로 변경
src/main/java 아래에서 edu.biz.ioc 패키지 생성
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
본 슬라이드는 Windows환경에서 NginX구동을 실습하기 위해, PHP를 예로 들어 진행하고 있습니다. NginX는 PHP 동적웹페이지에 대한 처리보다, 정적 HTTP 서버에 적합 합니다.
본 슬라이드는 시작과 구동에 초점을 맞추고 있습니다. 설정관련 내용은 아래 공식 문서를 참조할 수 있습니다.
http://nginx.org/en/docs/beginners_guide.html
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Metaworks is Metadata Oriented Application Framework
which is Inspired from the Adaptive Object Models and OMG Reflection, MDA.
The main approach is
Application Component Generation on the fly from metadata
Now Metaworks version 3 Is A POJO framework that
encourages the Domain-Driven Design and
Especially for developing model-driven applications (UML, BPMN, etc)
3. • 웹 컴포넌트는 W3C의 표준
• 웹 컴포넌트 이용을 위해 보완 라이브러리 필요
– webcomponent.js와 Polymer Library 이용
• 웹 컴포넌트의 구성요소
– HTML 탬플릿
– HTML 임포트
– 쉐도우 돔
– 커스텀 엘리먼트
웹 컴포넌트 (web components)
4. • 탬플릿 태그를 이용한 재사용 HTML 정의가능
– 탬플릿 태그내의 엘리먼트들은 랜더링 되지 않음
HTML 탬플릿
<template id=“nav-item-template">
<div class=’nav’>
<div class=“item">메인</div>
<div class=“item">서비스 소개</div>
<div class=“item">서비스 특징</div>
</div>
</template>
5. • 외부 HTML 탬플릿 문서를 가져오는 방법
– 문서를 가져오기 위해 CORS 허용설정 필요
HTML Import
<link rel="import" href="http://mydomain/my-elements.html">
HTML문서 임포트 예
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('.info');
document.body.appendChild(el.cloneNode(true));
</script>
외부에 정의한 HTML 탬플릿 사용
6. • 노출 되지 않는 돔이다.
• 쉐도우 경계를 가져 외부 접근이 불가함 (캡슐화)
쉐도우 돔 (Shadow Dom)
<button class="blue">버튼</button>
<script>
var button = document.querySelector('button');
var root = button.createShadowRoot();
root.innerHTML = '<style>' +
':host { color:blue; }' +
'</style>' +
'<content></content>';
</script>
버튼에 대한 쉐도우 돔 만들기
7. • 문서 돔은 쉐도우 돔을 랜더링 하지 않음
– 즉 쉐도우 호스트와 연결된 쉐도우 돔은 문서 DOM과
별개로 사전 랜더링됨
쉐도우 돔
문서 DOM
쉐도우 돔 (Shadow Dom)
8. • 쉐도우 돔은 독립 스타일을 가짐
쉐도우 돔 (Shadow Dom)
쉐도우 경계
독립 스타일
(스타일이 캡슐화됨)
9. • 사용자가 정의하며 확장 컴포넌트
커스텀 엘리먼트
var myProto = Object.create( HTMLButtonElement.prototype )
myProto.createdCallback = callback;
var helloButton = document.registerElement( 'hello-button', {
prototype: myProto,
extends: 'button'
} )
function callback (){
this.onclick = function ( event ){
alert( this.id + " " + this.value );
}} 콜백함수에 이벤트 등록
엘리먼트 확장
자바스크립트를 이용한 커스텀 엘리먼트 정의
17. • 블록 엘리먼트는 Angular 2 컴포넌트로 전환가능
– 컴포넌트로 영역과 블록 구조를 정의함
• Angular 2 컴포넌트는 중첩 가능하다.
– 즉, 컴포넌트로 블록 구조를 잡고 컴포넌트가 컴포넌트를
포함하는 방식으로 웹 어플리케이션을 만든다.
엘리먼트와 Angular 2 컴포넌트
19. 컴포넌트란?
• 서비스 컴포넌트 아키텍쳐에서의 컴포넌트 의미
– 명세에 따른 배포, 조립, 재사용 가능한 서비스 구성단위
• Angular 2 컴포넌트
– 웹 페이지에서 재사용 가능한 사용자 정의 엘리먼트
– 컴포넌트 = 탬플릿 + 로직
20. 외부모듈 호출
컴포넌트
클래스 정의
컴포넌트
메타데이터 설정
Angular 2 컴포넌트 구조
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template:'탬플릿이 위치하는 곳'
})
export class MyComponent {
//로직이 위치하는 곳
}
ts
21. 컴포넌트 용어정의
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template:`<div>hello {{component}}!</div>
<button (click)="hello()">hello</button>`
})
export class MyComponent {
constructor() {}
name:string;
sayHello() {}
}
컴포넌트
장식자
Angular
라이브러리
모듈
모듈 명
클래스 명
모듈 공개
(클래스모듈)
외부 모듈 호출
컴포넌트 지시자
탬플릿 속성
탬플릿 표현식
바인딩타입
생성자 메서드
컴포넌트 메서드
탬플릿 입력 변수
22. • 컴포넌트 장식자를 이용해 컴포넌트 설정 진행
컴포넌트 데코레이터
@Component({
selector: 'my-component',
template:''
})
재사용 가능한 UI 정의
23. • 컴포넌트 초기화
– 컴포넌트 초기화 훅 ngOnInit은 생성자 이후에 호출됨
컴포넌트 초기화
export class MyComponente implements OnInit {
constructor() { }
ngOnInit() { }
}
훅 메서드
(OnInit의 상속유무와 관계없이 호출됨)
생성자를 이용한 컴포넌트 초기화
24. • 컴포넌트에서 자식 컴포넌트 포함하기
중첩 컴포넌트 표현
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template:’<my-profile></my-profile>’
})
import { Component } from '@angular/core';
@Component({
selector: 'my-profile‘,
template:’나의 프로필입니다.’ })
export class MyComponent {
}
자식 컴포넌트
부모 컴포넌트
25. • 컴포넌트에서 서비스 주입받기
컴포넌트 서비스 주입
import { Injectable } from '@angular/core';
@Injectable()
export class HelloService {
getName() {
return "Hello";
}
}
import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
template: ``,
providers: [HeroService]})
export class AppComponent implements OnInit {
constructor(private heroService: HeroService) { }
}
서비스
컴포넌트
26. • 부모 자식 컴포넌트간 데이터를 주고 받는 방법
• 상호작용을 위한 장식자
– @input : 부모로 부터 입력 받음
– @output : 자식이 부모 컴포넌트에게 데이터 전달
컴포넌트 상호작용
27. import { Component, EventEmitter, Input, Output } from
'@angular/core';
@Component({
selector: 'my-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="voted">Agree</button>
<button (click)="vote(false)" [disabled]="voted">Disagree</button>
`})
export class VoterComponent {
@Input() name: string;
@Output() onVoted = new EventEmitter<boolean>();
voted = false;
vote(agreed: boolean) {
this.onVoted.emit(agreed); // 부모 컴포넌트에 이벤트 전달
this.voted = true;
}}
컴포넌트 상호작용
자식 컴포넌트
28. 컴포넌트 상호작용
import { Component } from '@angular/core';
import { VoterComponent } from './voter.component';
@Component({
selector: 'vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<my-voter *ngFor="let voter of voters"
[name]="voter" (onVoted)="onVoted($event)">
</my-voter>`,
directives: [VoterComponent]
})
export class VoteTakerComponent {
agreed = 0; disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
} }
부모 컴포넌트
자식 컴포넌트
이벤트 대기