SlideShare a Scribd company logo
Angular	Seminar
앵귤러 아키텍처 하루만에 훑어보기
조우진 (jwj0831@gmail.com)
한빛미디어 리얼타임 세미나 05
발표에 앞서 다루는 내용
• Angular와 연관된 프론트엔드 개발 생태계
• Angular Framework의 아키텍처
• Angular CLI와 Spring boot를 사용한 Angular
개발 과정 데모
발표에 앞서 다루지 않는 것
• 프론트엔드 웹 개발에 한정된 개념 혹은 지식
• TypeScript의 고유한 syntax 및 feature
• Angular Framework 패키지별 API 사용 방법
• RxJs 및 Server Side Rendering 등 고급 주제
세미나의 목표
• Self-Learning을 위한 마중물 붓기
• Angular Framework 전체 구조 파악하기
• (어디가서 최신 프론트엔드 개발환경 아는 척 하기)
Angular
#1
프론트엔드 생태계 변화와
Angular Framework
한빛미디어 리얼타임 세미나 05
옛날 옛적에 JavaScript의 탄생
• Brendan이 말씀하시니 2주만에 JavaScript가 생
기니라…
http://speakingjs.com/es5/ch04.html
Savior	for	JavaScript
Savior	for	JavaScript ECMA2015	(ES6)
https://www.w3schools.com/js/js_versions.asp
JavaScript의 변화
http://kangax.github.io/compat-table/es6/
http://slides.com/sakataa/deck-2#/
Node.js
https://twitter.com/BusyRich/status/494959181871316992
왜 Node.js ?
OS
JVM
Java	codes…
Browser
V8,	Gecko,		…
JS	codes…
OS
Node.js (V8)
JS	codes…
Node.js &	NPM
http://www.modulecounts.com
알아야 할 것이 점점 늘어난다…
프론트엔드 관련 생태계
http://joaoperibeiro.com/the-front-end-developer-spectrum
• 패키지 관리 도구
• Bower
• NPM
• Yarn
주요 도구 분류 1/3
• 자동화 및 Task	도구
• Grunt
• Gulp
• Yeoman
• NPM
주요 도구 분류 2/3
• Compiler (Preprocessor)
• CoffeeScript
• Babel
• Typescript
주요 도구 분류 3/3
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,	…
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
Module화를 향한 노력
https://bertrandg.github.io/the-javascript-module-mess/
Angular
#2
Angular Framework
아키텍처 이해하기
한빛미디어 리얼타임 세미나 05
Angular Framework
• Angular is	a framework
• for	building client	applications
• in	HTML	and	either	JavaScript	or	a	language	
like TypeScript that	compiles	to	JavaScript.
Def	1)	Framework
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
Def	2)	Client	Application
• View가 있는 모든 플랫폼
• Web,	Mobile	Web,	native	mobile,	and	native	desktop
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/
주요개념 1: Component
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 1: Component
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 1: Component
• 모든 View는 Component로 통한다.
주요개념 1: Component
• 모든 View는 Component로 통한다.
주요개념 1: Component
• 모든 View는 Component로 통한다.
주요개념 1: Component
import	{	Component	}	from	'@angular/core';
@Component({
selector:	'app-root',
templateUrl:	'./app.component.html',
styleUrls:	['./app.component.css']
})
export	class	AppComponent {
title	=	'app';
}
주요개념 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와 유사하지요? )
주요개념 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,….
주요개념 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에 노출할 값이나 이벤트 처리 로직 등을
이 클래스 안에서 작성합니다.
주요개념 1: Component
• 컴포넌트는 View를 관리하는 컨테이너와 같다.
• Angular	App은 컴포넌트 트리를 반드시 갖는다.
• 컴포넌트 트리의 최상위 루트 컴포넌트를 관례적으
로 AppComponent라 한다.
• View를 컴포넌트로 나누는 기준은 없다.
• 재사용성
• 페이지 단위
주요개념 2: Template
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 2: Template
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 2: Template
• View를 구성하는 Angular-style의 마크업
• View를 구성하기 위하여 Component와 짝을 이룸
• HTML을 포함한 Angular에서 제공하는 다양한 연
산자 및 syntax를 사용하여 View를 구성하는 코드
를 작성
주요개념 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의 경로를 적었습니다.
주요개념 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을 쓰기도 합니다.
주요개념 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
주요개념 3: Component	Lifecycle
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 3: Component	Lifecycle
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 3: Component	Lifecycle
• Component의 생성과 소멸 주체
• 우리가 아닌 Angular	Framework
• Lifecycle을 Hooking하여 내 로직 실행
주요개념 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]');	}
}
주요개념 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할 라이프 사이클 인터페이스를 구현
하겠다고 선언합니다.
주요개념 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
주요개념 4: Directive	&	Pipe
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 4: Directive	&	Pipe
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 4: Directive	&	Pipe
• View를 동적으로 만들어주는 요소
• Directive
• Structural	Directives
• DOM 구조를 동적으로 변화시킬 때 사용
• NgIf,	NgFor,	NgSwitch,	…
• Attribute	Directives
• 컴포넌트, DOM 요소의 표현 및 동작방식을 변경할 때 사용
• NgStyle,	NgClass,	…
주요개념 4: Directive	&	Pipe
• Pipe
• View에 노출하는 데이터를 변형시킬 때 사용
• DatePipe,	UpperCasePipe,	CurrencyPipe,	….	
<p>Seminal	Date:	{{	seminarDate |	date:'YYYY-MM-dd'	}}</p>
<p>Seminal	Date:	{{	seminarDate |	date	|	uppercase	}}</p>
주요개념 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
주요개념 5: Data	Binding
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 5: Data	Binding
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 5: Data	Binding
• Component(+Template)과 View 사이의 연결고리
• 모든 일은 Angular가 한다. 우리는 선언만 할 뿐
• 절차적인 방식 vs	선언적인 방식
• http://www.notforme.kr/archives/1698
주요개념 5: Data	Binding
• 3가지 바인딩:	Property,	Event,	Two-way	Binding
주요개념 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);	}
}
주요개념 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	바인딩을 위해 메서드도 구현합니다.
주요개념 5: Data	Binding
<h1>	{{	title	}}	</h1>
<input	type="text"
[ngModel]="myData"
[size]="inputSize"
(keyup)="checkInput($event)">
<button	type="button"	(click)="showData()">show	me</button>
주요개념 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 합니다.
주요개념 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를 바인딩 했습니다.
주요개념 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 메서드를 바인딩했습니다.
주요개념 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와 양방향 바인딩을 선언했습니다.
주요개념 6: Service	&	DI
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 6: Service	&	DI
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
주요개념 6: Service	&	DI
• Service
• 애플리케이션에서 사용할 값, 함수 등 무엇이든 OK!
• 일반적으로 View와 관련 없는 로직
• 비즈니스로직, 애플리케이션 공통 코드, Data Store,	…
• 단일 책임 원칙
• Dependency	Injection
• 우리가 보는 것은 Framework입니다.
• Angular에도 의존성 주입 기능이!!!
주요개념 6: Service	&	DI
• Dependency	Injection
• 우리가 보는 것은 Framework입니다.
• Angular에도 의존성 주입 기능이!!!
• DI를 위해 필요한 것
1. 의존성 정보를 어딘가 기록하고
2. 의존 하는 쪽에서는 constructor에서 Arg.로 받음
주요개념 6: Service	&	DI
import	{	Injectable	}	from	'@angular/core';
@Injectable()
export	class	TestDiService {
constructor()	{	}
print()	{	console.log('hello');	}
}
컴포넌트에서 의존할 서비스
클래스를 간단히 선언합니다.
주요개념 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();	}
}
서비스 클래스에 의존성이 있는
컴포넌트 클래스 선언합니다.
주요개념 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 개념에서도 선언 가능
주요개념 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가 해당 인스턴스를 주입합니다.
주요개념 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();	}
}
주입 받은 서비스를 사용할 수 있습니다.
주요개념 6: Service	&	DI
• DI를 사용하는 이유
• 객체 간의 결합도 낮추기 (Framework에게 맡겨줘)
• 단일 인스턴스 보장 받기
• 서비스 클래스를 애플리케이션 전역에서 사용하는
MemoryDB,	Message	Bus등으로 쓸 수 있어요~~
주요개념 7: Module
• ES6에서 말하는 모듈이 아님
• 지금까지 설명했던 Angular의 요소들을 하나로 담는
컨테이너
• Angular Framework의 많은 기능은 모듈 단위로 제공
• FormsModule,	ReactiveFormsModule,	RouterModule,	
HttpModule,	…
주요개념 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 {	}
주요개념 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이라 명명)
주요개념 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 할 수 있습니다.
주요개념 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에 명시해야 합니다.
주요개념 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 {	}
모듈 레벨에서 의존성 주입 선언도 가능합니다.
(컴포넌트에 선언하는 것보다 모듈에 선언한는 것을 권장합니다.)
Angular에서 제공하는 package
• @angular/common
• @angular/compiler	(@compiler-cli)
• @angular/core
• @angular/forms
• @angular/http
• @angular/platform-browser	(platform-browser-dynamic)
• @angular/palatform-server
• …
Angular에서 제공하는 주요 Module
• CommonModule:	Angular에서 제공하는 각종 지시자 등을 포함하는 기본 모
듈
• BrowserModule:	웹에서 실행할 때 필요한 기본 모듈,	CommonModule을 내
장하고 있음
• FormsModule,	ReactiveFormsModule: 폼 구성에 필요한 지시자 등을 제공,
ngModel을 쓰려면 반드시 필요
• HttpModule,	JsonpModule:	ajax 호출과 관련된 서비스 클래스 등을 제공
• BrowserAnimationsModule:	브라우저의 애니메이션 처리(css) API를 제공
Angular를 구성하는 요소들
Component	LifeCycle
View
Component
Service
Dependency	Injection
Template
Directive
Pipe
Data	Binding
Metadata
Angular
#3
Angular (CLI) – SpringBoot
데모 세션
한빛미디어 리얼타임 세미나 05
Angular	CLI
• Angular	프로젝트를 CLI에서 쉽게 구성/개발할 수있도록 도와주는 도
구
• Google에서 관리하는 오픈소스는 아님!
• Google에서는 추후 Bazel +	Clouser 기반의 빌드 도구가 나올수도 있
음
• (2017년 7월) 현재까지는 Angular 개발환경 셋팅에 가장 좋은 도구
• 설치: npm install	-g	@angular/cli
Angular	CLI	+	Spring	Boot
Frontend 폴더에 angular	source가 있습니다.
Angular	CLI	+	Spring	Boot
Frontend 폴더에 angular	source가 있습니다.
"apps": [
{
"root": "src",
"outDir": "../resources/static",
"assets": [
"assets",
"favicon.ico"
],
.angular-cli.json에 빌드 결과물의 위치를
Boot의 static으로 지정합니다.
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>
<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>
감사합니다.

More Related Content

What's hot

가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Jae Sung Park
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
WebFrameworks
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
EunYoung Kim
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Gunhee Lee
 
AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여
Jin wook
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
MooYeol Lee
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
JT Jintae Jung
 
Angular2를 위한 컴포넌트 분석과 개발
Angular2를 위한 컴포넌트 분석과 개발Angular2를 위한 컴포넌트 분석과 개발
Angular2를 위한 컴포넌트 분석과 개발
Jin wook
 
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
Kenneth Ceyer
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
우현 김
 
Angular Popular Tools
Angular Popular ToolsAngular Popular Tools
Angular Popular Tools
SangHun Lee
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
성일 한
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
성일 한
 
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
WebFrameworks
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
NAVER D2
 
Java calendar project(gui)(swing window)(androidapp)
Java calendar project(gui)(swing window)(androidapp)Java calendar project(gui)(swing window)(androidapp)
Java calendar project(gui)(swing window)(androidapp)
kimsungryong
 
Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5
성일 한
 
Ionic project guide
Ionic project guideIonic project guide
Ionic project guide
Jong Woo Rhee
 

What's hot (20)

가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
Angular2를 위한 컴포넌트 분석과 개발
Angular2를 위한 컴포넌트 분석과 개발Angular2를 위한 컴포넌트 분석과 개발
Angular2를 위한 컴포넌트 분석과 개발
 
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
Angular Popular Tools
Angular Popular ToolsAngular Popular Tools
Angular Popular Tools
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
 
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
Java calendar project(gui)(swing window)(androidapp)
Java calendar project(gui)(swing window)(androidapp)Java calendar project(gui)(swing window)(androidapp)
Java calendar project(gui)(swing window)(androidapp)
 
Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5Ionic으로 모바일앱 만들기 #5
Ionic으로 모바일앱 만들기 #5
 
Ionic project guide
Ionic project guideIonic project guide
Ionic project guide
 

Viewers also liked

Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
OPITZ CONSULTING Deutschland
 
Angular Extreme Performance
Angular  Extreme PerformanceAngular  Extreme Performance
Angular Extreme Performance
Gustavo Costa
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 

Viewers also liked (6)

Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
 
Angular Extreme Performance
Angular  Extreme PerformanceAngular  Extreme Performance
Angular Extreme Performance
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 

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

Angular CodeLab 두번째
Angular CodeLab 두번째Angular CodeLab 두번째
Angular CodeLab 두번째
SangHun Lee
 
Angularcdk
AngularcdkAngularcdk
Angularcdk
Seokju Na
 
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
ChangHyeon Bae
 
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
Sang Don Kim
 
Angular Features and New Things
Angular Features and New ThingsAngular Features and New Things
Angular Features and New Things
SangHun Lee
 
04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)
Hankyo
 
Spring Framework - Inversion of Control Container
Spring Framework - Inversion of Control ContainerSpring Framework - Inversion of Control Container
Spring Framework - Inversion of Control Container
Kyung Koo Yoon
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_framework
JT Jintae Jung
 
Spring3 발표자료 - 김연수
Spring3 발표자료 - 김연수Spring3 발표자료 - 김연수
Spring3 발표자료 - 김연수
Yeon Soo Kim
 
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian 대한민국
 
백기선의 스프링 부트
백기선의 스프링 부트백기선의 스프링 부트
백기선의 스프링 부트
Keesun Baik
 
Spring vs. spring boot
Spring vs. spring bootSpring vs. spring boot
Spring vs. spring boot
ChloeChoi23
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재
Hankyo
 
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
중선 곽
 
Angular, What is SinglePageApplication
Angular, What is SinglePageApplicationAngular, What is SinglePageApplication
Angular, What is SinglePageApplication
일웅 전
 
[스프링 스터디 1일차] 오브젝트와 의존관계
[스프링 스터디 1일차] 오브젝트와 의존관계[스프링 스터디 1일차] 오브젝트와 의존관계
[스프링 스터디 1일차] 오브젝트와 의존관계
AnselmKim
 
ASP.NET Core와 Azure App Service와의 환상적인 만남
ASP.NET Core와 Azure App Service와의 환상적인 만남ASP.NET Core와 Azure App Service와의 환상적인 만남
ASP.NET Core와 Azure App Service와의 환상적인 만남
SangHoon Han
 
Component configurator
Component configuratorComponent configurator
Component configurator
scor7910
 
VSTS와 Azure를 이용한 팀 프로세스 관리
VSTS와 Azure를 이용한 팀 프로세스 관리VSTS와 Azure를 이용한 팀 프로세스 관리
VSTS와 Azure를 이용한 팀 프로세스 관리
Gyuwon Yi
 

Similar to Angular Seminar [한빛미디어 리얼타임 세미나] (20)

Angular CodeLab 두번째
Angular CodeLab 두번째Angular CodeLab 두번째
Angular CodeLab 두번째
 
Angularcdk
AngularcdkAngularcdk
Angularcdk
 
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
 
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
[Td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
 
Angular Features and New Things
Angular Features and New ThingsAngular Features and New Things
Angular Features and New Things
 
04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)
 
Spring Framework - Inversion of Control Container
Spring Framework - Inversion of Control ContainerSpring Framework - Inversion of Control Container
Spring Framework - Inversion of Control Container
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_framework
 
Spring3 발표자료 - 김연수
Spring3 발표자료 - 김연수Spring3 발표자료 - 김연수
Spring3 발표자료 - 김연수
 
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
Atlassian을 이용한 애자일 ALM 소개 / JIRA 프로젝트 예산 관리 - 커브
 
백기선의 스프링 부트
백기선의 스프링 부트백기선의 스프링 부트
백기선의 스프링 부트
 
Spring vs. spring boot
Spring vs. spring bootSpring vs. spring boot
Spring vs. spring boot
 
ecdevday4
ecdevday4ecdevday4
ecdevday4
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재
 
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
 
Angular, What is SinglePageApplication
Angular, What is SinglePageApplicationAngular, What is SinglePageApplication
Angular, What is SinglePageApplication
 
[스프링 스터디 1일차] 오브젝트와 의존관계
[스프링 스터디 1일차] 오브젝트와 의존관계[스프링 스터디 1일차] 오브젝트와 의존관계
[스프링 스터디 1일차] 오브젝트와 의존관계
 
ASP.NET Core와 Azure App Service와의 환상적인 만남
ASP.NET Core와 Azure App Service와의 환상적인 만남ASP.NET Core와 Azure App Service와의 환상적인 만남
ASP.NET Core와 Azure App Service와의 환상적인 만남
 
Component configurator
Component configuratorComponent configurator
Component configurator
 
VSTS와 Azure를 이용한 팀 프로세스 관리
VSTS와 Azure를 이용한 팀 프로세스 관리VSTS와 Azure를 이용한 팀 프로세스 관리
VSTS와 Azure를 이용한 팀 프로세스 관리
 

More from Woojin Joe

자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰
Woojin Joe
 
The Power Of Event Chapter 7
The Power Of Event Chapter 7The Power Of Event Chapter 7
The Power Of Event Chapter 7
Woojin Joe
 
The Power Of Event Chapter 6
The Power Of Event Chapter 6The Power Of Event Chapter 6
The Power Of Event Chapter 6
Woojin Joe
 
The Power Of Event Chapter 5
The Power Of Event Chapter 5The Power Of Event Chapter 5
The Power Of Event Chapter 5
Woojin Joe
 
The Power Of Event Chapter 3
The Power Of Event Chapter 3The Power Of Event Chapter 3
The Power Of Event Chapter 3
Woojin Joe
 
The Power Of Event Chapter 2
The Power Of Event  Chapter 2The Power Of Event  Chapter 2
The Power Of Event Chapter 2
Woojin Joe
 
The Power Of Event Chapter 1
The Power Of Event Chapter 1The Power Of Event Chapter 1
The Power Of Event Chapter 1
Woojin Joe
 
Fusion prj-proposal for 10 2 class
Fusion prj-proposal for 10 2 classFusion prj-proposal for 10 2 class
Fusion prj-proposal for 10 2 class
Woojin Joe
 
Part 1 A Simple Introduction to Complex Event Processing
Part 1 A Simple Introduction to Complex Event ProcessingPart 1 A Simple Introduction to Complex Event Processing
Part 1 A Simple Introduction to Complex Event Processing
Woojin Joe
 
신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침
Woojin Joe
 
ITBC Orientation
ITBC OrientationITBC Orientation
ITBC Orientation
Woojin Joe
 
2010년 여름 신입부원 프로젝트 제안서(수정)
2010년 여름 신입부원 프로젝트 제안서(수정)2010년 여름 신입부원 프로젝트 제안서(수정)
2010년 여름 신입부원 프로젝트 제안서(수정)
Woojin Joe
 

More from Woojin Joe (12)

자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰
 
The Power Of Event Chapter 7
The Power Of Event Chapter 7The Power Of Event Chapter 7
The Power Of Event Chapter 7
 
The Power Of Event Chapter 6
The Power Of Event Chapter 6The Power Of Event Chapter 6
The Power Of Event Chapter 6
 
The Power Of Event Chapter 5
The Power Of Event Chapter 5The Power Of Event Chapter 5
The Power Of Event Chapter 5
 
The Power Of Event Chapter 3
The Power Of Event Chapter 3The Power Of Event Chapter 3
The Power Of Event Chapter 3
 
The Power Of Event Chapter 2
The Power Of Event  Chapter 2The Power Of Event  Chapter 2
The Power Of Event Chapter 2
 
The Power Of Event Chapter 1
The Power Of Event Chapter 1The Power Of Event Chapter 1
The Power Of Event Chapter 1
 
Fusion prj-proposal for 10 2 class
Fusion prj-proposal for 10 2 classFusion prj-proposal for 10 2 class
Fusion prj-proposal for 10 2 class
 
Part 1 A Simple Introduction to Complex Event Processing
Part 1 A Simple Introduction to Complex Event ProcessingPart 1 A Simple Introduction to Complex Event Processing
Part 1 A Simple Introduction to Complex Event Processing
 
신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침
 
ITBC Orientation
ITBC OrientationITBC Orientation
ITBC Orientation
 
2010년 여름 신입부원 프로젝트 제안서(수정)
2010년 여름 신입부원 프로젝트 제안서(수정)2010년 여름 신입부원 프로젝트 제안서(수정)
2010년 여름 신입부원 프로젝트 제안서(수정)
 

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