SlideShare a Scribd company logo
Angular
1. What is Single Page Application?
Cloud Bu / Iw Jhun
Angular ..?
우리가 하는 일
서비스 인터페이스 개발
• 플랫폼 인터페이스(API) 개발
• 콘텐츠 전송, 데이터 후처리 등..
서비스 GUI 개발
• 운영 Tool 개발
What Is Single Page App ?
아 저 Angluar 할 줄 알아요  요즘 Web App은 이렇더라구요..
Angular === Front Side Framework === SPA (Single Page App)
Unlimited scroll, Not document
Traditional Page Single Page Application
(https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)
• 빠르고 효율적인 응답
• 서버는 코어 로직에 집중 (템플릿 파싱과 같은 부하가 없어짐)
• 클라이언트 리소스 이용 (클라이언트 렌더링)
• 다양한 클라이언트 디바이스 지원 용이 (IOS, Android, PC, Web ..)
…
서비스 관점에서의 이점
• 컴포넌트 기반의 단위 테스트
• 모듈 재활용
• 번들링 을 통한 리소스 관리
• 개발 영역 분리
…
개발 관점에서의 이점
그럼 어떻게 이게 가능해지는 걸까 ?
Angular, What is SinglePageApplication
그래도 마냥 좋지 만은 않다.
• 클라이언트 서버 간의 중복 된 로직이 발생
(데이터 유효성 체크.. 등)
• SEO (short for search engine optimization)
• 높은 자바스크립트 테크닉 ( OOM 등 )
• 올바른 Restful API 설계와 견고한 보안적 설계가 필요.
• 유능한 클라이언트 개발자 구하기 어려움
SEO (Short for search Engine Optimization)..?
CSR(Client Side Rendering) 과 SSR(Server Side Rendering)
Angular, What is SinglePageApplication
Angular, What is SinglePageApplication
이 문제를 해결하기 위한
CSR & SSR (Isomorphic) 개발 노력
(Angular Universal : https://universal.angular.io)
더 자세한 것은 이 책을 추천!
• 클라이언트-서버 웹 앱 만들기 저. 캐시미어 새터노스
What is Angular ?
Angular, What is SinglePageApplication
Angular (Client Side Framework)
Client Side Framework. (Google)
Component 기반, MVW(Model-View-Whatever : MVVM, MVC 등을 뜻함)
• Multi-Device : Web App, Native, Desktop
• Code Generation, Universal (Not SEO), Code Spitting
• Angular CLI (Quick source generate, Test, Transpile&Build)
AngularJs Vs Angular ?
AngularJs (AngularJs 1.x) 의 설계 상의 문제점 (스코프, 더티 체크 등)
을 해결하기 위해 이름만 비슷할 뿐 새로이 만든 것이 Angular.
AngularJs 2  Angular 네이밍 변경
 Angular.Js / Angular 의 버전 체계에 혼선이 발생.
Angular, What is SinglePageApplication
Angular & Java
Angular Java
Dependencies NPM Maven
Build AngularCLI
(Webpack , Module
loader …)
Maven, Gradle …
Language TypeScript (Javascript) Java
Runtime Browser JVM
Angular, What is SinglePageApplication
1. 명확한 구조 ( 개발 체계 잡기 좋음 )
2. 객체 지향 개발 흐름
3. Template과 로직의 분리 (not JSX)
4. Typescript ( IDE 지원 좋음 )
5. Google의 적극적인 지원
높은 러닝 커브에도 추천하는 이유
Angular Architecture
Component
View를 구성하는 단위, Angular에서 가장 중요한 개념.
컴포넌트는 다른 컴포넌트를 포함할 수 있음 (부모-자식 관계 성립) : 다중 컴포넌트
Service
공통 비지니스 로직이 위치하는 곳, Angular core에서 라이프사이클 관리.
Route
요청 경로 (URL)에 따른 컴포넌트(View) 흐름을 제어.
Module
특정 목적에 연관 있는 Component의 집합.
<DEMO>
보너스
자바(Server Side)로 만드는 Single Page Application
Element(Component) 기반
자바 코드로 SPA 개발(컨버팅)
클라이언트 서버 간의 Data Binding 제공
Element
Vaadin Vs Angular
Vaadin
다음 기회에..
See you later, Thank You.

More Related Content

PDF
목적에 맞게 Angular, React, Vue
PDF
원모먼트 Vue js 적용기
PDF
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
PDF
[D2 오픈세미나]1.무한스크롤성능개선
PPTX
angular 세미나
PDF
Mean stack Start
PDF
JavaScript MEAN 스택
PPTX
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
목적에 맞게 Angular, React, Vue
원모먼트 Vue js 적용기
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[D2 오픈세미나]1.무한스크롤성능개선
angular 세미나
Mean stack Start
JavaScript MEAN 스택
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)

What's hot (20)

PDF
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
PPTX
Knockout js소개
PDF
모바일 웹앱 프로그래밍 과정
PDF
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
PPTX
Bootstrap
PDF
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
PDF
프로그레시브 웹앱(Pwa)
PDF
JavaScript 2014 프론트엔드 기술 리뷰
PDF
웹-워크플로우 베스트프랙티스
PDF
CSS Round Display KIG 발표자료
PPTX
Knock out - 삽질은 그만 #1
PDF
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
PDF
Web app 개발 방법론
PPTX
iinn studio for jQWidgets by iinnsoft
PDF
hexa core
PDF
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
PDF
PPT
Single Page Web
PPTX
지도 서비스용 웹앱 개발환경 사용기
PPTX
PHP Slim Framework with Angular
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
Knockout js소개
모바일 웹앱 프로그래밍 과정
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
Bootstrap
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
프로그레시브 웹앱(Pwa)
JavaScript 2014 프론트엔드 기술 리뷰
웹-워크플로우 베스트프랙티스
CSS Round Display KIG 발표자료
Knock out - 삽질은 그만 #1
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
Web app 개발 방법론
iinn studio for jQWidgets by iinnsoft
hexa core
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
Single Page Web
지도 서비스용 웹앱 개발환경 사용기
PHP Slim Framework with Angular
Ad

Similar to Angular, What is SinglePageApplication (20)

PPTX
Angular 기본 개념 잡기
PPTX
Angular 살짝 해보고 발표.
PDF
Angular는 사실 어렵지 않습니다.
PDF
Angular Features and New Things
PDF
Angular Seminar [한빛미디어 리얼타임 세미나]
PDF
앵귤러 첫걸음(Angular for beginers)
PDF
Front end dev 2016 & beyond
PDF
Angularjs 도입 선택 가이드
PPTX
Single-page Application
PPTX
Angular vs react
PDF
AngularJS In Production
PPTX
프론트엔드 개발자
PDF
AngularJS 2, version 1 and ReactJS
PPTX
Data-binding AngularJS
PPTX
Angular2 톺아보기
PDF
다시보는 Angular js
PDF
웹 본격적으로 배우기 전 감 잡기 - 1
PDF
막하는 스터디 네 번째 만남 AngularJs (20151108)
PDF
응답하라 반응형웹 - 4. angular
PDF
최근 Javascript framework 조사
Angular 기본 개념 잡기
Angular 살짝 해보고 발표.
Angular는 사실 어렵지 않습니다.
Angular Features and New Things
Angular Seminar [한빛미디어 리얼타임 세미나]
앵귤러 첫걸음(Angular for beginers)
Front end dev 2016 & beyond
Angularjs 도입 선택 가이드
Single-page Application
Angular vs react
AngularJS In Production
프론트엔드 개발자
AngularJS 2, version 1 and ReactJS
Data-binding AngularJS
Angular2 톺아보기
다시보는 Angular js
웹 본격적으로 배우기 전 감 잡기 - 1
막하는 스터디 네 번째 만남 AngularJs (20151108)
응답하라 반응형웹 - 4. angular
최근 Javascript framework 조사
Ad

Angular, What is SinglePageApplication

  • 1. Angular 1. What is Single Page Application? Cloud Bu / Iw Jhun
  • 3. 우리가 하는 일 서비스 인터페이스 개발 • 플랫폼 인터페이스(API) 개발 • 콘텐츠 전송, 데이터 후처리 등.. 서비스 GUI 개발 • 운영 Tool 개발
  • 4. What Is Single Page App ? 아 저 Angluar 할 줄 알아요  요즘 Web App은 이렇더라구요..
  • 5. Angular === Front Side Framework === SPA (Single Page App) Unlimited scroll, Not document
  • 6. Traditional Page Single Page Application (https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)
  • 7. • 빠르고 효율적인 응답 • 서버는 코어 로직에 집중 (템플릿 파싱과 같은 부하가 없어짐) • 클라이언트 리소스 이용 (클라이언트 렌더링) • 다양한 클라이언트 디바이스 지원 용이 (IOS, Android, PC, Web ..) … 서비스 관점에서의 이점 • 컴포넌트 기반의 단위 테스트 • 모듈 재활용 • 번들링 을 통한 리소스 관리 • 개발 영역 분리 … 개발 관점에서의 이점
  • 8. 그럼 어떻게 이게 가능해지는 걸까 ?
  • 10. 그래도 마냥 좋지 만은 않다. • 클라이언트 서버 간의 중복 된 로직이 발생 (데이터 유효성 체크.. 등) • SEO (short for search engine optimization) • 높은 자바스크립트 테크닉 ( OOM 등 ) • 올바른 Restful API 설계와 견고한 보안적 설계가 필요. • 유능한 클라이언트 개발자 구하기 어려움
  • 11. SEO (Short for search Engine Optimization)..? CSR(Client Side Rendering) 과 SSR(Server Side Rendering)
  • 14. 이 문제를 해결하기 위한 CSR & SSR (Isomorphic) 개발 노력 (Angular Universal : https://universal.angular.io)
  • 15. 더 자세한 것은 이 책을 추천! • 클라이언트-서버 웹 앱 만들기 저. 캐시미어 새터노스
  • 18. Angular (Client Side Framework) Client Side Framework. (Google) Component 기반, MVW(Model-View-Whatever : MVVM, MVC 등을 뜻함) • Multi-Device : Web App, Native, Desktop • Code Generation, Universal (Not SEO), Code Spitting • Angular CLI (Quick source generate, Test, Transpile&Build)
  • 19. AngularJs Vs Angular ? AngularJs (AngularJs 1.x) 의 설계 상의 문제점 (스코프, 더티 체크 등) 을 해결하기 위해 이름만 비슷할 뿐 새로이 만든 것이 Angular. AngularJs 2  Angular 네이밍 변경  Angular.Js / Angular 의 버전 체계에 혼선이 발생.
  • 21. Angular & Java Angular Java Dependencies NPM Maven Build AngularCLI (Webpack , Module loader …) Maven, Gradle … Language TypeScript (Javascript) Java Runtime Browser JVM
  • 23. 1. 명확한 구조 ( 개발 체계 잡기 좋음 ) 2. 객체 지향 개발 흐름 3. Template과 로직의 분리 (not JSX) 4. Typescript ( IDE 지원 좋음 ) 5. Google의 적극적인 지원 높은 러닝 커브에도 추천하는 이유
  • 25. Component View를 구성하는 단위, Angular에서 가장 중요한 개념. 컴포넌트는 다른 컴포넌트를 포함할 수 있음 (부모-자식 관계 성립) : 다중 컴포넌트
  • 26. Service 공통 비지니스 로직이 위치하는 곳, Angular core에서 라이프사이클 관리.
  • 27. Route 요청 경로 (URL)에 따른 컴포넌트(View) 흐름을 제어. Module 특정 목적에 연관 있는 Component의 집합.
  • 30. 자바(Server Side)로 만드는 Single Page Application Element(Component) 기반 자바 코드로 SPA 개발(컨버팅) 클라이언트 서버 간의 Data Binding 제공
  • 35. See you later, Thank You.