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

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

2. 1. 전역의 오염을 막아주는 Namespace 2. 더 나은 코드를 위한 Test, Debugging 3. 비동기처리를 위한 Deferred, promise +@ : 유용한 것들 4. 함수형 프로그래밍

3. 전역(window object)의 오염 1. Namespace <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>전역의 오염</title> </head> <body> <script src="../js/a.js"></script>  <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; Import를 하는 다른 파일에서 동일한 이름의 전역변수가 있으면 Override 됨

4. window object에 매핑되는 것들 1. Namespace 1. 전역에 선언된 (function 안에 있지 않은) var로 선언된 변수 2. (“use strict” 모드가 아닌 경우) var 없이 선언된 모든 변수 (function 안에 선언된 경우도 해당) 3. Function expression (함수선언문)에 사용된 모든 이름 => Javascript의 전역은 매우 쉽게 오염된다

5. 1. Namespace Java의 전역 같은 이름의 변수가 전역으로 선언되어 있지만 package 이름으로 구분되어 Overriding 되지 않는다.

6. Packaging (묶기) 1. Namespace Package와 유사한 구조 : Object 사용 jQuery.j s Underscore.js

7. 1. Namespace 전역변수 하나에 할당 // 수정 전: 전역 변수 5개 // 경고: 안티패턴이다. // 생성자 함수 2개 function Parent() {} function Child() {} // 변수 1개 var some_var = 1; // 객체 2개 var module1 = {}; module1.data = {a: 1, b: 2}; var module2 = {}; // 수정 후: 전역 변수 1개 // 전역 객체 var MYAPP = {}; // 생성자 MYAPP.Parent = function () {}; MYAPP.Child = function () {}; // 변수 MYAPP.some_var = 1; // 객체 컨테이너 MYAPP.modules = {}; // 객체들을 컨테이너 안에 추가한다. MYAPP.modules.module1 = {}; MYAPP.modules.module1.data = {a: 1, b: 2}; MYAPP.modules.module2 = {};

8. 1. Namespace범용 namespace 함수 var MYAPP = MYAPP || {}; MYAPP.makeNS = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // 처음에 중복되는 전역 객체명은 제거한다. if(parts[0] === "MYAPP") { parts = parts.slice(1); } for (i = 0; i < parts.length; i++) { // 프로퍼티가 존재하지 않으면 생성한다. if(typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; } parent = parent[parts[i]]; } return parent; }; // 반환 값을 지역 변수에 할당한다. var module2 = MYAPP.makeNS('MYAPP.modules.module2'); console.log(module2 === MYAPP.modules.module2); // 첫부분의 'MYAPP'을 생략하고도 쓸 수 있다. MYAPP.makeNS('modules.module51'); // 아주 긴 네임스페이스를 만들어보자. MYAPP.makeNS('once.upon.a.time.there.was.this.long.nested.property'); console.dir(MYAPP);

9. 1. Namespace Private을 구현하는 몇 가지 방법 var myNs; (function () { // 비공개 멤버 var privateName = 'foobar'; // 공개될 부분을 구현한다. myNs = { // 특권 메서드 getName: function () { return privateName; } }; })(); console.log(myNs.getName()); console.log(myNs.privateName); Closure를 사용한다.

10. 1. Namespace Module 패턴 var myNs = (function () { // defined within the local scope var privateMethod1 = function () { console.log('privateMethod1 has called'); }; var privateMethod2 = function () { console.log('privateMethod2 has called'); }; var privateProperty1 = 'foobar'; return { // 외부에 공개할 메서드를 매핑한다. publicMethod1: privateMethod1, properties:{ publicProperty1: privateProperty1 }, utils:{ publicMethod2: privateMethod2 } }; })(); myNs.publicMethod1(); myNs.utils.publicMethod2(); console.log(myNs.properties.publicProperty1);

11. 폴더 및 파일의 구조를 객체의 구조와 맞춘다 1. Namespace 파일명과 객체를 매핑 폴더 및 파일 객체

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

13. 코드 -> 1. Namespace Refactoring

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

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

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

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

18. 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

19. 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가 같은지 검사

20. 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 ); }); 비동기 테스트

21. 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>  <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>

22. 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

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

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

25. 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>

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

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

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

29. 참고자료 - 자바스크립트 완벽 가이드 데이비드 플래너건 - 자바스크립트 닌자 존 레식, 베어 바이볼트 - JavaScript Patterns 스토얀 스토파노프 - https://addyosmani.com/blog/essential-js-namespacing/#beginners - https://api.jquery.com - http://api.qunitjs.com/

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

Esté a ler uma amostra.

Confira estes a seguir

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

Mais Conteúdo rRelacionado

Mais recentes (20)

Em destaque (20)