Deferred object

2,423 views
2,251 views

Published on

Event Loop and Deverred Object

Published in: Software

Deferred object

  1. 1. Deferred Object 이항희 ## javarouka@gmail.com
  2. 2. JavaScript 작업 처리 ● JavaScript는 한번에 하나의 작업만 처리한다. ● 오래 걸리는 작업이 진행된다면 끝날 때까지 나머지 작 업은 전부 중단된다. // 주당이 따로없다. var i = 0, beerCargo = document.getElementById( “beerCargo”); while (Number.MAX_VALUE > i) { beerCargo.innerHTML += “drink ” + i + “ beer!<br/>”; i++; }
  3. 3. 이벤트 루프
  4. 4. 작업 Queue 1. 프로그램이 시작되면 이벤트 루프도 시작된다. 2. 작업이 발생할 경우 FIFO Queue 에 입력된다. 3. 이벤트 루프는 매번 작업 Queue 를 조사하고, 작업이 있다면 하나 꺼내 처 리한다. 4. 다시 이벤트 루프의 처음으로
  5. 5. 택배는 언제 받을까?
  6. 6. 택배기사에게 전화 오면.
  7. 7. 그럼, JavaScript에서 작업의 끝은 언제?
  8. 8. Callback
  9. 9. 그런데 뭐가 문제라고? ● callbackhell.com
  10. 10. 콜백의 끝없는 중첩 ● 코드 읽기가 힘들다. ● 작업과 후처리의 강한 결합 ○ 로직 처리 함수는 콜백에 대한 처리 의무까지 지게 된다. ○ 콜백이 비어있거나 다른 타입이거나 하는 예외 처리 비용.
  11. 11. 약속 주말에 저랑 데이 트 하실래요? 저 주말 출근이 언 제 끝날지 모르니 까, then 메서드에 등록해줘요. ?
  12. 12. Promise/A http://wiki.commonjs.org/wiki/Promises/A
  13. 13. Promise/A - 흐름 ● 비동기 함수를 실행하면 비동기 작업을 작업자에게 맡기고, 약속 객체를 반 환한다. ● 비동기 작업의 후처리 작업을 약속 객체에 등록한다 ● 비동기 작업이 종료되면 약속 객체는 작업 Queue 에 자신에게 등록된 작업 을 넣는다 ● Event Loop 에서는 작업 Queue를 처리하며 후처리 실행.
  14. 14. 구현체 ● jQuery Deferred Object ○ http://api.jquery.com/category/deferred-object/ ● AngularJS $q ○ https://docs.angularjs.org/api/ng/service/$q
  15. 15. jQuery Deferred Object
  16. 16. jQuery의 Ajax $.ajax({ url: "test.html", context: document.body, success: function() { $( this ).addClass( "done" ); }, error: function() { alert( "opps!!!!" ); } );
  17. 17. Deferred! var promise = $.ajax({ url: "test.html", context: document.body }); promise.done(function() { $( this ).addClass( "done" ); }); promise.fail(function() { alert( "opps!!!!" ); });
  18. 18. 약속은 기록된다. ● Promise 객체는 한번 얻고 나면 언제든 재활용할 수 있다. ○ 데이터를 얻어오고 바로 사용할 필요 없이 사용할 시점을 호출자가 정 할 수 있다. ○ 여러 작업의 결과를 변수에 담아두고 재활용이 가능하다. ○ HTML 조각, 동적 스크립트 텍스트, 공통 데이터...
  19. 19. Multi Complete ● 유저의 구매 정보를 화면에 표시해야 하는데 유저의 정보는 회원 API로, 구 매 정보는 구매 API로, 상품 정보는 상품 API 로 요청한 뒤 모든 요청이 완 료되면 서로간의 데이터를 잘 섞어서 필요 데이터를 도출하여 화면에 표시 해야 한다. ○ 그런데 각 요청이 언제 끝났는지 체크해볼까?
  20. 20. $.when var userPromise = $.get("/user"), orderPromise = $.get("/order"), productPromise = $.get("/product"); $.when(userPromise, orderPromise, productPromise) .done(function() { ... }) .fail(function() { ... });
  21. 21. 간단히 표준을 구현해본 예제 ● 코드 ○ https://github.com/javarouka/javarouka.github. com/blob/master/javascript/deferred.html ● 페이지 ○ http://javarouka.github.io/javascript/deferred.html

×