첫날 다짐

전반적인 내용

함수형 프로그래밍에 대한 실용 중심 안내서. 너무 어려운 이론 (lambda calculus) 또는 너무 단순한 선언 ("side effect를 없애라!!!")을 제쳐두고, 실생활의 예시로부터 시작. 종국에는 함수형 프로그래밍을 실용적인 대안으로 선택하도록 하기 위함.

추천사에 담긴 정리

structured programming - organizing control flow
슬로건 : 'go to를 없애자'
목표 : 흐름 제어를 단순한 패턴으로 만들자.(if-then-else, switch, for, while)
⬇️
object-oriented programming - organizing access to data
슬로건 : '전역 변수를 없애자'
목표 : 객체를 통해 변수를 관리하자. (캡슐화, 상속)
⬇️
functional programming - organizing side effect
슬로건 : '부수 효과를 없애자'
목표 : 부수효과를 잘 관리해 코드의 아무 곳에나 있지 않도록 하자.

독서 전략

• side effect를 왜 없애야 하는지를 궁금해 하면서 읽어야겠다.
• 예제 문제를 꼭 풀어봐야겠다.
• 독서 일지는 블로그에 남겨야겠다.

예제 코드 깃허브 링크 👉 https://github.com/ericnormand/grokking-simplicity-code

다짐

정글 동기 형 중에 이 함수형 프로그래밍에 미친(?) 사람이 한명 있어서 여러번 이야기는 들었지만, 이렇게 빨리 함수형 프로그래밍을 만나게 될 줄 몰랐다. 당시에는 객체 지향 프로그래밍과 함수형 프로그래밍이 무슨 유물론과 관념론처럼 철학적인 논쟁인줄만 알았는데, 실재가 있었다. 기대가 된다. 입사 초기에 할 일이 너무 많아 걱정이 되지만 부디 무사히 완주할 수 있었으면 좋겠다.

함수형 프로그래밍 개요, 목적

<요약>

함수형 프로그래밍 정의 -> 함수형 사고

일반적인 함수형 프로그래밍의 정의는 실용적인 측면에서 문제점을 갖는다. 사실 부수 효과는 소프트웨어를 실행하는 이유이다. 필요할 때는 써야한다. 다만, 부수효과가 여러가지 문제를 일으킬 수 있으므로 이를 잘 관리해야 한다.

결국 이 책은 함수형 프로그래밍의 정의가 아닌, '함수형 사고'에 대해 설명한다.
함수형 사고에는 두 가지 중요한 개념이 있다.

1. 액션, 계산, 데이터를 구분해서 생각하는 것
   • 계층형 설계 (stratified design)
2. 일급 추상
   • 타임라인 다이어그램, 일급 함수(first-class function)

액션 / 계산 / 데이터

• 액션은 시간에 의존. 사용하기 가장 어렵다. 액션에서 시간에 의존하는 부분을 분리하면 좀 더 다루기 쉽다.
• 계산은 시간에 의존적이지 않음. 다루기 쉬워서 가능한 코드를 계산으로 바꾸는 것이 좋음.
• 데이터는 정적이다. 해석이 필요하다. 저장, 전송, 이해가 편함.

유지 보수를 위하여

코드는 쉽게 변경이 가능할수록 좋다. 사업이란게 그래서 그런듯.

계층형 설계 : 유지 보수하기 좋은 코드 (변경 비용이 낮은 코드)를 위해, 변경 가능성에 따라 코드를 계층으로 나누는 것. 주로 비즈니스 규칙, 도메인 규칙, 기술 스택 계층으로 나눈다.

분산 시스템을 위하여

시간이 지나면서 복잡한 네트워크 통신을 하는 소프트웨어가 필요해짐. 처리되어야 할 메시지는 순서가 섞이거나, 중복되거나 유실될 수 있다. 이런 문제가 적은 소프트웨어를 만들어야 한다. 액션을 잘 관리하고, 되도록 데이터와 계산으로 바꿔야 한다.

타임라인 다이어그램 : 시간에 따라 변하는 액션을 시각화 하는 방법. 액션이 다른 액션과 어떻게 연결 되는지 (어떤 순서를 지니는 지) 볼 수 있다. 분산 시스템에서, 커팅을 통해 여러 타임라인의 시간을 맞출 수 있다.

<발췌>

실행 시점이나 횟수에 의존하는 코드를 없애면, 코드를 더 쉽게 이해할 수 있고 심각한 버그를 막을 수 있습니다.

분산 시스템에서.

계산은 어떤 것을 결정하거나 계획하는 것.

액션, 계산, 데이터 라는 관점에서 봤을 때.
<메모>

부수 효과 (side effect) : 함수가 리턴값 이외에 하는 모든 일.
순수 함수 (pure function) : 인자에만 의존하고 (같은 인자면 같은 결과), 부수 효과가 없는 함수.

액션, 계산, 데이터

<요약>
액션, 계산, 데이터를 일상 또는 새롭게 짜는 코드에 실제로 적용해보기.

가장 단순하게 생각해서 적용하면, 대부분 액션으로 이루어진다.
액션 안에서 '나도 모르게 일어나고 있는' 계산과,
그 계산을 위해 사용되고 있는 데이터를 찾아내 분리하면 된다.

힌트는 무엇인가 결정하거나 계획하는 단계가 있는지를 생각해 보면 된다.
결정과 계획은 계산이 될 가능성이 높다.

<발췌>

함수형 프로그래밍에서는 액션을 더 작은 액션과 계산, 데이터로 나누고
나누는 것을 언제 멈춰야 할 지 아는 것이 중요합니다.

충분히 구현하기 쉽다고 생각되는 시점에서 더 나누는 것을 멈추기.

데이터를 먼저 구현하고, 계산을 구현한 후에, 마지막으로 액션을 구현하는 것이
함수형 프로그래밍의 일반적인 구현 순서입니다.

코드 작성의 순서
<메모>

데이터

• 이벤트에 대한 사실. 일어난 일의 결과를 기록한 것.
• 불변성
  • copy-on-write
  • 방어적 복사
• 장점
  (데이터 자체로 할 수 있는 것이 없기에 역설적으로 좋다.)
  • 직렬화 : 전송하거나 디스크에 저장했다가 읽기 쉬움.
  • 동일성 비교
  • 자유로운 해석 : 접속 로그는 문제 해결을 위해서도 쓰이고, 모니터링을 위해서도 쓰인다.

계산

• 입력값으로 출력값을 만드는 것. 순수 함수.
• 함수형 프로그래밍의 대부분은 계산을 가지고 하는 일.
• 장점
  "액션보단 계산"
  • 테스트하기 쉽다.
  • 기계적인 분석이 쉽다.
  • 조합하기 쉽다. ➡️ 일급 계산

액션 개요

<요약>

😇
액션을 호출하는 함수는, 그 함수를 호출하는 모든 함수들을 액션으로 만든다.
안에 들어있는 액션 때문에 결국 상위의 호출도 호출 시점과 횟수에 의존하기 때문.

액션은 다른말로 순수하지 않은 함수, 부수 효과가 있는 함수.
외부 세계에 영향을 주거나 받는 것을 말한다.

😇
in 함수형 프로그래밍,
계산은 계획이나 결정을 할 때 적용하는 것.
데이터는 계획하거나 결정한 결과.
액션은 계산으로 만든 계획을 실행하는 것.

😇
테스트와 재사용성은 입출력과 관련있다.

• 함수에 암묵적 입출력이 있으면 액션이 된다.
• 함수에서 암묵적 입출력을 없애면 계산이 된다.

암묵적 입출력이 있는 함수를,

테스트 하기 어려운 이유 :

• 명시적인 입력 (인자), 출력 (반환값) 뿐만 아니라,
  암묵적 입력을 일일이 테스트 조건으로 넣어주어야 하고, 암묵적 출력을 일일이 확인해야 한다.

재사용하기 어려운 이유 :

• 함수 실행에 필요한 암묵적 입력들이 다른 조건에서는 불가능 할 수 있고,
  실행의 결과가 되는 암묵적 출력들이 재사용 상황에서 필요한 것이 아닐 수 있다.

😇
결국 암묵적 입출력을 줄이기 위해선, DOM 에 대한 영향과 의존을 줄여야 한다.
<발췌>

액션은 다루기 힘듭니다.
액션은 우리가 소프트웨어를 실행하려는 가장 중요한 이유입니다.

<메모>

읽으면 읽을 수록 뜬구름 잡는 소리 같으면서도, 그걸 어떻게 실현한다는 건지 궁금해진다.

액션에서 계산 빼내기

<요약>

😇
액션에서 계산 빼내기

1. 서브 루틴 추출하고
2. 암묵적 입출력 없애기.
   • 암묵적 입력은 인자로,
   • 암묵적 출력은 리턴값으로

// 원래 코드
function update_tax_dom() {
 	set_tax_dom(shopping_cart_total * 0.10); // shopping_cart_total은 전역변수
}

// 서브 루틴 추출
function update_tax_dom() {
 	set_tax_dom(calc_tax()); 
}

function calc_tax() {
	return shopping_cart_total * 0.10;
}

// 암묵적 입력 없애기
function update_tax_dom() {
	set_tax_dom(calc_tax(shopping_cart_total)); 
}

function calc_tax(total) {
	return total * 0.10;
}

• 입력
  - 함수 인자
  - 함수 밖 변수 읽기
  - 데이터베이스에서 값을 가져오기

• 출력
  - 함수 리턴값
  - 전역 변수값 바꾸기
  - 공유 객체 바꾸기
  - 웹 요청 보내기

😇
이를 통해 재사용하기 좋고 테스트하기 쉬운 코드를 만들 수 있다.
함수형 프로그래밍은 이 뿐만 아니라, 동시성, 설계, 데이터 모델링 측면에서도 좋은 점을 많이 가지고 있다.

<발췌>

어떤 값을 바꿀 때 그 값을 복사해서 바꾸는 방법은 불변성을 구현하는 방법 중 하나입니다. 이 방법을 copy-on-write 라고 합니다.

<메모>

[생각해보기]

만약 인자로 전달한 배열을 직접 변경한다면 그 함수는 계산일까요?
계산이 아니라면 왜 아닌가요?

A. 계산이 아닐 것 같다. 일단 배열을 인자로 전달할 때 결국 해당 배열의 주소를 참조할 수 있는 변수를 넘길 것이기 때문에, 함수 안에서 그 배열을 직접 변경하면 함수 외부에 있는 변수를 변경하는 것이기 때문에 계산이 아니게 된다.

더 좋은 액션 만들기

<요약>

😇
모든 액션을 없앨 순 없다. 액션은 프로그램의 존재 이유.
액션에서 더 이상 빼낼 계산이 더 없을 때의 개선 방법.

• 암묵적 입출력 줄이기. 이것이 곧 모듈화 -> 테스트 용이, 재사용성 증대
• 의미있는 계층으로 계산을 분류하기.

😇
최종적으로 코드는 구분된 그룹과 분리된 계층으로 구성할 것임.
이를 연습하기 위해, 계산을 나누어 계층을 만들어 본다.

• cart에 대한 동작 : cart에 대한 구조를 알고 동작하는 코드. 예를 들어 cart 구조를 안다는 것은, 그것이 제품을 원소로 가지는 배열이라는 것을 아는 것.
• item에 대한 동작 : 마찬가지
• 비즈니스 규칙 : 무료 배송의 기준, 세금 측정 등등..
• 배열 유틸리티 : 정말 문법적으로서만 의미가 있는, 재사용 가능한 코드 조각 같은 것. (배열에 원소 추가하기)

<발췌>

copy-on-write

function add_item (cart, item) {
  var new_cart = cart.slice();	// copy
  new_cart.push(item);			// write
  
  return new_cart;
}

copy-on-write ➡️ 복사에 대한 비용이 크지는 않을까?

• 배열을 바꾸는 것 보다는 분명 비용이 더 든다. 하지만 gc의 도움을 충분히 받을 수 있다.
• 그리고 복사본을 사용할 때 얻는 것이 훨씬 더 많이 있다. 책을 보면서 알게 될 것이다.

<메모>

더 읽어 보고 싶다는 생각이 든다.
계속 이런 기분이 들다가 끝나는 것 아닌가 하는 걱정이 든다.

불변성 유지하기: copy-on-write (1)

<요약>

😇
불변성을 유지하면서 값을 바꾸기 위해 copy-on-write를 활용한다.
순서는 다음과 같다.

1. 복사본 만들기
2. 복사본 변경하기 (원하는 만큼)
3. 복사본 리턴하기

복사본을 만든다는 것은 곧 지역변수를 사용하는 것.
지역변수를 변경하는 것은 그 함수의 외부에서 봤을 때, 데이터를 바꾸는 것이 아니다. (암묵적 입력이 없다면) 함수를 호출할 때 마다 항상 같은 결과를 주는 계산일 뿐이기 때문이다.

'읽기'라는 것은 데이터를 바꾸지 않고 값을 리턴하는 것.

😇
'쓰기'만 하는 동작은 위와 같은 방법으로 copy-on-write 적용하면 된다.
'쓰기와 읽기'를 동시에 하는 동작은,

• 읽기 하는 함수, 쓰기 하는 함수로 각각 분리한 후 쓰기를 copy-on-write 적용하거나, 값을 두개 리턴하는 함수로 만들면 된다.

<발췌>

copy-on-write 는 쓰기를 읽기로 바꿉니다.

• 배열을 바꾸는 것 보다는 분명 비용이 더 든다. 하지만 gc의 도움을 충분히 받을 수 있다.
• 그리고 복사본을 사용할 때 얻는 것이 훨씬 더 많이 있다. 책을 보면서 알게 될 것이다.

<메모>

• 결국 '변경된 복사본' 을 원본에 할당하기는 한다.
  다만 변경된 복사본을 리턴하는 함수가, '계산'으로서 그 함수 외부와의 영향을 전혀 주고 받지 않기 때문에, 불변성을 유지하면서 값을 바꿀 수 있다고 하는 것 같다.

• 쓰기는 액션, 읽기는 계산과 데이터에 가깝다.

• copy-on-write를 적용한 함수를 호출하는 것이, 데이터를 순수하게 '읽은' 것과 마찬가지가 되는 것이다.

불변성 유지하기: copy-on-write (2)

<요약>

😇
데이터가 전부 불변형이면 시간에 따라 변하는 상태 (e.g. 장바구니 상태) 를 어떻게 다룰 수 있나?
-> 그럴 때는 '교체(swapping)'를 한다.

불변 데이터 구조를 사용하면 당연히 메모리를 더 많이 쓰고 더 느리다.
하지만,

1. GC는 매우 빠르고, 생각보다 많이 복사 하지 않는다.
   • 얕은 복사, 구조적 공유
2. 함수형 프로그래밍 언어에서 지원하는 불변 데이터 구조를 사용하면 된다.
   • 직접 만든 것 보다 효율적. 최대한 많은 구조를 공유한다. 이 역시 copy-on-write에 기반한 구현.
3. 언제든 최적화 하면 된다.
   • 애플리케이션 개발에서 병목 지점을 항상 예상치 못한 지점에서 발생. 미리 최적화 하기 보다는 일단 만들어 놓고 느린 부분이 있다면 그 때 최적화.

😇
객체에 대한 copy-on-write
-> 배열과 동일한 방식
1. 복사본 만들기 2. 복사본 변경하기 3. 복사본 리턴하기.

다만, 자바스크립트에서 객체를 복사하기 위해서는 Object.assign() 메서드를 활용한다.

<발췌>

얕은 복사 (shallow copy)

중첩된 데이터 구조에 최상위 데이터만 복사. 예를 들어, 객체를 원소로 가지는 배열을 '얕은 복사' 하면, 배열만 복사하고 안에 있는 객체는 참조로 공유.

구조적 공유 (structural sharing)

두 개의 중첩된 데이터 구조가 어떤 참조를 공유한다면, '구조적 공유' 라고 한다.

<메모>

• 구조적 공유는 참조를 공유하는데, 이 때 발생할 수 있는 데이터 변경의 위험은 없을까?
  • 불변 데이터 구조 하에서 구조적 공유는 안전하다. 어찌 됐든 참조를 통해 직접 '쓰기'를 하지 않기 때문이다.
    예를 들어, 객체들을 가지는 배열을 얕은 복사하여 구조적 공유를 한 후, 복사된 배열의 원소 중 하나의 객체를 변경한다고 해보자. 이 때도, 그 객체를 다시 복사하고 -> 그 복사본을 변경하고 -> 변경된 복사본을 원래 객체의 자리에 할당하면서 '교체'하기 때문에 데이터 변경의 위험이 없다.

불변성 유지하기: 방어적 복사

140p ~ 161p
<요약>

😇
얕은 복사는 바뀐 부분만 복사하고, 나머지는 참조를 통해 공유한다. 구조적 공유.
그래서 얕은 복사가 깊은 복사보다 비용이 덜 든다.

😇
방어적 복사 : 레거시 코드, 라이브러리 등 신뢰할 수 없는 코드와 데이터를 주고 받아야 할때, 깊은 복사를 사용하여 불변성을 지킬 수 있는 방법

1. 데이터가 안전한 코드에서 나갈 때 복사하기
   • 깊은 복사본을 만들고, 신뢰할 수 없는 코드에 전달 (함수면 입력으로 전달)
2. 안전한 코드로 데이터가 들어올 때 복사하기
   • 신뢰할 수 없는 코드에서 온 (반환된) 데이터를 깊은 복사한 후, 안전한 코드에서 사용.

<발췌>

copy-on-write는 어디서 쓰나요?
-> 안전지대 어디서든. 사실 copy-on-write가 불변성을 가진 안전지대를 만든다.

비공유 아키텍처 (shared nothing architecture)

• 모듈이 서로 통신하기 위해 방어적 복사를 구현했다면, 이를 비공유 아키텍처 라고 함.
• 이 모듈은 어떤 데이터의 참조도 서로 공유하고 있지 않음.
• 가장 흔하게는 대부분의 웹기반 API가 있음.

자바 스크립트에서 깊은 복사를 구현하는 것은 어렵다.

• 주로 Lodash 라이브러리를 사용한다. (lodash.com)
  <메모>
  이번엔 딱히 없음.

Straightforward Implementation

162p ~ 185p
<요약>

😇
계층형 설계

• 소프트웨어를 계층으로 구성하는 기술.
• 각 계층에 있는 함수는 바로 아래 계층에 있는 함수를 이용해 정의한다.
• 설계 감각을 키우는 일은, 결국 소프트웨어를 고치고/읽고/테스트하고/재사용하기 쉬운 코드를 만들기 위한 계층 구조가 무엇인지를 알게 되는 것.

계층(layer)

비즈니스 규칙
-----------------------------------
주요 동작 (장바구니, 상품)
-----------------------------------
copy-on-write
-----------------------------------
언어 지원 기능 (반복문, 배열 인덱스 등)

책에서는 더 좋은 설계를 할 수 있도록 도와주는 신호를 찾는 법 몇가지를 제시.

😇
계층형 설계 패턴
4가지 중요한 패턴이 존재.

1. Straightforward Implementation
   • straightforward : '단순/간단' 의 늬앙스에 가까움.
   • 함수 시그니처(함수명, 인자이름, 인자값, 리턴값)가 나타내고 있는 문제를 함수 본문에서 적절한 구체화 수준으로 해결해야 함.
   • 너무 구체적이면 안됨.
2. 추상화 벽
   • 세부구현을 감추고 인터페이스를 제공. 높은 차원으로 생각할 수 있어 전체를 '파악'하기 좋다.
3. 작은 인터페이스
   • 비즈니스 개념을 나타내는 중요한 인터페이스는 작고 강력한 동작으로 구성.
4. 편리한 계층
   • 결국 이 모든 것은 실용성을 위해 적용되어야 함. 코드와 추상화 계층은 작업할 때 걸리적 거리지 않고, 편리함에 기여해야 한다.

😇
Straightforward Implementation 적용하기

목표 : 함수가 호출하는 함수 또는 기능들이 모두 비슷한 구체화 수준에서 작동하고 있어야 한다. -> 이를 위해서, 너무 구체적인 부분을 추상화 한다.

사고 과정

1. 함수가 알아야 할 필요가 없는 구체적인 내용을 함수가 담고 있음.
   (비즈니스 규칙 처리에 가까운 함수가 배열 구조를 다뤄야 할까?)

2. 함수 안에서 사용되는 '직접 만든 함수'와 '언어 기능'은 추상화 수준이 다름.

3. 서로 다른 추상화 단계로 인해 코드를 이해하기 어려워 짐.

4. 함수가 알 필요가 없는 구체적인 부분은 함수를 따로 만들어 감춰줌으로써, 함수가 모두 비슷한 계층에 있는 함수를 호출하게 함.

5. Straightforward Implementation 이다.

<발췌>

소프트웨어 설계 (software design)

"코드를 만들고, 테스트하고, 유지보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는 것"

-> '전문가의 저주' 같은 개념을 고려해봤을 때, 계층형 설계가 분명히 감각적인 측면이 존재한다는 점에서 미적 감각 이라는 표현을 사용한 듯.

호출 그래프에서

"같은 박스를 가리킨다는 것은 같은 계층에 있어도 좋다는 정보이다."

<메모>
번역이 너무 아쉬움.

Abstraction Barrier

186p ~ 210p
<요약>

😇
3단계 줌 레벨

• 다이어그램(호출 그래프)을 보는 방법론
  • 전역 줌 레벨 : 다이어그램 전체를 살펴보기
  • 계층 줌 레벨 : 한 계층과, 연결된 그 아래 계층만 살펴보기
  • 함수 줌 레벨 : 한 함수와, 연결된 그 아래 함수들만 살펴보기

직접 구현: 리뷰

• 직접 구현은 구체화 단계를 계층별로 깔끔하게 끊는 것.
• "코드를 추상화 계층으로 구성한다."

추상화 벽 (abstraction barrier)

• 세부 구현을 감춘 함수로 이루어진 계층.
• 세부 구현을 감췄다는 건, 자신이 본문에 가지고 있다는 의미임.
• 라이브러리나 API와 비슷한 늬앙스.
• 구현을 바꾸기에 좋다(e.g. 데이터 구조 변경). 덕분에 팀 간 협업하기가 좋다.

<발췌>

추상화 벽은,
어떤 것을 신경 쓰지 않아도 되지? 라는 말을 거창하게 표현한 개념.

<메모>
비슷한 개념 (구체, 추상, 계층)을 가지고, 관심을 두는 지점만 살짝살짝 바꿔가면서 패턴을 분리한 것 같은 느낌이다.

Minimal Interface, Comfortable Layer. 호출 그래프로 비기능적 요구사항 파악

211p ~ 232p
<요약>

😇
추상화 벽: 패턴 리뷰

• 추상화 벽으로 추상화 벽 아래 있는 코드와 위에 있는 코드의 의존성을 없앨 수 있다.
• 추상화 벽을 사용하면 코드를 쉽게 고칠 수 있다. 단, 코드를 쉽게 고치기 위해 추상화 벽을 사용하는 것이 아니라, 팀 간 커뮤니케이션 비용을 줄이고 복잡한 코드를 명확하게 하기 위하여 사용해야 한다.

😇
작은 인터페이스 (minimal interface)

• 한 계층 안의 함수들이 적고, 완전하고, 잘 바뀌지 않도록 유지하는 패턴이다.
• 되도록 상위 계층에서 코드를 추가하거나/고치거나, 상위 계층에서 함수를 호출하자.
• 상위 계층에 어떤 함수를 만들 때, 가능한 현재 계층에 있는 함수로 구현하는 것이 작은 인터페이스를 실천하는 방법.
• 작은 인터페이스 패턴을 사용하면 깨끗하고, 단순하고, 믿을 수 있는 인터페이스에 집중할 수 있다.

😇
작은 인터페이스: 패턴 리뷰

• 추상화 벽에 만든 함수는 '인터페이스' 라고 볼 수 있다. -> 추상화 벽을 작게 만들자. (사실 모든 계층에 적용 가능)
  • 추상화 벽에 코드가 많을 수록, 구현이 변경될 때 고쳐야 할 것이 많다.
  • 변경이 어려워 지므로, 커뮤니케이션 비용이 많아진다.
  • 낮은 수준의 코드가 많아 버그가 생기기 쉽고, 이해하기도 어렵다.
• 다소 이상적인 모습. 호출 그래프 하위 계층에 '작고 강력한' 동작을 만들었을 때만 가능하다.

😇
편리한 계층

• 실용적인 접근. 추상화는, 커다란 계층 만들기는 어렵고 힘들다. 시간도 많이 든다.
• 지금 작업하는 코드가 편리하다면, 설계는 조금 멈춰도 좋다.
• 단, 구체적인 것을 너무 많이 알아야 한다거나 코드가 지저분하다고 느껴진다면 다시 패턴을 적용하자.
• 어떤 코드라도 항상 설계 (개발자로서의 필요성) - 새로운 기능 (비즈니스 요구사항) 사이 어느 지점에 머물게 됨.

😇
호출 그래프 활용

• 기능적 요구사항 : 소프트웨어가 literally 해야하는 기능. e.g. 세금 계산을 하면 올바른 계산 결과가 나와야.
• 비기능적 요구사항
  • 유지보수성 (maintainability) : 요구사항이 바뀌었을 때 가장 쉽게 고칠 수 있는 코드는 어떤 코드인가
  • 테스트성 (testability) : 어떤 것을 테스트하는 것이 가장 중요한가
  • 재사용성 (reusability) : 어떤 함수가 재사용하기 좋은가

(아래에 있는 함수: 낮은 계층의 함수 / 위에 있는 함수: 높은 계층의 함수)

1. 유지보수성
   • 가장 위에 있는 함수가 가장 고치기 쉽다.
   • 아래에 있는 코드일수록 고치기 어렵다. 그 코드 위에 만든 코드가 너무 많기 때문이다.
   • 핵심 : 자주 바뀌는 코드는 가능한 위쪽에 있어야 한다.
2. 테스트성
   • 아래에 있는 코드를 테스트하는 것이 중요하다.
   • 마찬가지로, 많은 코드가 가장 아래에서 잘 동작하는 코드에 의존하기 때문이다.
   • 더불어, 위에 있는 코드일수록 자주 바뀌기 때문에 테스트가 오래가지 못한다.
   • 핵심 : 아래쪽에 있는 함수를 테스트하는 것이 더 가치있다.
3. 재사용성
   • 아래에 있는 코드가 재사용하기 더 좋다.
   • 아래에 있는 코드일수록, 다른 함수를 덜 호출한다. -> 특정 경우가 조합된 경우에 대한 함수일 가능성이 낮음으로 재사용성이 좋다.
   • 핵심 : 낮은 수준의 단계로 함수를 빼내면 재사용성이 더 높아진다.

<발췌>

코드 줄 수는 중요하지 않습니다. 중요한 것은 코드가 적절한 구체화 수준과 일반화가 되어 있는지입니다.

계층형 설계는 바로 아래 계층에 있는 함수로, 현재 계층의 함수를 구현해 코드를 구성하는 기술입니다.

<메모>
계층, 계층, 계층.
'편리한 계층' 패턴이 가장 와닿았다. 이론은 이상, 업무는 현실.

코드의 냄새, 일급 값

233p ~ 252p
<요약>
😇
파트 2 에서 할 것 : "일급이 아닌 것을 찾고 그것을 일급으로 바꿔 보기"

😇
코드의 냄새 맡는 법 (함수 이름에 있는 암묵적 인자를 포착하는 법)

1. 함수 여러개가 비슷한 구현을 지니고 있고,
2. '함수 이름'이 구현의 차이를 만드는 형태라면
3. 각 함수들의 함수 이름에서 서로 다른 부분이 암묵적 인자이다.

두 가지의 리팩터링으로 해결 가능

1. 암묵적 인자를 드러내기. 즉, 명시적 인자로 바꾸기 ➡️ 오늘의 주제
2. 함수 본문을 콜백으로 바꾸기 (다음 포스팅에서.)

😇
"암묵적 인자를 드러내기" 단계

1. 함수 이름에 있는 암묵적 인자를 확인한다.
2. 명시적인 인자를 추가한다.
3. 함수 본문에 하드 코딩된값을 새로운 인자로 바꾼다.
4. 함수를 호출하는 곳을 고친다.

😇
명시적인 인자로 전달할 수 있는, 변수나 배열에 담을 수 있는, 즉 언어 어디서나 사용가능한 것 -> 일급
(그 반대는 암묵적인, 담을 수 없는, 아무데서나 사용할 수 없는.)

그래서 "암묵적 인자를 드러내기" 리팩터링도 결국, 암묵적인 이름을 인자로 넘길수 있는 어떤것으로 바꾸는 과정. 즉, 일급으로 바꾸는 과정.

😇
자바스크립트에서 일급(first-class)가 아닌 것

1. 수식 연산자
2. 반복문
3. 조건문
4. try/catch 블록

일급으로 할 수 있는 것

1. 변수에 할당
2. 함수의 인자로 넘기기
3. 함수의 리턴값으로 받기
4. 배열이나 객체에 담기

😇
e.g.
런타임 검사 방법으로 필드명(일급으로 전달된)이 올바른지 확인하는 동작.
API의 변경으로 원래 필드명을 새로운 필드명으로 내부에서 대치시켜주는 동작.

• 이것들은 필드명이 일급이기 때문에 할 수 있는 것.
• 일급이라는 말은 객체나 배열에 담을 수 있다는 뜻.
• 언어의 모든 기능을 활용해 필드명을 처리할 수 있다.

😇
어떤 문법이든 일급 함수로 바꿀 수 있다.

• 자바스크립트에서 '함수' 자체는 일급 값. (인자 전달 가능, 변수/배열에 담기 가능, 어디서나 사용 가능)
• '+' 연산자는 일급이 아니다. 단, 같은 동작을 하는 일급 함수를 만들 수 있다.
• 즉, 어떤 문법이든 일급 함수로 바꿀 수 있다.

<발췌>

그럼 우리는 어떻게 해야 할까요?
여러분과 여러분의 팀이 선택한 언어가 편하다면 걱정하지 말고 계속 사용하시면 됩니다.
그리고 잠을 더 자는 것이 좋겠네요.

• 정적 타입 vs 동적 타입, 컴파일 타임 검사 vs 런타임 검사 에서.

데이터 지향
이벤트와 엔티티에 대한 사실을 표현하기 위해 일반 데이터 구조를 사용하는 프로그래밍 형식.

• 호출 그래프 아래에 위치한 일반적인(위에 위치한 구체적인 것과 반대) 엔티티에 대해서는, 여러 곳에서 사용될 재사용성을 위해 일반적인 데이터 구조인 객체/배열을 사용.
• 일반 데이터 구조가 아닌 임의의 인터페이스(커스텀 API)로 감싸서 사용하면, 데이터를 정해진 방법으로만 써야 한다. 물론 그런 제한이 유용한 순간도 있을 것.
  <메모>
  그리고 잠을 더 자는 것이 좋겠네요.

일급 함수

253p ~ 278p
<요약>
😇 개요
코드의 냄새. 두 가지의 리팩터링으로 해결 가능.

1. 암묵적 인자를 드러내기. 즉, 명시적 인자로 바꾸기 (일급 값)
2. 함수 본문을 콜백으로 바꾸기 (고차 함수) ➡️ 오늘의 주제.

😇 용어 정리
일급 (first-class) : "인자로 전달할 수 있다."
일급 값 : '일급'인 데이터.
일급 함수 : '일급'인 함수.
고차 함수 : 일급 함수를 인자로 받거나 리턴할 수 있는 함수.

😇 "함수 본문을 콜백으로 바꾸기"

1. 본문과 그 앞부분 / 뒷부분 을 확인한다.
   • 본문 : 구현이 비슷한 여러 개의 함수에서, 코드에 변화가 있는 부분.
2. 리팩터링 할 코드를 함수로 빼낸다.
3. 본문을 인자(콜백 함수)로 만들어, 2번에서 빼낸 함수(고차 함수)에 인자로 전달한다.

😇 코드 예시

// 1. 앞부분 뒷부분 확인
function arraySet (array, idx, value) {
	var copy = array.slice();	// 앞부분
  	copy[idx] = value;			// 본문
  	return copy;				// 뒷부분
}

// 2. 함수 빼내기
function withArrayCopy(array) {
	var copy = array.slice();
	copy[idx] = value;				        // 본문. 아직 제대로 정의되지 않은 상태.
  	return copy;
}
function arraySet(array, idx, value) {
	return withArrayCopy(array);
}


// 3. 콜백 빼내기
function withArrayCopy(array, modify) {
	var copy = array.slice();
	modify(copy);	                        // 콜백 호출. 원래의 본문에 해당.
  	return copy;
}
function arraySet(array, idx, value) {
  	return withArrayCopy(
      array,
      function(copy) {copy[idx] = value;}	// 콜백 전달
    );
}

<발췌>

자바스크립트에서 인자로 전달하는 함수를 콜백(callback) 또는 핸들러 함수(handler function) 라고 부릅니다. 물론 자바스크립트 외의 다른 커뮤니티에서도 사용하는 용어입니다. 콜백으로 전달하는 함수는 "나중에 호출될 것"을 기대합니다.

• 선택적으로 호출 (e.g. 조건문 안에서)
• 나중에 호출 (e.g. sleep()을 통한 일정 시간 경과 후)
• 새로운 문맥 안에서 호출 (e.g. try/catch 구문 안에서)

<메모>
고차 함수에 전달하는 콜백 함수는, 고차 함수 안에서 호출되는 꼴에 맞는 인자와 결과값을 가지고 있어야 함. 타입스크립트가 왜 생겼는지 알겠다.

고차 함수 마무리. 함수형 반복 (map, filter, reduce)

279p ~ 302p
<요약>
😇 개요
함수 본문을 콜백으로 바꾸기 -> 결국, 고차함수를 활용한 리팩토링과 같은 말.
1. with 패턴
2. wrap 패턴

// 예) saveUserData() 함수 실행 에러 시 로그를 남기고 싶음
// 원래 코드
try {
  saveUserData(user);
} catch (error) {
  logToSnapErrors(error);
}

// withLogging
function withLogging(f) {
  try {
    f();
  } catch(error) {
    logToSnapErrors(error);
  }
}
withLogging(function() {
  saveUserData(user);
});

// wrapLogging
function wrapLogging(f) {
  return function (arg) {
    try {
      f(arg);
    } catch {
      logToSnapErrors(error);
    }
  }
}
var saveUserDataWithLogging = wrapLogging(saveUserDataNoLogging);

with 패턴의 단점 : 모든 코드에 수동으로 withLogging() 함수를 적용해야 함. 어떤 부분은 까먹고 적용 안할 수 도 있음.
wrap 패턴은 함수 팩토리(factory) 를 사용한 것. 함수를 리턴하는 함수는 함수 팩토리.

😇 고차 함수 정리

• 고차 함수로 패턴이나 원칙을 코드로 만들 수 있다. 한 번 정의하고 필요한 곳에 여러번 사용. 수작업을 줄임.
• 고차 함수로 "함수를 리턴하는 함수"를 만들 수 있다.
• 트레이드 오프가 있다. 고차 함수는 많은 중복 코드를 없애주지만 가독성을 떨어뜨린다.

😇 함수형 반복

1. map
   • 어떤 값(x)의 집합이 있는 배열을 또 다른 값(y)의 집합으로 변환하는 함수.
   • x를 y로 바꾸는 계산을 하는 함수를 인자로 받는다.

// 원본 함수
function emailsForCustomers(customers, goods, bests) {
  var emails = [];
  forEach(customers, function(customer) {
    var email = emailForCustomer(customer, goods, bests);
    emails.push(email);
  });
  return emails;   
}

// map 활용
function emailsForCustomers(customers, goods, bests) {
  return map(customers, function(customer) {
    return emailForCustomer(customer, goods, bests);
  });
}

2. filter
   • 배열에서 일부 항목을 선택하는 함수.
   • 원소 x를 받아 boolean 타입을 리턴하는 함수(predicate)를 인자로 받는다.

// 원본 함수
function selectBestCustomers(customers) {
  var newArray = [];
  forEach(customers, function(customer) {
    if (customer.purchases.length >= 3)
      newArray.push(customer);
  });
  return newArray;   
}

// filter 활용
function selectBestCustomers(customers) {
  return filter(customers, function(customer) {
    return customer.purchases.length >= 3;
  });
}

<발췌>

함수를 리턴하는 함수는 함수 팩토리 factory 와 같습니다.
자동으로 정형화된 코드를 함수로 만들 수 있습니다.

함수 공장.

많은 함수형 프로그래머는 과도하게 몰두하기 쉽습니다.
... (중략) ...
고차 함수로 만든 좋은 방법을 찾았다면, 직관적인 방법과 항상 비교해 보세요. 어떤 방법이 더 좋을까요?

• 코드가 더 읽기 쉬운가요?
• 얼마나 많은 중복 코드를 없앨 수 있나요?
• 코드가 하는 일이 무엇인지 쉽게 알 수 있나요?

이런 질문들을 놓치면 안 됩니다.

과몰입 주의. 항상 실전주의, 실용주의.

<메모>

함수형 반복 마무리, 함수형 도구 체이닝

303p ~ 326p
<요약>
😇
reduce()
: 배열을 하나의 값으로 "reduce"

// origin
function countAllPurchases(customers) {
  var total = 0;
  forEach(customers, function(cutomer) {
    total = total + customer.purchases.length;
  }
        );
};
  });
  return total;
}

// with reduce
function countAllPurchases(customers) {
  return reduce (customers, 0, function(total, customer) {
      return total + customer.purchases.length;
    }
  );
}

function reduce(array, init, f) {
  var accum = init;
  forEach(array, function(elem) {
    accum = f(accum, elem);
  });
  return accum;
}

• 현재 누적된 값과 배열의 현재 항목을 가지고 새로운 누적값을 계산.
• 새로운 누적값을 기존 누적값이 담긴 변수에 할당.

😇 reduce 초기값 주의할 점

1. 계산이 어떤 값에서 시작되는가?
   • 예를 들어 더하기는 0, 곱하기는 1.
2. 배열이 비어있다면 어떤 값을 리턴할 것인가?
   • 초기값으로 이를 결정. 배열이 비어있다면 forEach 가 아무것도 하지 않으므로 초기값이 그대로 리턴될 것.

😇 세 가지 함수형 도구 비교

1. map
   : 어떤 배열의 모든 항목에 함수를 적용해, 새로운 배열로 바꾼다.

2. filter
   : 어떤 배열의 하위 집합을 선택해 새로운 배열로 만든다.

3. reduce
   : 어떤 배열의 항목을 조합해 최종값을 만듭니다. 데이터 요약 or 시퀀스를 하나의 값으로 만들 때 주로 사용.

😇 함수형 도구 체인
: 단계들을 조합해 하나의 쿼리로 만드는 것. 이 과정에서 함수형 도구를 사용하는 것.

😇 체인 명확하게 만들기 ➡️ "콜백에 이름 붙이기" 를 선호.

• 인라인 대신 이름을 붙여 콜백을 사용하기 때문에,
  • 재사용성이 좋다.
  • 단계가 중첩되는 것을 막을 수 있다.

// 원래 코드
function biggestPurchasesBestCustomers(customers) {
  var bestCustomers = filter(customers, function(customer) {	// 1단계
    return customer.purchases.length >= 3;
  });
  var biggestPurchases = map(bestCustomers, function(customer) {	// 2단계
    return maxKey(customer.purchases, {total: 0}, function(purchase) {
      return purchase.total;
    });
  });
  return biggestPurchases;
}

// 1. 단계에 이름 붙이기
function biggestPurchasesBestCustomers(customers) {
  var bestCustomers    = selectBestCustomers(customers);		// 1단계
  var biggestPurchases = getBiggestPurchases(bestCustomers);	// 2단계
  return biggestPurchases;
}

function selectBestCustomers(customers) {
  return filter(customers, function(customer) {		// 그대로 분리
    return customer.purchases.length >= 3;
  });
}

function getBiggestPurchases(customers) {		// 그대로 분리
  return map(customers, getBiggestPurchase);
}

function getBiggestPurchase(customer) {		// 그대로 분리
  return maxKey(customer.purchases, {total: 0}, function(purchase) {	// 중첩
    return purchase.total;												// 중첩
  });
}

// 2. 콜백에 이름 붙이기
/// extracted and named callbacks
function biggestPurchasesBestCustomers(customers) {
  var bestCustomers    = filter(customers, isGoodCustomer);			// 이름붙인 콜백 전달
  var biggestPurchases = map(bestCustomers, getBiggestPurchase);	// 이름붙인 콜백 전달
  return biggestPurchases;
}

function isGoodCustomer(customer) {
  return customer.purchases.length >= 3;
}

function getBiggestPurchase(customer) {
  return maxKey(customer.purchases, {total: 0}, getPurchaseTotal);
}

function getPurchaseTotal(purchase) {
  return purchase.total;
}

<발췌>

<메모>

함수형 도구 체이닝 : 함수형 도구 활용해 리팩터링 해보기

327p ~ 346p
<요약>
😇 스트림 결합 (stream fusion)

• map(), filter(), reduce() 체인을 최적화 하는 것.

• 최적화일 뿐이고 병목이 발생했을 때만 사용하는 것이 좋다.
  대부분의 경우 여러 단계를 사용하는 것이 더 명확하고 읽기 쉽다.

  • map

  /// Two map() steps in a row
  
  var names = map(customers, getFullName);
  var nameLengths = map(names, stringLength);
  
  /// Equivalent as a single map() step
  
  var nameLengths = map(customers, function(customer) {
    return stringLength(getFullName(customer));
  });

  • filter

  /// Two filter() steps in a row
  
  var goodCustomers = filter(customers, isGoodCustomer);
  var withAddresses = filter(goodCustomers, hasAddress);
  
  /// Equivalent as a single filter() step
  
  var withAddresses = filter(customers, function(customer) {
    return isGoodCustomer(customer) && hasAddress(customer);
  });

  • reduce

  /// map() step followed by reduce() step
  
  var purchaseTotals = map(purchases, getPurchaseTotal);
  var purchaseSum = reduce(purchaseTotals, 0, plus);
  
  /// Equivalent as a single reduce() step
  
  var purchaseSum = reduce(purchases, 0, function(total, purchase) {
    return total + getPurchaseTotal(purchase);
  });

😇 반복문을 함수형 도구로 리팩터링 하기

리팩터링 할 코드.
배열 특정 부분의 연속된 데이터인 window의 평균을 구하고, 결과에 추가한다.
이를 배열의 시작부터 끝까지 반복.

var answer = [];
var window = 5;
for(var i = 0; i < array.length; i++) {
  var sum = 0;
  var count = 0;
  for(var w = 0; w < window; w++) {		// 1
    var idx = i + w;					// 2
    if(idx < array.length) {
      sum += array[idx];				// 3
      count += 1;
    }
  }
  answer.push(sum/count);
}

Tip 1. 데이터를 배열에 담기

• 주석 1, 2, 3 을 보면, 값이 계속 바뀌지만 배열로 만들지는 않고 있다.

• 데이터를 배열에 넣으면 함수형 도구를 쓸 수 있다.

• 코드를 보면 반복문을 통해서 window라는 범위를 추상적으로 사용하는데, 이를 명시적인 배열로 추출하면 함수형 도구를 쓸 수 있게된다.

  /// make subarray
  var answer = [];
  var window = 5;
  
  for(var i = 0; i < array.length; i++) {
    var sum = 0;
    var count = 0;
    var subarray = array.slice(i, i + window);  //here
    for(var w = 0; w < subarray.length; w++) {
      sum += subarray[w];
      count += 1;
    }
    answer.push(sum/count);
  }

Tip 2. 한 번에 전체 배열을 조작하기

• 위에서 데이터를 배열로 만든 것을, 함수형 도구를 이용해 '한 번에' 조작한다.

  /// Using average
  var answer = [];
  var window = 5;
  
  for(var i = 0; i < array.length; i++) {
    var subarray = array.slice(i, i + window);
    answer.push(average(subarray));
  }

• 가장 상위의 for문 에서도, i값이 계속 바뀌면서 사용되고 있지만, 배열로 만들어지지는 않고 있다.

• 이 또한 1) 데이터를 배열에 넣고, 2) 한 번에 조작하도록 개선한다.

  // make range (set of indices)
  function range(start, end) {
    var ret = [];
    for(var i = start; i < end; i++)
      ret.push(i);
    return ret;
  }
  var indices = range(0, array.length);
  var window = 5;
  
  var answer = map(indices, function(i) {
    var subarray = array.slice(i, i + window);
    return average(subarray);
  });

Tip 3. 작은 단계로 나누기

• 현재 map()에 넘기는 콜백에서 두 가지의 일을 하고 있다.

  • 하위 배열 만들기
  • 평균을 계산하기

• 이를 작은 단계로 나누어 작업이 더 명확하게 보이도록 한다.

  /// in two steps
  var indices = range(0, array.length);
  var window = 5;
  
  var windows = map(indices, function(i) {	// make subset
    return array.slice(i, i + window);
  });
  
  var answer = map(windows, average);		// calculate average

😇 결과

• 처음에는 반복문이 중첩되고, 인덱스를 계산하며, 지역변수를 바꾸는 코드.
• 이 과정을 각 단계로 나눠 명확하게 만들었음. 글로도 그대로 바꿔 쓸 수 있다.

배열을 이동하며 평균 구하기
1. 숫자 리스트가 있을 때 각 숫자에 대한 window를 만듭니다.
2. 그리고 각 window의 평균을 구합니다.

😇 체이닝 팁 요약

• 함수형 도구는 배열 전체를 다룰 때 잘 동작한다.
• 배열 일부에 대해 동작하는 반복문이 있다면, 배열 일부를 새로운 배열로 나눌 수 있다.
• map(), filter(), reduce()는 함수형 도구의 전부가 아니다. 함수를 추출하고 좋은 이름을 붙여 사용하자!
  <발췌>

  체이닝 디버깅을 위한 팁

1. 변수명 잘 짓기.
   각 단계에서 어떤 것을 하고 있는지 알기 쉽게 이름을 잘 지어야 한다.

2. 출력해보기.
   최고의 근본 디버그 print문. 각 단계를 출력해 보면서 확인.

3. 타입을 따라가 보기.
   자바스크립트처럼 타입이 없는 언어를 사용해도 함수형 도구는 타입이 있다. 다만 컴파일 타임에 검사하지 않을 뿐.

   • map()이 리턴하는 새로운 배열에는, 콜백이 리턴하는 타입의 값.
   • reduce()의 결과값의 타입은, 초기값의 타입 그리고 콜백이 리턴하는 값의 타입과 같다.

<메모>
리팩토링 된 모습을 보니 깔끔하긴 하네...

함수형 도구 체이닝 마무리. 중첩된 데이터에 함수형 도구 사용하기 : update()

347p ~ 370p
<요약>
😇 reduce() 는 값을 요약하기도 하지만, 값을 만들 수도 있다.

유저가 장바구니를 잃어버렸지만 장바구니에 추가한 제품을 모두 배열로 로깅하고 있었을 때,
reduce()를 활용해 아래와 같이 장바구니를 다시 만들 수도 있고,

var itemsAdded = ["shirt", "shoes", "shirt", "socks", "...."];

var shoppingCart = reduce(itemsAdded, {}, addOne);

function addOne(cart, item) {
  if(!cart[item])
    return add_item(cart, {name: item, quantity: 1, price: priceLookup(item)});
  else {
    var quantity = cart[item].quantity;
    return setFieldByName(cart, item, 'quantity', quantity + 1)
  }
}

아래와 같이 구체적인 동작도 추가해 볼 수 있다.

var itemOps = [['add', "shirt"], 
               ['add', "shoes"],
               ['remove', "shirt"],
               ['add', "socks"],
               ['remove', "hat"],
              ];

var shoppingCart = reduce(itemOps, {}, function(cart, itemOp) {
  var op = itemOp[0];
  var item = itemOp[1];
  if(op === 'add')    return addOne(cart, item);
  if(op === 'remove') return removeOne(cart, item);
});

function removeOne(cart, item) {
  if(!cart[item])
    return cart;
  else {
    var quantity = cart[item].quantity;
    if(quantity === 1)
      return remove_item_by_name(cart, item);
    else
      return setFieldByName(cart, item, 'quantity', quantity - 1)
  }
}

이렇게 데이터를 인자처럼 활용하여 코드를 작성할 수도 있다. 유용하다.

😇 객체를 다루기 위한 고차함수 : update()

이전까지의 map(), filter(), reduce() 는 배열을 다루는 고차함수.
객체를 다루는 함수를 리팩토링 해보면서 update()를 도출해보자.

// 원래 코드
function incrementSize(item) {
  var size = item['size'];
  var newSize = size + 1;
  var newItem = objectSet(item, 'size', newSize);
  return newItem;
}

1. 암묵적 인자 드러내기 (코드의 냄새)

/// After expressing argument

function incrementField(item, field) {
  var value = item[field];
  var newValue = value + 1;
  var newItem = objectSet(item, field, newValue);
  return newItem;
}

2. 함수 본문을 콜백으로 바꾸기

/// Extracted

function incrementField(item, field) {
  return updateField(item, field, function(value) {
  return value + 1;
  });
}

3. 짜잔.

function updateField(item, field, modify) {
  var value = item[field];
  var newValue = modify(value);
  var newItem = objectSet(item, field, newValue);
  return newItem;
}

// 좀 더 일반적인 함수 시그니처로 변경
/// Called update()

function update(object, key, modify) {
  var value = object[key];
  var newValue = modify(value);
  var newObject = objectSet(object, key, newValue);
  return newObject;
}

😇 함수형 도구 update()

function update(object, key, modify) {
  var value = object[key];
  var newValue = modify(value);
  var newObject = objectSet(object, key, newValue);
  return newObject;
}

객체의 하나의 키에 하나의 값을 변경한다. like 외과 수술

{
  key1: X1,
  key2: Y1,
  key3: Z1,
}

⬇️
modifyY()
⬇️

{
  key1: X1,
  key2: Y2,	// here
  key3: Z1,
}

<발췌>

<메모>
다음 시간엔 update()를 활용해서,
조회하고 변경하고 설정하는 것을 update()로 교체하기 리팩터링을 해보자.

함수형 도구 체이닝 마무리. 중첩된 데이터에 함수형 도구 사용하기 : update(), nestedUpdate(), 마무리

371p ~ 394p
<요약>
😇 "조회하고 변경하고 설정하는 것을 update()로 교체하기" 리팩터링

/// Step 1: Identify get, modify, set

function halveField(item, field) {
  var value = item[field];		// get
  var newValue = value / 2;		// modify
  var newItem = objectSet(item, field, newValue);	// set
  return newItem;
}

/// Step 2: Replace with call to update()

function halveField(item, field) {
  return update(item, field, function(value) {
    return value / 2;
  });
}

😇 중첩된 데이터에 update() 사용하기

• 같은 방식으로 리팩터링을 여러번 하면 된다.

function incrementSize(item) {
  var options = item.options;	// 1. 조회
  var size = options.size;		// 2. 조회
  var newSize = size + 1;		// 2. 변경
  var newOptions = objectSet(options, 'size', newSize);	// 2. 설정 // 1. 변경
  var newItem = objectSet(item, 'options', newOptions);	// 1. 설정
  return newItem;
}

/// Refactored

function incrementSize(item) {
  var options = item.options;	// 1. 조회
  var newOptions = update(options, 'size', increment);	// here // 1. 변경
  var newItem = objectSet(item, 'options', newOptions);	// 1. 설정
  return newItem;
}

/// Refactored twice

function incrementSize(item) {
  return update(item, 'options', function(options) {	// here
    return update(options, 'size', increment);
  });
}

😇 update2() 도출하기

• 위의 결과와, 암묵적 인자를 드러내기 리팩터링을 이용해,
  2번 중첩된 데이터에 사용 가능한 update2()를 도출할 수 있다.

function incrementSize(item) {	// 1. "Size" -> (option)
  return update(item, 'options', function(options) {
    return update(options, 'size', increment);	// 1. "'size'" -> (option)
  });
}

/// 1. With explicit option argument

function incrementOption(item, option) {	// 2. "increment" -> (modify)
  return update(item, 'options', function(options) {
    return update(options, option, increment);	// 2. "increment" -> (modify)
  });
}

/// 2. With explicit modify argument

function updateOption(item, option, modify) {	// 3-1. "Option" -> (key1)	// 3-2. "option" -> (key2)
  return update(item, 'options', function(options) {	// 3-1. "'options'" -> (key1)		
    return update(options, option, modify);		// 3-2. "option" -> (key2)
  });
}

/// 3. With explicit argument

function update2(object, key1, key2, modify) {
  return update(object, key1, function(value1) {
    return update(value1, key2, modify);
  });
}

/// cc. Original

function incrementSize(item) {
  var options = item.options;
  var size = options.size;
  var newSize = size + 1;
  var newOptions = objectSet(options, 'size', newSize);
  var newItem = objectSet(item, 'options', newOptions);
  return newItem;
}

😇 update3() 도출하기

• 역시나 같은 방법.

function update3(object, key1, key2, key3, modify) {
  return update(object, key1, function(object2) {
    return update2(object2, key2, key3, modify);
  });
}

😇 nestedUpdate() 도출하기

• 재귀 호출 (recursive call)을 활용한다.

function nestedUpdate(object, keys, modify) {
  if(keys.length === 0)	// base case
    return modify(object);
  
  var key1 = keys[0];
  var restOfKeys = drop_first(keys);
  return update(object, key1, function(value1) {
    return nestedUpdate(value1, restOfKeys, modify);
  });
}

😇 깊이 중첩된 데이터에 추상화 벽 사용하기

• 깊이 중첩된 구조에 nestedUpdate()를 쓰려면 긴 key 경로 배열이 필요하다.

• 이것이 너무 길면 중간에 있는 객체들이 어떤 키를 가졌는지, 구조를 기억하기 어렵다.

• 예를 들어, 아래와 같은 코드가 있다.

  httpGet("http://my-blog.com/api/category/blog", function(blogCategory) {
    renderCategory(nestedUpdate(blogCategory, ['posts', '12', 'author', 'name'], capitalize));
  });

  api로 가져온 값 blogCategory 를 콜백을 통해 처리하는 코드이다.
  이 코드는 다음과 같은 이해를 함축하고 있다.

  1. blogCategory는 posts key 아래 "블로그 글"을 담고 있는 구조이다.
  2. 각 "블로그 글"은 ID(12) 를 통해 접근할 수 있다.
  3. "블로그 글"은 author key 아래 "글쓴이"를 담고 있는 구조이다.
  4. "글쓴이"는 name key 아래 "사용자 이름"을 담고 있는 구조이다.

  경로만 보고, 이 모든 정보를 기억하기는 쉽지 않다.

• 그래서, 추상화 벽을 만들고 의미있는 이름을 붙여, 구현을 감추고 기억해야 할 점을 줄일 수 있다.

• 다시 말해, 추상화 벽에 존재하는 함수 자신이 해당 구현을 본문에 품고 있으면 된다.

  1. 주어진 ID로 "블로그 글"을 변경하는 함수를 만든다.

  function updatePostById(category, id, modifyPost) {
    return nestedUpdate(category, ['posts', id], modifyPost);	// modifyPost // 블로그 글 구조에 대해서는 콜백에 맡긴다. -> 2.
    				     // key 경로 배열에 함축된 category의 구조는 추상화 벽 뒤로 숨긴다.
                       // 즉, 이 함수 자신이 여기(본문)에 품는다.
  }

  2. 글쓴이를 수정하는 함수를 만든다.

  function updateAuthor(post, modifyUser) {
    return update(post, 'author', modifyUser);	// modifyUser // 사용자 구조에 대해서는 콜백에 맡긴다. -> 3.
               // 블로그 글의 구조는 이 함수 자신이 여기(본문)에 품는다.
  }

  3. 사용자 이름을 대문자로 바꾸는 함수를 만든다.

  function capitalizeName(user) {
    return update(user, 'name', capitalize);
               // 사용자의 구조는 이 함수 자신이 여기(본문)에 품는다.    
  }

  4. 합치기

  updatePostById(blogCategory, '12', function(post) {
    return updateAuthor(post, capitalizeUserName);
  });

• 기억해야 할 사항이 간단해 졌다.

  • category 안에 블로그 글이 있다는 사실만 알아도 된다. 어떤 키에 어떻게 들어있는지 몰라도 된다.
  • 블로그 글에 글쓴이가 하나 있다는 사실만 알아도 된다. 어떤 키에 어떻게 들어있는지 몰라도 된다.

😇 고차 함수 청리

• 배열 처리
  • forEach(), map(), filter(), reduce()
• 중첩된 데이터 처리
  • update(), nestedUpdate()
• copy-on-write 원칙 적용
  • withArrayCopy(), withObjectCopy()
• try-catch 로깅 규칙 코드화
  • wrapLogging()
    <발췌>

<메모>
다음 시간부턴 드디어 분산 시스템에 대해서 알아보자.

타임라인 격리하기

395p ~ 419p
<요약>

타임라인

• 타임라인 : "액션을 순서대로 나열한 것"
• 타임라인 다이어그램 : "시간에 따른 액션 순서를 시각적으로 표시한 것"

타임라인 기본 규칙

0. 타임라인에는 액션만 그린다.

   • 계산은 실행시점에 영향을 받지 않기 때문에 그리지 않는다.

1. 두 액션이 순서대로 나타나면 같은 타임라인에 넣는다.

sendEmail1();
sendEmail2();

2. 두 액션이 동시에 실행되거나 순서를 예상할 수 없다면 분리된 타임라인에 넣는다.

setTimeout(sendEmail1, Math.random()*10000);
setTimeout(sendEmail2, Math.random()*10000);

➡️ 액션이 서로 다른 스레드, 프로세스, 기계, 비동기 콜백 에서 실행되면 서로 다른 타임라인에 표시한다.

액션 순서에서 주의할 점

1. ++와 += 는 세 단계이다.

   total++
   
   // origin
   var temp = total;	// 읽기 (액션)
   temp = temp + 1;	// 더하기 (계산)
   total = temp;		// 쓰기 (액션)

   ➡️ 따라서 두 개의 액션으로 다이어그램에 표시해야 함.

2. 인자는 함수를 부르기 전에 실행한다.

   console.log(total);
   
   // origin
   temp = total;
   console.log(temp);

   ➡️ 전역 변수를 읽는 것도 액션임을 기억.

다이어그램을 그리기 위한 세 단계

1. 액션을 확인한다.
   • 계산은 신경쓰지 않아도 된다.

function add_item_to_cart(name, price, quantity) {
  cart = add_item(cart, name, price, quantity);		// cart 읽기, 쓰기
  calc_cart_total();
}

function calc_cart_total() {
  total = 0;	// total 쓰기
  cost_ajax(cart, function(cost) {	// cart 읽기	// cost_ajax 호출하기
    total += cost;	// total 읽기, 쓰기
    shipping_ajax(cart, function(shipping) {	// cart 읽기	// shipping_ajax 호출하기
      total += shipping;	// total 읽기, 쓰기
      update_total_dom(total);	// total 읽기	// update_total_dom 호출하기
    });
  });
}

2. 각 액션을 그린다.

   • 비동기 콜백은 새로운 타임라인에 표시해야 한다.

   • 실행 순서를 제한하기 위해 점선을 사용한다. (ajax 콜백은 ajax 요청 전에 실행할 수 없다)
     

     다른 예시>

     saveUserAjax(user, function() {
       setUserLoadingDOM(false);	// 콜백 내용
     });
     
     setUserLoadingDOM(true);
     
     saveDocumentAjax(document, function() {
       setDocLoadingDOM(false);	// 콜백 내용
     });
     
     setDocLoadingDOM(true);

     

   • 콜백은 비동기로 실행되기 때문에 요청이 끝나는 시점에 언젠가 실행될 것임을 유의.

3. 단순화한다.

   • 자바스크립트(플랫폼)에서 사용할 수 있는 단순화 규칙 2가지
     1. 하나의 타임라인에 있는 모든 액션을 하나로 통합한다 / 점선을 타임라인 끝으로 옮긴다.
        (자바스크립트는 하나의 스레드에서 모든 코드를 실행한다.)
        
     2. 타임라인이 끝나는 곳에서 새로운 타임라인이 하나만 생긴다면 통합한다.
        (단, 통합 후에는 첫 번째 규칙을 다시 적용할 수 없다. 만약 다른 타임라인에 액션이 생기면 각 박스는 순서가 섞일 가능성이 있기 때문.)
        

다른 예시>
아래는 새로운 타임라인이 두 개 생겼기 때문에 통합할 수 없다.

좋은 타임라인의 원칙

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

   • 타임라인 하나라면 제일 좋겠지만,
   • 멀티스레드, 비동기 콜백, 클라이언트-서버 통신 등에는 새로운 타임라인이 필요.

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

   • 다른 타임라인 단계와의 실행 순서 경우의 수를 대폭 줄일 수 있다.

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

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

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

자바스크립트 특성

• 단일 스레드 환경.
  • 두 액션이 동시에 실행될 일이 없다.
  • 단 비동기 호출은, 미래에 알 수 없는 시점에 런타임에 의해 실행되므로 주의해야.
• 이벤트 루프 (event loop) 와 작업 큐 (job queue)
  - 이벤트 루프는 작업 큐에서 작업 하나를 꺼내 실행 완료하고, 완료되면 다음 작업을 꺼내 실행하는 것을 무한히 반복.
  - 하나의 스레드에서 처리하기 때문에, 두 개의 작업이 동시에 실행될 수 없다.
  - 작업 = 이벤트 데이터 + 콜백
  - 이벤트 : 마우스 클릭, 키보드 입력, AJAX 이벤트 같은 것
  - 이벤트 데이터 : 이벤트에 대한 정보 (e.g. 클릭에 대한 정보)
  - 콜백 : 이벤트가 발생했을 때 실행되는 함수. 좀 더 자세히는 이벤트 루프가 실행할 함수.

  - click 이벤트 동작 과정 :

  이벤트에 콜백을 등록 -> 이벤트 발생 -> 작업 큐에 작업( 이벤트 데이터(click) + 콜백 ) 추가 -> 이벤트 루프가 콜백 실행
  - AJAX 요청 동작 과정 :
  AJAX 요청 호출 -> 네트워크 엔진이 관리하는 요청 큐에 추가 -> load 또는 error 이벤트에 콜백이 등록 됨 -> 이벤트 발생(응답 도착 or 에러) -> 작업 큐에 작업( 이벤트 데이터(loadorerror) + 콜백 ) 추가 -> 이벤트 루프가 콜백 실행
  <발췌>

언어별 사용하는 스레드 모델

1. 단일 스레드, 동기
   • 모든 것이 순서대로 실행되고 입출력을 사용하면 끝날 때까지 기다려야 함.
   • 시스템이 단순하다는 장점 있기도.
   • 예) PHP
2. 단일 스레드, 비동기
   • 비동기 모델을 사용함으로써, 단일 스레드 인데도 입출력 작업을 기다리지 않아도 됨.
   • 단, 콜백이 언제 실행될 지 보장할 수 없음. 그래서 다이어그램에서 다른 타임라인으로 표현.
   • 예) JavaScript
3. 멀티스레드
   • 실행 순서를 보장하지 않아 프로그래밍 매우 어려움
   • 새로운 스레드는 새로운 타임라인을 의미
   • 예) Java, Python, Ruby, C, C#
4. 메시지 패싱(message-passing) 프로세스
   • 서로 다른 프로세스를 동시에 실행 할 수 있는 스레드 모델 지원하면서도,
   • 메모리를 공유하지 않고 메시지로 통신.
   • 서로 다른 타임라인에 있는 액션은 순서가 섞여도 메모리 공유하지 않아 문제가 별로 안됨
   • 예) Elixir(엘릭서), Erlang(얼랭)
     <메모>

타임라인 격리하기 마무리

420p ~ 440p
<요약>

타임라인 보기

• 타임라인을 나란히 놓고 보면, 가능한 실행 순서들의 조합에서 버그를 찾아낼 수 있다.

자원을 공유하는 타임라인

• 타임라인이 다른 타임라인과 자원을 공유한다면, 그 자원을 사용하는 단계끼리의 순서가 중요하다.
  

• 전역 변수를 공유하는 부분을 확인하고 최대한 없애자.
  1. 지역 변수로 바꾸거나
  2. 암묵적 인자를 없애고 함수에 인자를 추가한다
• 점선으로 인해 항상 같은 순서대로 실행되는 것이 보장되면, 전역 변수를 통한 자원 공유를 버그없이 활용할 수 있다.
• 보장되지 않는다면, 여전히 버그가 있을 확률이 높다.
  

비동기 호출에서의 명시적인 출력

• 비동기 호출의 결과값은, 비동기 호출 자체의 '리턴값'으로는 얻을 수 없다.
• 비동기 호출은 바로 리턴이 되지만, 실질적인 결과값은 콜백이 호출되어야 얻을 수 있기 때문이다.
• 그래서, 원래 결과값을 가지고 하려던 액션을 비동기 호출의 콜백으로 전달하면 된다.
• 이렇게 하면, 실제로 함수의 리턴값을 명시적으로 받아 액션을 호출하는 것과 같은 효과를 내므로, 명시적인 출력을 만들 수 있게 된다.
• 더불어 함수 본문을 콜백으로 바꾸는 일이기 때문에, "함수 본문 콜백으로 바꾸기" 리팩터링을 하는 효과도 얻을 수 있다.

/// Original

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

function add_item_to_cart(name, price, quant) {
  cart = add_item(cart, name, price, quant);
  calc_cart_total(cart);
}

/// With extracted callback

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

function add_item_to_cart(name, price, quant) {
  cart = add_item(cart, name, price, quant);
  calc_cart_total(cart, update_total_dom);
}

<발췌>

<메모>

타임라인 사이에 자원 공유하기

441p ~ 468p
<요약>

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

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)은 자원을 안전하게 공유할 수 있는 재사용 가능한 코드를 말합니다.

<메모>
점점 남은 페이지가 줄어들고 있다.

타임라인 조율하기

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)은 자원을 안전하게 공유할 수 있는 재사용 가능한 코드를 말합니다.

<메모>
점점 남은 페이지가 줄어들고 있다.