Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Deferred Object
이항희 ## javarouka@gmail.com
JavaScript 작업 처리
● JavaScript는 한번에 하나의 작업만 처리한다.
● 오래 걸리는 작업이 진행된다면 끝날 때까지 나머지 작
업은 전부 중단된다.
// 주당이 따로없다.
var i = 0,
beerC...
이벤트 루프
작업 Queue
1. 프로그램이 시작되면 이벤트 루프도 시작된다.
2. 작업이 발생할 경우 FIFO Queue 에 입력된다.
3. 이벤트 루프는 매번 작업 Queue 를 조사하고, 작업이 있다면 하나 꺼내 처
리한다.
...
택배는 언제 받을까?
택배기사에게 전화 오면.
그럼, JavaScript에서
작업의 끝은 언제?
Callback
그런데 뭐가 문제라고?
● callbackhell.com
콜백의 끝없는 중첩
● 코드 읽기가 힘들다.
● 작업과 후처리의 강한 결합
○ 로직 처리 함수는 콜백에 대한 처리 의무까지 지게 된다.
○ 콜백이 비어있거나 다른 타입이거나 하는 예외 처리 비용.
약속
주말에 저랑 데이
트 하실래요?
저 주말 출근이 언
제 끝날지 모르니
까, then 메서드에
등록해줘요.
?
Promise/A
http://wiki.commonjs.org/wiki/Promises/A
Promise/A - 흐름
● 비동기 함수를 실행하면 비동기 작업을 작업자에게 맡기고, 약속 객체를 반
환한다.
● 비동기 작업의 후처리 작업을 약속 객체에 등록한다
● 비동기 작업이 종료되면 약속 객체는 작업 Queu...
구현체
● jQuery Deferred Object
○ http://api.jquery.com/category/deferred-object/
● AngularJS $q
○ https://docs.angularjs.org...
jQuery
Deferred Object
jQuery의 Ajax
$.ajax({
url: "test.html",
context: document.body,
success: function() {
$( this ).addClass( "done" );
},
err...
Deferred!
var promise = $.ajax({
url: "test.html",
context: document.body
});
promise.done(function() {
$( this ).addClass...
약속은 기록된다.
● Promise 객체는 한번 얻고 나면 언제든 재활용할 수 있다.
○ 데이터를 얻어오고 바로 사용할 필요 없이 사용할 시점을 호출자가 정
할 수 있다.
○ 여러 작업의 결과를 변수에 담아두고 재활용이...
Multi Complete
● 유저의 구매 정보를 화면에 표시해야 하는데 유저의 정보는 회원 API로, 구
매 정보는 구매 API로, 상품 정보는 상품 API 로 요청한 뒤 모든 요청이 완
료되면 서로간의 데이터를 잘 ...
$.when
var userPromise = $.get("/user"),
orderPromise = $.get("/order"),
productPromise = $.get("/product");
$.when(userPr...
간단히 표준을 구현해본 예제
● 코드
○ https://github.com/javarouka/javarouka.github.
com/blob/master/javascript/deferred.html
● 페이지
○ htt...
Deferred object
Upcoming SlideShare
Loading in …5
×

Deferred object

2,983 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

×