Angular2를 위한 컴포넌트 분석과 개발
Your SlideShare is downloading.
×
![$(function () {
var element = $('.item:first')[0];
console.log(element);
});
jQuery](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-8-2048.jpg?cb=1668251218)
![VanillaJSwindow.onload = function () {
var element, elements = [];
var className = 'item';
if (typeof document.querySelect...](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-9-2048.jpg?cb=1668251218)
![var app = angular.module('app', [
])
.controller('MainCtrl', function ($scope) {
// 변수 정의
$scope.content = 'New Item';
$sc...](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-19-2048.jpg?cb=1668251218)
![var app = angular.module('app', [])
.run(function ($rootScope) {
// angular.element be used like jQuery.
$rootScope.title ...](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-27-2048.jpg?cb=1668251218)
![var app = angular.module('app', [])
.directive('input', function () {
return {
restrict: 'E',
priority: 3,
link: function ...](https://image.slidesharecdn.com/xecon2016-angular2-inbusinessfinal2-161126114816/75/angularjs-2-version-1-and-reactjs-31-2048.jpg?cb=1668251218)
Check these out next
More Related Content
Slideshows for you (20)
Similar to AngularJS 2, version 1 and ReactJS (20)
More from Kenneth Ceyer (14)
Recently uploaded (20)
AngularJS 2, version 1 and ReactJS
- 1. 한성민 IGAWorks CI 개발 파트장 PIGNOSE 편집자
- 2. AngularJS?
- 3. AngularJS? Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화 반대로 DOM에 값이 변경되면 Javascript 변수도 자동으로 동기화
- 4. AngularJS? Javascript에서 변수만 변경하면 DOM에서도 자동으로 동기화 반대로 DOM에 값이 변경되면 Javascript 변수도 자동으로 동기화
- 5. 동기화 = 바인딩 양방향 바인딩 프레임워크 HTML과 Javascript 양쪽 모두 바인딩을 지원하는..
- 6. Why AngularJS
- 7. Why AngularJS 생산성 향상 코드 재활용성
- 8. $(function () { var element = $('.item:first')[0]; console.log(element); }); jQuery
- 9. VanillaJSwindow.onload = function () { var element, elements = []; var className = 'item'; if (typeof document.querySelectorAll === 'function') { elements = document.querySelectorAll('.' + className); } else { // IE 8 lower polyfills var allElements = document.getElementsByTagName('*'); for (var i = 0; i < allElements.length; i++) { var searchElementItem = allElements[i]; if (typeof searchElementItem.className !== 'undefined') { if (searchElementItem.className.indexOf(className) !== -1) { elements.push(searchElementItem); } } } } if (elements !== null && elements.length > 0) { element = elements[0]; } console.log(element); }
- 10. 고작 DOM 객체 하나 가져오는 과정 Vanilla JS jQuery 2분 + 10초
- 11. 개발 속도 ↑, 코스트 ↓
- 12. AngularJS 는
- 13. 탄생배경 2009년 Google Feedback 서비스를 개발하는 과정에서 탄생
- 14. 탄생배경 6개월간 17,000 라인의 코드로도 만족스럽지 못했던 작업이. AngularJS 1을 통해 3주만에 1,500 라인의 코드로 대체가 가능
- 15. AngularJS 1 구조 Vanilla JS, jQuery AngularJS 1 변수 정의 DOM 삽입 이벤트 바인딩 변수 정의 이벤트 함수 정의 AngularJS Watcher
- 16. AngularJS 1 구조 AngularJS 1는 완전한 MVC 모델이 아님, Model, View, ViewModel Pattern Controller Module Root Scope Scope HTML
- 17. AngularJS 1 구조 Request /page/main Request /page/intro Controller MainCtrl Controller IntroCtrl MainCtrl Function IntroCtrl Function Scope Scope HTML
- 18. // 변수 정의 var content = 'New Item'; var message = 'Hello World'; var newDomObj = document.createElement('a'); // DOM 삽입 newDomObj.href = '#'; newDomObj.innerHTML = content; document.body.appendChild(newDomObj); // 이벤트 바인딩 newDomObj.addEventListener('click', function (event) { event.preventDefault(); alert(message); }); Vanilla JS
- 19. var app = angular.module('app', [ ]) .controller('MainCtrl', function ($scope) { // 변수 정의 $scope.content = 'New Item'; $scope.message = 'Hello World'; // 이벤트 바인딩 $scope.onClick = function ($event) { $event.preventDefault(); alert($scope.message); }; }); AngularJS 1
- 20. <!DOCTYPE HTML> <html lang="en-US" ng-app="app"> <head> ... </head> <body ng-controller="MainCtrl"> <a href="#" ng-click="onClick($event);">{{content}}</a> </body> </html> AngularJS 1
- 21. <!DOCTYPE HTML> <html lang="en-US" ng-app="app"> <head> ... </head> <body ng-controller="MainCtrl"> <a href="#" ng-click="onClick($event);">{{content}}</a> </body> </html> AngularJS 1 var app = angular.module('app', [ ]) .controller('MainCtrl', function ($scope) { // 변수 정의 $scope.content = 'New Item'; $scope.message = 'Hello World'; // 이벤트 바인딩 $scope.onClick = function ($event) { $event.preventDefault(); alert($scope.message); }; }); 양방향 바인딩 지원
- 22. 내부동작 변수의 변경 DOM Digest Loop Watch List
- 23. 쉽게 변수의 변경 DOM
- 24. Why AngularJS 생산성 향상 코드 재활용성
- 25. 라이브러리, 프레임워크 별 패턴 Vanilla JS jQuery PROTOTYPE Vanilla JS jQuery.fn AngularJS 1 Vanilla JS jQuery Factory Provider Filter Service Controller Module Etc Directive
- 26. AngularJS 1 jQuery Lite (빌트-인)
- 27. var app = angular.module('app', []) .run(function ($rootScope) { // angular.element be used like jQuery. $rootScope.title = angular.element('#wrapper .inner').eq(0).data('title'); }); AngularJS 1 angular.element로 jQuery와 같이 동작.
- 28. 사례 IGAWorks에서 개발중인 프론트 프레임워크 동적 엘리먼트 요소를 사용하는 개발 환경에서 불편사항 발생
- 29. 사례 태그가 추가되거나 변경될 때 마다 매번 전용 함수를 호출해야 함. Ex) $element.toggle();
- 30. $(function () { // 동적 HTML 태그 정의. var elem = $('<input type="text" placeholder="An Example" value="Example" />'); // 동적 태그를 Body 하위에 삽입. elem.appendTo('body'); // HomeWorks INPUT 컴포넌트 정의. elem.input(); }); jQuery
- 31. var app = angular.module('app', []) .directive('input', function () { return { restrict: 'E', priority: 3, link: function (scope, elem, attrs) { elem.input(); } }; }); AngularJS 1 Input 키워드 감지 대상이 Element 타입인 것만 체크 탐색된 대상에 전용 함수 수행.
- 32. Best Practice
- 33. Best Practice 싱글 페이지 어플리케이션 (SPA) 검색엔진 최적화 (SEO)
- 34. 싱글 페이지 어플리케이션 (SPA) 전통적인 웹 페이지 페이지 전환시 Javascript, CSS, Image 등 모든 리소스를 새로 다운로드 로딩시간이 오래걸리며, 불필요한 요청이 발생 SPA 필요한 리소스만 다운로드 페이지 전환에 로딩시간이 적게 발생
- 35. 싱글 페이지 어플리케이션 (SPA) Server 변경이 발생한 부분만 다운로드 데이터는 Javascript에서 관리
- 36. Best Practice 싱글 페이지 어플리케이션 (SPA) 검색엔진 최적화 (SEO)
- 37. 검색 엔진 최적화 (SEO) 정의 검색 제공업체 (Naver, Google) 등에서 웹 서버 페이지들을 크롤링 하는 부분에 포커스 이슈 SPA 특성 상 정적 페이지를 남기지 않기 때문에 검색 엔진이 동적 자바스크립트를 인식하기 어려운 문제
- 38. 검색 엔진 최적화 (SEO) AngularJS 1 버전의 Hashbang 해시뱅 (#!) 사용 시 SEO가 어려움. HTML5의 <base>를 이용한 동적 URL의 경우, 서버 사이드 랜더링으로 정적 페이지를 별도로 추가하여 진행. ?_escaped_fragment 및 <meta name=“fragment” />는 2015. 10 Google에서 Officially Deprecated 항목.
- 39. AngularJS 2
- 40. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 41. AngularJS 2 2016년 5월 3일 AngularJS 2 RC 버전 발표. 2016년 11월 17일 2.2.1 Released. AngularJS 2는 Typescript”도” 지원하는 컴포넌트 기반 프레임워크.
- 42. Typescript Typescript는 AngularJS 2에서 지원하는 언어의 종류. Microsoft사에서 2012년 발표된 Javascript 확장형 언어. AngularJS 2에서는 Google과 Microsoft의 콜라보레이션. Typescript는 이름에 맞게 타이핑 언어의 특성을 가짐.
- 43. Welcome to Hell Typescript Typescript ECMA 6 ECMA 5
- 44. Typescript OOP 기반의 컴포넌트 작성에 대한 문제 해결. 런타임에서 발생하는 오류를 타입기반 특성으로 미연에 방지. 모듈의 다형성, 상속에 대한 요구사항 지원.
- 45. class Alpaca { // Private member variables. private message: string = 'boowoo~ boowoo!!'; // Alpaca class's constructor. constructor() { console.log(this.bark()); } // Member function bark(): string { return this.message; } } Typescript
- 46. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 47. AngularJS 2 AngularJS 1 Component 기반 HTML5 Base URL 사용 Typescript를 통한 OOP 지원 Renderer 지원 Javascript, Typescript, Dart 지원 Scope, Controller, Directive 기반 HTML5 Base URL 사용, 해시 뱅 사용 OOP 미지원, 대체 디자인 패턴 지원 jQuery lite 빌트-인
- 48. 구조의 변경 Component Component Component View View Component AngularJS 2 AngularJS 1 Ctrl Ctrl View View Ctrl $scope$scope $scope $directive $service
- 49. 구조의 변경 AngularJS 2 AngularJS 1 Event Queue DOM Wait Digest Loop Watch List CD CD CD CD CD CD CD CD Digest Loop
- 50. AngularJS 2 추가 지원기능 Automatic Change Detection. Render Update 이벤트 지원. (Life Cycle) Child routes 지원. 선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Two Ways]. ECMA6 모듈 사용.
- 51. AngularJS 2 추가 지원기능 Automatic Change Detection. (?) Render Update 이벤트 지원. (Life Cycle) Child routes 지원. 선택적 바인딩 지원 [One Way(JS -> DOM, DOM -> JS), Double Ways]. ECMA6 모듈 사용.
- 52. $http({ method: 'POST', url: '/api/list' }).then(function(response) { $scope.list = response.list; $scope.$evalAsync(); }, function(response) { // some snippets... }); AngularJS 1
- 53. $http({ method: 'POST', url: '/api/list' }).then(function(response) { $scope.list = response.list; $scope.$evalAsync(); }, function(response) { // some snippets... }); AngularJS 1 비동기 작업의 경우 Render 시점을 알려주어야 함.
- 54. this.http.post('/api/list') .subscribe(response => this.list = response.list); AngularJS 2 !!!!
- 55. AngularJS 2 타입 스크립트 (Typescript)와 AngularJS 2 AngularJS 1 vs AngularJS 2 번들러(Bundler)와 Webpack
- 56. AngularJS 2와 번들러(Bundler) AngularJS 2를 Typescript로 개발 할 경우, 컴포넌트 모듈 별 Javascript 를 분리하고 Import를 통해 호출하게 되는데, 이때, Import는 브라우저에서 지원하는 기능이 아니기 때문에 번들러(Bundler) 사용이 필수적.
- 57. 번들러(Bundler)의 배경 ECMA6, Typescript 도입으로 인해 요구사항이 더욱 높아짐. 모듈 단위로 js 파일을 분리하고, Import 등으로 해당 컴포넌트/클래스를 불러오는 과정에서 번들러(Bundler)는 Import를 지원하지 않는 브라우저에 사용 됨.
- 58. 번들러(Bundler) 소개 SystemJS WebPack Jspm
- 59. AngularJS vs ReactJS
- 60. AngularJS vs ReactJS Overview 퍼포먼스 결론
- 61. Overview AngularJS 44% ReactJS 56% Deview 2016에서 살펴보는 관심도
- 62. Overview AngularJS ReactJS 2013.01.01 ~ 2016.11 Programming 카테고리에서 집계
- 63. AngularJS 2 ReactJS 구글(Google) 2016. 05 Typescript, Dart, Javascript MVVM IE9+, Modern Browsers TSC(Typescript) Typescript 페이스북(Facebook) 2013. 05 (오픈소스 발표) JSX, Javascript View (Virtual DOM) IE9+, Modern Browsers (2016. 01 IE 8 지원중단 발표) Babel REPL (Recommend) Flow 개발사 출시년도 개발언어 카테고리 지원 브라우저 Transpiler Typing
- 64. 퍼포먼스 측정 Overview 퍼포먼스 결론
- 65. Performance Benchmark AngularJS 2 마이그레이션에 앞서, 성능테스트가 필요함에 따라 벤치마크 AngularJS 1 / AngularJS 2 / ReactJS 별로 비교
- 66. Benchmark 1 Benchmark 2 Benchmark 3 Performance Benchmark
- 67. Benchmark 1 10,000개의 행을 Loop로 추가. Benchmark 2 10,000개의 행 중 5,000개의 행을 랜덤 삭제. Benchmark 3 1,000개의 행과 20개의 열로 중첩 Loop. Performance Benchmark
- 68. Performance Benchmark 3번 집계 후 평균 추산.
- 69. Performance Benchmark https://github.com/KennethanCeyer/AngularJS-vs-ReactJS-Benchmark 벤치마크 코드는 위 주소를 통해 확인 하실 수 있습니다.
- 70. AngularJS 1 AngularJS 2 1,228 933 2,172 Benchmark 1 ReactJS Benchmark 2 1,087 187 775 708 284 1,334Benchmark 3 ms ms ms ms ms ms ms ms ms Benchmark 1 10,000개의 행을 Loop로 추가. Benchmark 2 10,000개의 행 중 5,000개의 행을 랜덤 삭제. Benchmark 3 1,000개의 행과 20개의 열로 중첩 Loop.
- 71. 0 500 1,000 1,500 2,000 2,500 Benchmark 1 Benchmark 2 Benchmark 3 AngularJS 1 AngularJS 2 ReactJS 배열에서 변경을 통한 Update와 중첩 Loop의 경우 AngularJS 1과 비교해도 많은 성능 향상이 확인됨.
- 72. 원본 벤치마크 데이터
- 73. 하지만 DOM Rendering이 느린 것이 Fact
- 74. ReactJS와 AngularJS 2의 차이는 미미함
- 75. AngularJS vs ReactJS Overview 퍼포먼스 결론
- 76. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함.
- 77. class Apple { constructor() { this.binder = 'Banana'; } } AngularJS 2
- 78. var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } }); ReactJS
- 79. var Apple = React.createClass({ getInitialState: function() { return { binder: 'banana' }; }, handleChange: function(event) { this.setState({binder: event.target.value}); }, render: function() { ... } }); ReactJS 동기 작업 요구
- 80. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움.
- 81. SPA 중심적 AngularJS 2 양방향 바인딩(2 Two-way Binding)이 보다 간결함. 공식 Router 지원으로 확장 / 관리가 손쉬움. 검색엔진 개발사에서 개발 진행, 성장중인 프레임워크.
- 82. 검증된 ReactJS 안정화.
- 83. AngularJS 2 ReactJS 릴리즈 주기 비교 (2016. 11. 23 기준)
- 84. 검증된 ReactJS 안정화. Flux
- 85. 검증된 ReactJS 안정화. Flux Redux
- 86. Questions?
- 87. Thank you GitHub Email kennethan@nhpcw.com https://github.com/KennethanCeyer/AngularJS-Best-Practices
