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

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

저번 파트에서 마친 타임라인 그리기 1, 2단계에, 마지막 3 단계, 단순화 작업을 이어가보자.

3 단계는 액션을 통합하고 타임라인을 통합하는 작업이다.

1. 하나의 타임라인에 있는 모든 액션은 하나로 통합한다.
2. 타임라인이 끝나는 곳에서 새로운 타임라인이 '하나만' 생긴다면 통합한다.

단순화 작업이 끝난 다이어그램은 다음과 같다.

 

#다이어그램

이렇게 타임라인 다이어그램을 그려서 보니 문제점이 눈에 보이기 시작한다. cost_ajax 콜백과 shipping_ajax 콜백중 어느것이 먼저 실행될 지 알수가 없다.

 

만약 shipping_ajax의 콜백이 먼저 실행된다면 제품 가격 없이 total이 DOM에 업데이트 되는데, cost_ajax의 응답을 받기전에 DOM이 업데이트됨으로 이것은 우리가 의도하지 않은 결과이다.

 

이는 두 요청의 콜백이 병렬적으로 실행되기 때문이다.

 

순차적으로 처리했더라면 각 콜백이 끝나는 시간의 합만큼 총 시간이 소요되겠지만, 병렬적으로 처리함으로써 두 콜백중 오래걸리는 작업의 시간만큼 총 소요시간이 정해진다. 따라서 더 빠르다! 하지만 결과는 예상할 수 없다..

 

따라서 정상적으로 작동하기 위해서는 아래 그림과 같이 update_total_dom은 두 콜백이 total을 업데이트 한 후에 일어나야함을 보장해야한다.

 

두 콜백 아래에 있는 긴 점선을 컷(Cut)이라고 부른다. 컷은 앞에서 사용했던 점선처럼 순서를 보장해 주는 역할을 한다. 하지만 컷은 점선의 위 단계는 아래에 있는 작업이 끝나기 전에 무조건 실행이 끝나야 한다.

 

따라서 이번 버그는 두 콜백을 조율해 total을 한 번 읽어 DOM 업데이트를 할 수 있도록 해야할 것이다. 이는 앞에서 배운 동시성 기본형으로 컷을 만듬으로써 해결할 수 있다.

 

기본적인  Cut 메서드를 만들어보자.

 

# Cut

function Cut(num, callback) {
  var num_finished = 0;
  return function() {
    num_finished += 1;
    if (num_finished === num) callback();
  }
}

이 Cut 함수는 호출 될 때마다 num_finished를 증가시키고 마지막 호출시 callback을 호출한다. 이제 이렇게 만든 Cut을 cal_cart_total에 적용시켜보자.

 

# Cut 적용

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

이렇게 적용시킨 Cut은 shipping_ajax 콜백의 done이(cost_ajax에서 한 번, shipping_ajax에서 두 번) 호출되고 나서야 callback을 호출한다( => update_total_dom)

 

이렇게 적용한 Cut은 ajax의 콜백 호출 순서를 보장해준다. 이는 자바스크립트를 써본 사람은 Promise와 비슷하다는 느낌을 받을 것인데, Cut대신 Promise를 사용하더라도 순서를 보장해줄 방법이 있다. 

---

오늘은 Cut 함수를 사용해서 콜백의 순서를 보장하는 방버을 알아봤다. 그러나 아직 cost_ajax, shipping_ajax 콜백에서 total += (shipping, cost)를 이행하는 부분은 순서가 보장되어있지 않다. 다음 파트에서 그 방법에 대해서 알아보자.