📕[책] 쏙쏙 들어오는 함수형 코딩 - 41,42

469p ~ 490p

요약

다시보는 좋은 타임라인의 원칙

1. 전체 타임라인의 개수가 적을수록 이해하기 쉽다.

2. 타임라인 내 단계의 개수가 적을수록 이해하기 쉽다.

3. 공유하는 자원이 적을수록 이해하기 쉽다.

4. 자원을 공유한다면 서로 조율해야 한다.

   • 타임라인은 공유 자원을 안전하게 공유할 수 있어야 한다.
   • 안전하게 공유한다 === 올바른 순서대로 자원을 쓰고 돌려준다.

5. 시간을 일급으로 다룬다.

Queue() 를 통해 공유 자원 조율하기

자원을 공유하는 "액션"들이 실행되는 순서를 고려하는 과정이다.

• 조율 전 코드

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

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 add_item_to_cart(item) {
  cart = add_item(cart, item);
  update_total_queue(cart);		// action
}

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);
    });
  });
}

var queue_items = [];

function runNext() {
  var cart = queue_items.shift();
  calc_cart_total(cart, update_total_dom);
}

function update_total_queue(cart) {		// action
  queue_items.push(cart);
  setTimeout(runNext, 0);
}

• 두 번째 타임라인이 첫 번째 타임라인과 동시에 실행되는 것 막기

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);
    });
  });
}

var queue_items = [];
var working = false;	////

function runNext() {
  if(working)			////
    return;				////
  working = true;		////
  var cart = queue_items.shift();
  calc_cart_total(cart, update_total_dom);
}

function update_total_queue(cart) {
  queue_items.push(cart);
  setTimeout(runNext, 0);
}

• 다음 작업을 시작할 수 있도록 고치기.

var queue_items = [];
var working = false;

function runNext() {
  if(working)
    return;
  working = true;
  var cart = queue_items.shift();
  calc_cart_total(cart, function(total) {
    update_total_dom(total);
    working = false;	////
    runNext();			////
  });
}

function update_total_queue(cart) {
  queue_items.push(cart);
  setTimeout(runNext, 0);
}

• 큐가 비었을 때 멈추게 하기

var queue_items = [];
var working = false;

function runNext() {
  if(working)
    return;
  if(queue_items.length === 0)	////
    return;						////
  working = true;
  var cart = queue_items.shift();
  calc_cart_total(cart, function(total) {
    update_total_dom(total);
    working = false;
    runNext();
  });
}

function update_total_queue(cart) {
  queue_items.push(cart);
  setTimeout(runNext, 0);
}

• 변수와 함수를 함수 범위 안에 넣기

function Queue() {		////
  var queue_items = [];
  var working = false;

  function runNext() {
    if(working)
      return;
    if(queue_items.length === 0)
      return;
    working = true;
    var cart = queue_items.shift();
    calc_cart_total(cart, function(total) {
      update_total_dom(total);
      working = false;
      runNext();
    });
  }

  return function(cart) {		////
    queue_items.push(cart);
    setTimeout(runNext, 0);
  };
}

var update_total_queue = Queue();	////

• Queue() 코드를 일반화 - "함수 본문을 콜백으로 바꾸기" 리팩터링.

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() {		//// done()
      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);	//// done()
  });
}

var update_total_queue = Queue(calc_cart_worker);

• 작업이 끝났을 때 실행하는 콜백을 받아서 실행하기. (queue 자체의 작동을 위한 동작을 포함시켜서.)

function Queue(worker) {
  var queue_items = [];
  var working = false;

  function runNext() {
    if(working)
      return;
    if(queue_items.length === 0)
      return;
    working = true;
    var item = queue_items.shift();
    worker(item.data, function(val) {			////
      working = false;
      setTimeout(item.callback, 0, val);		////
      runNext();
    });
  }

  return function(data, callback) {
    queue_items.push({
      data: data,								////
      callback: callback || function(){}		////
    });
    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);

• 위의 큐가 너무 느릴 때 쓰는 droppingQueue()

/// Dropping Queue

function DroppingQueue(max, worker) {
  var queue_items = [];
  var working = false;

  function runNext() {
    if(working)
      return;
    if(queue_items.length === 0)
      return;
    working = true;
    var item = queue_items.shift();
    worker(item.data, function(val) {
      working = false;
      setTimeout(item.callback, 0, val);
      runNext();
    });
  }

  return function(data, callback) {
    queue_items.push({
      data: data,
      callback: callback || function(){}
    });
    while(queue_items.length > max)
      queue_items.shift();
    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 = DroppingQueue(1, calc_cart_worker);

정리

• Queue() 는 함수를 인자로 받아 또 다른 함수를 리턴하는 함수이다.
• Queue() 는 어떤 함수를 새로운 타임라인에서 실행하고 한 번에 한 타임라인만 실행할 수 있도록 만들어주는 고차함수이다.
• Queue() 는 액션에 '순서 보장' 슈퍼파워를 주는 도구이다.
• Queue() 는 동시성 기본형(concurrency primitive) 이다.

발췌

💡 공유하는 방법을 현실에서 착안하기
인간은 언제나 자원을 공유한다. 이를 착안하여, 컴퓨터에게도 인간의 방법과 비슷하게 자원을 공유할 수 있도록 프로그래밍 할 수 있다.
현실에서 어떤 일이 순서대로 진행되게 하는 방법의 하나는 줄을 서는 것 -> queue를 만들어 컴퓨터가 작업을 순서대로 진행하게 하도록 한다.

다른 예
1. 한 번에 한 명씩 쓸 수 있게 화장실 문을 잠글 수 있다.
2. 공공 도서관은 지역사회가 많은 책을 공유할 수 있는 곳이다.
3. 칠판을 사용하면 선생님(기록자) 한명이 교실 전체(열람자)에 정보를 공유할 수 있다.

동시성 기본형(concurrency primitive)은 자원을 안전하게 공유할 수 있는 재사용 가능한 코드를 말합니다.

메모

점점 남은 페이지가 줄어들고 있다.