응답하라 반응형웹 - 4. angular
- 2. Speaker Android Developer 김경열 (http://www.facebook.com/chitacan) Server-side Engineer 윤정부 (http://www.facebook.com/jeongbu.yun)
- 3. ● 유부남 개발자 ● Java Web Application Back-End 개발 자 ● 거품경력 10년차 ● Copy and Paste 달인. ● 주 업무는 Back-End ● Javascript 너무 어려워요. ● Javascript 싫어요. ● Javascript 열심히 공부중.
- 5. Index ● Angular.Js ? ● Angular.Js , ● Angular.Js .
- 6. Angular.Js ? ● Google이 만든 MV*(Model-View-Whatever) Javascript Framework. ● SPA(Single Page Application). ● 모던 웹을 좀더 화려하게 다룰수 있음. ● 오픈소스. ● 무료.
- 7. Angular.Js ?
- 8. Angular.Js ?
- 9. ● 쉬운 Hello World. ● 하지만 Hell World. ● ng-app, ng-model , {{yourName}} ● Hello World Sample에 Angular.Js의 많은 핵심 기술이 있 음. ● learning curve. ● 시간(== 돈) 비용 발생. Angular.Js ?
- 10. ● 오픈소스 != 무료. ● 오픈소스 = 공부. ● 오픈소스 = 해당 소스의 이념, 사용법, 나(or 프로젝트) 에 필요한지 확인. ● 오픈소스 = 엄청난 시간과 노력 ( == 돈) 이 필요. Angular.Js ?
- 11. ● 학습용 사이트 소개 ● http://angularjs.org/ ● https://egghead.io/tags/AngularJS Angular.Js ?
- 12. ● 흔한 국내 웹 개발시 javascript 사용기 ○ header : 공통 || 라이브러리. ○ body || contents : 업무로직. ○ 심한 경우 각자 알아서 가져다 쓰기.. ○ 기타 필요한 라이브러리 및 개발 소스가 믹스. ● 코드는 협업. ● 소스 관리가 안됨. ● 개성이 넘쳐남. ● 중복코드, 미사용 코드 등 출처가 불명확 코드 난립. Angular.Js ,
- 13. Angular.Js ,
- 14. ● Back-End ○ Framework ○ 방법론 ○ 디자인 패턴 ● Javascript ... ● 아무거나 막 쓸수는 없음. ● 충분히 검증된 Framework. ● Back-End 개발자도 잘 적응할 수 있는 Framework. Angular.Js ,
- 15. ● MVC || MV* Framework. ● 확장성과 개발 생산성. ● 유용한 기능. ● Learning Curve. ● Hot 프레임웍. Angular.Js ,
- 16. Angular.Js ,
- 17. ● http://www.infoq.com/research/top-javascript-mvc- frameworks ● Angular.Js VS BackBone. ● 협업(or 커뮤니케이션) 이 가능. Angular.Js ,
- 18. ● 양방향 데이터 바인딩. ● MVC ○ Model ○ ViewModel ○ View ○ Controller Angular.Js .
- 19. ● Templates. ● DI (Dependency Injection). ● Directives. ● Testing. Angular.Js .
- 20. 반응형 웹을 위한 Angular.js? Angular.js 는 반응형 웹만을 위한 프레임워크는 아닙니다. 하지만 편리한 도구들을 제공해 줍니 다.
- 21. 웹 앱 만들기 ● 브라우저 외부의 이벤트와 데이터에 ● 우리가 만든 문서가 반응하면 됩니다.
- 22. 어디에 반응할 건데? ● 사용자 이벤트(click, touch, focus…) ● 외부 데이터(http, accelerometer, video, audio) ● form 입력 ● URL ● 화면 크기
- 23. 근데 화면 크기는 ● css 에 맡깁시다!! ● 귀찮으시면 Bootstrap 다크포스를...
- 24. 뭐가 필요할까? ● Browser API ● Dom API ● CSS class API ● 복잡한 구조를 정리하기 위한 패턴, 프레임워크들 ○ mvc, promise...
- 25. 어떻게 반응하나? $('#btn').on('click', function(e) { e.preventDefault(); // do something $('#btn').addClass(‘clicked’); }); $('#btn').on('click', function(e) { e.preventDefault(); // do something $('#btn').addClass(‘clicked’); }); $('#btn').on('click', function(e) { e.preventDefault(); // do something $('#btn').addClass(‘clicked’); }); $('#btn').on('click', function(e) { e.preventDefault(); // do something $('#btn').addClass(‘clicked’); }); $('#btn').on('click', function(e) { e.preventDefault(); // do something $('#btn').addClass(‘clicked’); });
- 26. 어떻게 반응하나? $.ajax({ url:'/need_something', type:'GET', success: function(res) { $('aside div p').html(res.value); } }); $.ajax({ url:'/need_something', type:'GET', success: function(res) { $('aside div p').html(res.value); } }); $.ajax({ url:'/need_something', type:'GET', success: function(res) { $('aside div p').html(res.value); } }); $.ajax({ url:'/need_something', type:'GET', success: function(res) { $('aside div p').html(res.value); } });
- 27. 반응하기 외부 이벤트와 데이터에 반응하고, 결과를 보여주려면, Dom 을 찾아다녀야 됩니다. $(‘너‘).어디있니()
- 28. 이러면 어떨까요? <button ng-click=’click(data)’>oh</button> <p ng-class=’{error:data}’>message</p> HTML 을 확장해 Dom이 스스로 자신이 반응해 야 할 이벤트와 데이터를 알 수 있다면?
- 29. ● Dom과 Javascript 간의 데이터 공유 >>> Data Binding ● HTML을 확장해 새로운 규칙 추가 >>> Directive 그 밖에도 component, DI, testing 등 엄청난 장점들이 있지 만 오늘은 여기에만 집중!! Angular Way.
- 30. Data Binding {{ data }} data dom javascript ● Dom 과 양방향으로 결합된 js 오브젝트 제공($scope)
- 31. Data Binding <script> //... $scope.data = ‘Hello’; // ... </script> <p>{{ data }}</p><p>Hello</p>
- 33. Directive HTML 을 확장해 새로운 규칙을 가르쳐줍니다. <p ng-class=’{error:data}’>message</p> <p ng-if=’data’>message</p>
- 35. Form 에도 반응해 봅시다. Data Binding과 Directive 를 활용하면 유효성 검 사를 HTML에 선언할 수 있습니다. <div class=’form-group’ ng-class=’{err: form.url.$invalid}’> <input class=’form-control’ type=’url’ name=’url’/> <p class=’help’ ng-show=’form.url.$invalid’>Invalid</p> </div>
- 37. URL 에 반응하기 URL에 따라 조금씩 다른 HTML과 동작이 필요하다면? /book/:bookId >>> book.html /book/:bookId/ch/:chapterId >>> chapter.html
- 38. Router, Controller angular.js 의 controller와 router 를 활용하면 URL에 쉽게 반 응할 수 있습니다. function($routeProvider, $locationProvider) { $routeProvider.when('/Book/:bookId', { templateUrl: 'book.html', controller: BookCtrl, }); $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCtrl, }); });
- 40. Hack with Angular.js ● Angular.js 는 웹 앱을 만드는데 편리한 도구들을 제공해 줍니다. ● Angluar.js로 반응형 웹을 만드는 건 즐겁습니다!!
- 41. 끝 Hack the response with ng