[함수형 코딩] - 15. 타임라인 격리하기

두 번 빠르게 클릭할 때 문제가 발생한다?!

😯 빨리 누르니까 문제가 생겨요! 고쳐주세요!

타임라인 다이어어그램

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

타임라인 다이어그램의 두가지 기본 규칙

타임라인 다이어그램을 통해 순서대로 실행되는 액션과 동시에 나란히 실행되는 액션 두 가지를 알 수 있다.

기본 규칙 두 가지

1. 두 액션이 순서대로 나타나면 같은 타임라인에 넣는다.
   타임라인에는 액션만 그린다. 계산은 실행 시점에 영향을 받지 않기 때문
2. 두 액션이 동시에 실행되거나 순서를 예상할 수 없다면 분리된 타임라인에 넣는다.
   비동기 등 실행 시점이 무작위인 액션은 실행 순서를 알 수 없어 다른 타임라인에 표시한다.

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

일단 외우고 시작하세요. 계속 나옵니다.

1. 액션을 확인한다.
2. 각 액션을 그린다.
3. 단순화한다.

스레드 모델

• 단일 스레드, 동기
  PHP 등이 사용, 스레드가 하나라 타임라인도 하나이다. 메모리를 공유하지 않아 공유 자원을 많이 없앨 수 있다.
• 단일 스레드, 비동기
  자바스크립트가 단일 스레드, 비동기 모델을 사용한다.
• 멀티스레드
  자바, 파이썬, 루비, C, C# 등이 사용한다. 멀티스레드는 실행 순서를 보장하지 않아 프로그래밍하기 어렵다.
• 메시지 패싱 프로세스
  엘릭서나 얼랭 등이 사용한다. 프로세스가 서로 메모리를 공유하지 않고 메시지로 통신한다.

타임라인 다이어그램으로 순서대로 실행되는 코드에도 두 가지 종류가 있다

바로 순서가 섞일 수 있는 코드와 순서가 섞이지 않는 코드
서로 다른 타임라인에 있는 액션은 순서가 섞일 수 있다. 하지만 타임라인 다이어그램 상 하나의 박스 안에서 연속된 액션이 차례대로 실행되고 있다면 그 사이에 다른 작업이 끼어들 수 없다.

타임라인 다이어그램으로 동시에 실행되는 코드는 순서를 예측할 수 없다

타임라인 상 같은 라인에 위치하여 동시에 실행되는 것으로 보여도 정렬된 위치와 상관없이 하나의 액션이 다른 액션보다 우선하거나 늦는 등 실행 가능한 순서가 문제될 수 있어 조심해야 한다.

좋은 타임라인의 원칙

1. 타임라인이 적을 것
2. 타임라인이 짧을 것
3. 공유하는 자원이 적을 것
4. 자원을 공유한다면 조율하기
5. 시간을 일급으로 다루기

타임라인 단순화하기

1. 액션을 통합한다. 하나의 박스에 연속된 액션을 담기
2. 타임라인이 끝나는 곳에 새로운 타임라인 하나만 생긴다면 통합한다. 즉, 하나의 타임라인에서 액션이 이어지도록 연결짓는다.

이번 챕터에서는 계층형 설계가 생각나는 시각적인 방법에 대해 배웠는데, 마찬가지로 이걸 내가 직접 실무에서 사용할 일은 아마도 없을 것 같지만 타임라인 다이어그램을 통해 액션의 흐름을 파악?하는 것은 꽤 도움이 된 것 같다. 비동기 등을 통해 오류가 생길 수 있는 예시들을 접하면서 나중에 생각지 못한 에러가 발생했을 때 이와 같은 점을 의심해볼 수 있겠다는 점은 좋다. 그리고 이번 챕터에서 유난히 다이어 그램을 그리기 위한 세 단계등 온갖 단계들을 끊임없이 강조하는게 많이 중요한가보다;; 거의 단계의 총집합. 자바스크립트와 관련하여 이벤트 루프나 작업 큐 같은 비동기 작업 관련 내용들을 다뤄준 것도 좋았다.