쏙쏙 들어오는 함수형 코딩 41일차

41일차 <타임라인 조율하기>

다른 부서에서 사용자 인터페이스 속도를 개선해 달라는 요청이 생겼다고한다.. 최적화된 코드를 먼저 살펴보자.

# 최적화한 후

function add_item_to_cart(item) {
  cart = add_item(cart, item);
  update_total_queue(cart);
}

function calc_cart_total(cart, callback) {
  var total = 0;
  cost_ajax(cart, function(cost) {
    total += cost;
  });
  shipping_ajax(cart, function(shipping) {
    total += shipping;
    callback(total);
  });
}

function calc_cart_worker(cart, done) {
  calc_cart_total(cart, function(total) {
    update_total_dome(total);
    done(total);
  });
}

var update_total_queue = DroppingQueue(1, calc_cart_worker);

최적화 전과 비교하면 shipping_ajax가 cost_ajax의 콜백으로 들어가 있던것이 콜백 바깥으로 나왔다는 점이다. 이로인해 콜백 안에서 shipping_ajax가 실행되지 않고 거이 동시에 두 ajax 요청이 실행됨으로 빨라진것이다.

 

그러나 문제가 있다. 위 코드는 의도대로 동작하지 않는 경우가 있다고 한다. 예를 들어 신발을 사기위해 구매버튼을 클릭했을 때 제품의 가격은 DOM에 업데이트 되지 않고 배송비만 업데이트 되는 버그가 있다고 한다. (왠지 어떤 이유인지 의심가는 정황이있는데... cost_ajax가 씹히고 shipping_ajax만 DOM 업데이트 되는것 같다...)

 

오늘은 일단 (버그가있는)개선된 코드의 타임라인 다이어그램을 그려보도록 하자.

 

# 1, 2단계 (액션 확인하기, 각 액션 그리기)

# 액션확인

위 그림에서 총 13개의 액션을 확인할 수 있다. 이제 이 액션들을 타임라인으로 그려보자.

 

# 각 액션 그리기

위 다이어그램에서 cost_ajax와 shipping_ajax가 동일한 타임라인에 있는것이 개선된 점이다. 이전에는 shipping_ajax가 cost_ajax의 콜백이었으므로 점선을 그리고 새로운 타임라인에 shipping_ajax가 있었다.

 

오늘은 다이어그램을 그리기 위한 세 단계중 1, 2단계인 액션 확인, 액션 그리기까지 해보았다. 다음 파트에서는 다이어그램을 그리기위한 세 단계중 단순화 작업을 하도록 하겠다.