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

40일차 <동시성 기본형2>

저번 파트에서 Queue 메서드로 공유하는 자원을 안전하게 만드는 방법을 알아보았다. 하지만 이전에 만들었던 코드는 재사용하기 어려운 코드다! 오직 update_total_dom만 사용할 수 있기에 함술 본문을 콜백으로 바꾸기 리팩터링을 적용해서 큐를 반복해서 처리하는 코드와(runNext()를 부르는 코드) 큐에서 하는일을(calc_cart_total()을 부르는 코드) 분리해 보자. 그리고 나아가 더 많은 동작에 재사용할 수 있도록 해보자.

 

# 개선된 코드

function Queue(worker) {                           
  var queue_items = [];
  var working = false;
  
  function runNext() {
    if (working) return;                     
    if (queue_items.length === 0) return;    
    working = true;
    var cart = queue_items.shift();       
    
    worker(cart, function() {
      // 큐를 반복해서 처리하는 콜백, calc_cart_worker의 콜백으로 dom업데이트 이후 호출
      working = false;
      runNext();
    });
  }
  return function(cart) {                 
    queue_items.push(cart);
    setTimeout(runNext, 0);
  };
}

// 큐에서 하는일
function calc_cart_worker(cart, done) {
  calc_cart_total(cart, function(total) {
    update_total_dom(total);
    done(total);
  });
}

var update_total_queue = Queue(calc_cart_worker);

 

이제 큐에서 할 일을 worker로 만들어서 Queue에 전달해주면 update_total_dom 이외에도 여러 작업을 수행 할 수 있게 됐다. 

---

오늘 파트는 역대급으로 어려웠다. 저자가 만들어둔 완성 코드를 진짜 거짓말 안 보태고 50번은 넘게 읽은것 같다.

 

콜백을 머리로 따라가려고 하는데, '중간에 콜백의 인자가 어떤게 있었지?' 하고 까먹으면 다시 첫 번째 호출을 읽고 콜백을 따라가고 .... 이 과정을 수없이 반복한것 같다.

 

콜백 지옥이라는 단어를 처음 보았을 때는 '음.. 이런게 콜백 지옥인가?' 하고 추상적으로 이해했지만, 오늘 예시같이 간단한 역할을 하는 코드도 콜백을 따라가다가 수없이 길을 잃었다.. 그러나 코드만 읽다가 길을 잃는 경우가 다반사였지만, 타임라인 다이어그램을 보면 신기하게도 금방 이해가 됐다. 

 

저자가 타임라인 다이어그램을 그렇게나 강조할 때는 그림만 보고 대충 넘어가는 경우가 있었는데, 이제는 코드를 이해하는데 필수가 돼버린 상황이다.. (집중하라 할 때 잘할걸..)

 

지옥같은 파트를 넘기고 쉬어가는 파트로 저자가 '타임라인 다이어그램은 모든 실행 가능한 순서를 포함해 소프트웨어가 어떻게 동작하는지 이해하는데 쓸 수 있는 유연한 도구입니다' 라고 말한다.

 

왠지 '힘들었지? 그럴땐 다이어그램 그려봐~ '하는 느낌이 들었다.

 

저자가 예를 들고있는 마케팅 부서는 계속해서 추가 주문을 한다.. (그만!!) 그때마다 이해하는데 힘이드는데, 그래도 성장하고 있음을 강하게 느낀다. 그래도 마케팅부서.. 주문 조금만.. ㅎㅎ