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

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(얼랭)

메모