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

514p ~ 534p

요약

반응형 아키텍처

원인과 효과를 분리하여 설계한다.
원인(X)이 발생하면 언제나 효과(Y)를 일으킨다.
데이터 변환 단계를 파이프라인으로 구성하여 처리한다.
계산을 조합하여 복잡한 동작을 만들 수 있다.

어니언 아키텍처

코드의 결합도와 응집도를 관리하기 위해 사용한다.
동일한 효과를 여러 군데에서 사용하는 경우, 하나의 군데로 결합하여 중복을 줄일 수 있다.
원인과 효과의 중심을 분리하여 유지보수성을 향상시킨다.
단일 이벤트 대신 데이터 스트림을 사용하는 경우, RX(반응형 확장 라이브러리)를 활용할 수 있다.
외부 스트림 서비스(Kafka, RabbitMQ 등)를 사용하여 파이프라인을 구현할 수 있다.

Cell

function ValueCell(initialValue) {
  let currentValue = initialValue;
  return {
    val: () => {
      return currentValue;
    },
    update: (f) => {
      const oldValue = currentValue;
      const newValue = f(oldValue);
      currentValue = newValue;
    },
  };
}

cell = ValueCell(1);
console.log(cell.val());
cell.update((x) => x + 1);
console.log(cell.val());


1
2

감시자 <Watcher, Observer, listener, eventHandler, callback>

function ValueCell(initialValue) {
  let currentValue = initialValue;
  let watchers = [];
  return {
    val: () => {
      return currentValue;
    },
    update: (f) => {
      const oldValue = currentValue;
      const newValue = f(oldValue);
      if (oldValue !== newValue) {
        currentValue = newValue;
        watchers.forEach((watcher) => watcher(newValue));
      }
    },
    addWatcher: (f) => {
      watchers.push(f);
    },
  };
}

cell = ValueCell(1);
console.log(cell.val());
cell.update((x) => x + 1);
console.log(cell.val());

cell.addWatcher((x) => console.log('watcher1', x));
cell.addWatcher((x) => console.log('watcher2', x));

cell.update((x) => x + 1);

1
2
watcher1 3
watcher2 3

FormulaCell은 파생된 값을 계산한다.
다른셀의 변화가 감지되면 값을 다시 계산한다.

function ValueCell(initialValue) {
  let currentValue = initialValue;
  let watchers = [];
  return {
    val: () => {
      return currentValue;
    },
    update: (f) => {
      const oldValue = currentValue;
      const newValue = f(oldValue);
      if (oldValue !== newValue) {
        currentValue = newValue;
        watchers.forEach((watcher) => watcher(newValue));
      }
    },
    addWatcher: (f) => {
      watchers.push(f);
    },
  };
}

function FormulaCell(upstreamCell, f) {
  //계산을 한 값을 초기값으로 세팅
  let myCell = ValueCell(f(upstreamCell.val()));

  upstreamCell.addWatcher((newUpstreamValue) => {
    myCell.update((currentValue) => {
      return f(newUpstreamValue);
    });
  });
  return {
    val: myCell.val,
    addWatcher: myCell.addWatcher,
  };
}

// A1 셀에 2를 세팅하고, A2 셀에 3을 세팅합니다.
let A1 = ValueCell(2);
let A2 = FormulaCell(A1, (a) => a + 3);

console.log(A1.val()); // 2
console.log(A2.val()); // 5

// A1 셀의 값을 5로 변경합니다.
A1.update(() => 5);

console.log(A1.val()); // 5
console.log(A2.val()); // 8

// B1 셀에 4를 세팅하고, B2 셀에 B1 셀의 값에 2를 곱하는 계산식을 설정합니다.
let B1 = ValueCell(4);
let B2 = FormulaCell(B1, (b) => b * 2);

console.log(B1.val()); // 4
console.log(B2.val()); // 8

// B1 셀의 값을 6으로 변경합니다.
B1.update(() => 6);

console.log(B1.val()); // 6
console.log(B2.val()); // 12

발췌

메모

차후에 더 정리해야 한다.