프론트엔드스터디 E07 js namespace test debugging deferred

100 %
0 %
Information about 프론트엔드스터디 E07 js namespace test debugging deferred

Published on June 5, 2016

Author: youngbeomrhee

Source: slideshare.net

1. 프론트엔드 스터디 CH.07. Namespace, Test, Debugging, Deferred.

2. 1. 전역의 오염을 막아주는 Namespace 2. 더 나은 코드를 위한 Test, Debugging 3. 비동기처리를 위한 Deferred, promise +@

3. 전역의 오염 1. Namespace <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>전역의 오염</title> </head> <body> <script src="../js/a.js"></script> <!-- ... 여러 개의 js가 import ... --> <script src="../js/a2.js"></script> <script> console.dir(window); </script> </body> </html> var a = 'a'; var ab, ac, ad, ae; var a = 'a2'; var ab, ac2, ad2, ae;

4. var로 선언한 모든 변수가 전역에 매핑된다. 몇 가지 문제점 - 같은 이름의 변수가 있을 경우, 기존의 변수가 Override 된다. - 특정 변수가 선언된 파일을 찾기가 쉽지 않다. 전역의 오염 1. Namespace

5. 폴더 및 파일의 구조를 객체의 구조와 맞춘다 1. Namespace Namespace를 사용하자 폴더 및 파일 객체

6. 코드 -> 1. Namespace Namespace를 만드는 기법

7. 코드 -> 1. Namespace Refactoring

8. 만들려고 하는 객체가 이미 존재하는지 여부를 체크한 다. 새로운 객체를 정의할 때 사용되는 (var로 정의 후에 대 입하는 등의) 로직이 전역을 오염시키지 않도록 즉시실 행 함수 등의 기법을 사용한다. 생성하는 객체의 프로퍼티에 접근 제한을 두기 원하는 경우에는 클로져를 사용한다. 1. Namespace 주의사항

9. Test – 좋은 테스트 2. Test, Debugging 반복성 – 테스트 결과는 항상 재현 가능해야 한다. 테스트가 반복적으로 실행되면, 항상 정확히 같은 결과를 내야 한다. 간결성 – 테스트는 테스트를 하는 것에만 집중해야 한다. 테 스트 코드의 의도를 훼손하지 않는 한, 가능한 한 많은 HTML, CSS, JS 등을 제거하기 위해서 노력해야 한다. 독립성 – 각 테스트는 독립적으로 동작해야 한다. 테스트의 결과가 다른 테스트에 의존적이 되는 것을 피해야 한다.

10. Test – framework 사용비율 2. Test, Debugging

11. Qunit : jQuery 테스트 -> 범용 간결한 API 비동기 테스트 지원 jQuery를 사용하지 않은 코드도 테스트 가능 특히 회귀(regression) 테스트에 적합 2. Test, Debugging

12. Qunit - 사용법 http://qunitjs.com/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>QUnit Example</title> <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit- 1.23.1.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="https://code.jquery.com/qunit/qunit- 1.23.1.js"></script> <script src="tests.js"></script> </body> </html> 2. Test, Debugging

13. Qunit – assert.ok(), assert.equal() http://qunitjs.com/cookbook/ QUnit.test( "ok test", function( assert ) { assert.ok( true, "true succeeds" ); assert.ok( "non-empty", "non-empty string succeeds" ); assert.ok( false, "false fails" ); assert.ok( 0, "0 fails" ); assert.ok( NaN, "NaN fails" ); assert.ok( "", "empty string fails" ); assert.ok( null, "null fails" ); assert.ok( undefined, "undefined fails" ); }); QUnit.test( "equal test", function( assert ) { assert.equal( 0, 0, "Zero, Zero; equal succeeds" ); assert.equal( "", 0, "Empty, Zero; equal succeeds" ); assert.equal( "", "", "Empty, Empty; equal succeeds" ); assert.equal( 0, false, "Zero, false; equal succeeds" ); assert.equal( "three", 3, "Three, 3; equal fails" ); assert.equal( null, false, "null, false; equal fails" ); }); 2. Test, Debugging assert.ok() : true인지 검사, assert.equal(a, b) : a, b가 같은지 검사

14. Qunit – assert.expect(), assert.async() http://qunitjs.com/cookbook/ 2. Test, Debugging QUnit.test( "multiple call done()", function( assert ) { assert.expect( 3 ); var done = assert.async( 3 ); setTimeout(function() { assert.ok( true, "first call done." ); done(); }, 1500 ); setTimeout(function() { assert.ok( true, "second call done." ); done(); }, 1000 ); setTimeout(function() { assert.ok( true, "third call done." ); done(); }, 500 ); }); 비동기 테스트

15. Qunit – 실제 코드에 적용 2. Test, Debugging <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>도형 클래스의 모듈 테스트</title> <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit- 1.23.1.css"> </head> <body> <!-- Qunit 테스트 결과 표시 --> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="https://code.jquery.com/qunit/qunit- 1.23.1.js"></script> <script src="../js/common.js"></script> <script src="../js/com.js"></script> <script src="../js/com/yb.js"></script> <script src="../js/com/yb/counterVo.js"></script> <script> QUnit.test( "all object has loaded test", function( assert ) { assert.ok( com, "com has loaded"); assert.ok( com.yb, "com.yb has loaded"); assert.ok( com.yb.counterVo, "com.yb.counterVo has loaded"); }); </script> </body> </html>

16. Debugging – Chrome 개발자도구 2. Test, Debugging 크롬 개발자도구 단축키 - F12 : 개발자 도구 열기 - Ctrl + Shift + c : element inspector - Ctrl + Shift + j : console - Ctrl + Shift + I : inspect inspector 콘솔로 확인 - console.log() : 로그 확인 - console.dir() : object 구조 확인 element inspector

17. Debugging – Chrome 개발자도구 2. Test, Debugging break point 추가 - 코드에 debugger; - sources 탭에 직접 체크 * 현재의 객체의 상태를 Watch를 통해 실시간으로 모니터링 가능

18. Async -> Sync 3. Deferred, Promise 비동기 처리를 순차적으로 처리해야 하는 상황이 발생 비동기 A, B, C 요청을 보낸 후 모두 처리가 끝난 후에 처리 비동기 A, B 요청을 보낸 후 그 결과를 사용하여 C 요청을 보내야 하는 경우 등

19. Deferred – 처리를 지연 3. Deferred, Promise <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>deferred.then demo</title> <script src="https://code.jquery.com/jquery- 1.10.2.js"></script> </head> <body> <button>Filter Resolve</button> <p></p> <script> var filterResolve = function() { var defer = $.Deferred(), filtered = defer.then(function( value ) { return value * 2; }); setTimeout(function () { defer.resolve( 5 ); }, 3000); filtered.done(function( value ) { $( "p" ).html("Value is ( 2*5 = ) 10: " + value ); }); }; $( "button" ).on( "click", filterResolve ); </script> </body> </html>

20. $.ajax() – 비동기 통신에 사용 3. Deferred, Promise $.when( $.ajax(), $.ajax()).done(function () { $.ajax(); });

21. 코드 검증 jslint jshint -> IDE에 적용 + @

22. 라이브러리 둘러보기 jQuery, jQuery UI Underscore Backbone Bootstrap D3 + @

23. 참고자료 - 자바스크립트 완벽 가이드 데이비드 플래너건 - 자바스크립트 닌자 존 레식, 베어 바이볼트 - https://api.jquery.com - http://api.qunitjs.com/

Add a comment

Related presentations

Related pages

Debugging | LinkedIn

View 421780 Debugging posts, ... and provides a brief introduction to the Unity Test Tools for unit ... 프론트엔드스터디 E07 js namespace test ...
Read more

Deferred | LinkedIn

View 424691 Deferred posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn?
Read more

Naver D2 - facebook.com

http://www.slideshare.net/youngbeomrhee/e07-js-namespace-test-debugging-deferred See More. 2 Like · Comment · Share. Jay Jin. June 1 at 1:02am.
Read more

Naver D2 - ko-kr.facebook.com

http://www.slideshare.net/youngbeomrhee/e07-js-namespace-test-debugging-deferred 더 ... OctoberSky.js.
Read more

Summer = Reading - Nordonia Hills Schools

Summer reading helps children keep and improve the = reading=20 skills they have developed during the school = year. All Nordonia students enrolled ...
Read more

Avis de rappel = d=E2=80=99un d=C3=A9tecteur de fum=C3=A9e ...

... ('html')[0].id =3D = 'js'; Aller=20 au menu principal; Aller=20 au contenu; Aller=20 au formulaire de recherche ...
Read more

Make a Refundable deposite :: Express HelpLine

Your personal information and card details are 100% secure. About Us | Recent Question | User Login | Security & Privacy Policy| Question list | Terms of ...
Read more

Naver D2 - facebook.com

http://www.slideshare.net/youngbeomrhee/e07-js-namespace-test-debugging-deferred See More. ... [장려상 - yaksok.js] https://github.com/disjukr/yaksok.js
Read more

Naver D2 - ko-kr.facebook.com

http://www.slideshare.net/youngbeomrhee/e07-js-namespace-test-debugging-deferred 더 ... [장려상 - yaksok.js] https://github.com/disjukr/yaksok.js
Read more