SlideShare a Scribd company logo

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

최근 프론트엔드 개발 생태계의 변화와 Angular Framework에 대한 개괄

1 of 90
Download to read offline
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
Ad

Recommended

Angular2 톺아보기
Angular2 톺아보기 Angular2 톺아보기
Angular2 톺아보기 철민 배
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드NAVER D2
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSKenneth Ceyer
 
Angular js quick start
Angular js quick startAngular js quick start
Angular js quick start정기 김
 
Angular 2 rc5 조사
Angular 2 rc5 조사Angular 2 rc5 조사
Angular 2 rc5 조사Rjs Ryu
 
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.장현 한
 
Angular2를 활용한 컴포넌트 중심의 개발
Angular2를 활용한 컴포넌트 중심의 개발Angular2를 활용한 컴포넌트 중심의 개발
Angular2를 활용한 컴포넌트 중심의 개발Jin wook
 
Angular 기본 개념 잡기
Angular 기본 개념 잡기Angular 기본 개념 잡기
Angular 기본 개념 잡기장현 한
 

More Related Content

What's hot

가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJSJae Sung Park
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁WebFrameworks
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJSEunYoung Kim
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여AngularJS의 개발방식에 대하여
AngularJS의 개발방식에 대하여Jin wook
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page ApplicationSangmin Yoon
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In ProductionMooYeol Lee
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with AngularJT 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 ToolsSangHun Lee
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2성일 한
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1성일 한
 
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_jsWebFrameworks
 
[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성일 한
 

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

Angular Extreme Performance
Angular  Extreme PerformanceAngular  Extreme Performance
Angular Extreme PerformanceGustavo Costa
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Minko Gechev
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2FITC
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus 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
 
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 ThingsSangHun 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 ContainerKyung Koo Yoon
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_frameworkJT 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 bootChloeChoi23
 
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 configuratorscor7910
 
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 7Woojin Joe
 
The Power Of Event Chapter 6
The Power Of Event Chapter 6The Power Of Event Chapter 6
The Power Of Event Chapter 6Woojin Joe
 
The Power Of Event Chapter 5
The Power Of Event Chapter 5The Power Of Event Chapter 5
The Power Of Event Chapter 5Woojin Joe
 
The Power Of Event Chapter 3
The Power Of Event Chapter 3The Power Of Event Chapter 3
The Power Of Event Chapter 3Woojin Joe
 
The Power Of Event Chapter 2
The Power Of Event  Chapter 2The Power Of Event  Chapter 2
The Power Of Event Chapter 2Woojin Joe
 
The Power Of Event Chapter 1
The Power Of Event Chapter 1The Power Of Event Chapter 1
The Power Of Event Chapter 1Woojin 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 classWoojin 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 ProcessingWoojin Joe
 
신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침신학과 사회에 대한 성경의 가르침
신학과 사회에 대한 성경의 가르침Woojin Joe
 
ITBC Orientation
ITBC OrientationITBC Orientation
ITBC OrientationWoojin 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 [한빛미디어 리얼타임 세미나]