15장. 타임라인 격리하기

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

타임라인 다이어그램 기본 규칙:

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

→ 액션만 그림

← 계산은 실행 시점에 영향을 받지 않기 때문
두 액션이 동시에 실행되거나 순서를 예상할 수 없다면 분리된 타임라인에 넣는다

타임라인 다이어그램의 그리기 단계

액션을 확인한다
순서대로 실행되거나 동시에 실행되는 액션을 그린다.
- 동시에 실행되는 코드는 순서를 예측할 수 없음
- 실행가능한 순서 : 타임라인이 실행 가능한 방법
플랫폼에 특화된 지식을 사용해 다이어그램을 단순화한다.

자바스크립트에서는
1. 하나의 타임라인에 있는 모든 액션을 하나로 통합한다.
2. 타임라인이 끝나는 곳에서 새로운 타임라인이 하나 생긴다면 통합한다.

스레드 모델

단일 스레드, 동기 : 모든 것이 순서대로 실행되고 끝날 때까지 기다림 (ex: PHP)
단일 스레드, 비동기 : 입출력 작업을 하려면 비동기 모델을 사용해야 함. 입출력 결과는 콜백으로 받을 수 있지만, 언제 끝날지 알 수 없어 다른 타임라인에 표시함 (ex: javaScript)
멀티스레드 : 실행 순서를 보장하지 않음. 새로운 스레드가 생기면 새로운 타임라인을 그림 (ex: java, python)

⇒ 자바스크립트는 어떻게 동작할까?

자바스트립트의 비동기 큐

작업 큐 : 이벤트 루프에 의해 처리됨
- 작업 : 이벤트 데이터와 이벤트를 처리할 콜백으로 구성된 것
이벤트 루프 : 큐에서 작업 하나를 꺼내 실행하고 완료하면 다시 다음 작업을 꺼냄

→ 하나의 스레드에서 처리. 동시에 실행될 수 없음

⇒ 이벤트가 예측 불가능한 시점에 큐에 들어가는 것을 방지하고자 함

⇒ ajax와 이벤트 큐 활용

ajax와 이벤트큐

ajax 요청이 생기면 네트워크 엔진이 해당 요청을 요청 큐에 넣음
요청 큐에 작업이 추가되어도 코드는 계속 실행됨

← ajax 콜백은 비동기이기 때문

좋은 타임라인의 원칙

타임라인은 적을수록 이해하기 쉽다.
타임라인은 짧을수록 이해하기 쉽다.
공유하는 자원이 적을수록 이해하기 쉽다.

← 실행 순서에 신경 쓸 필요가 없기 때문
- 자원을 공유한다면(ex: 같은 전역변수 사용) 잘못된 순서로 진행 시 버그 발생
  
  ⇒ 공유하는 자원을 최대한 없애자!
  
  ← 1. 전역변수를 지역변수로 변경하거나
  
  ← 2. 전역변수를 인자로 바꾸거나
자원을 공유한다면 서로 조율해야 한다.
시간을 일급으로 다룬다.

+ 이야기해보기

자바스크립트 동작 원리: Event loop와 Job Queue

효석님의 이슈 (opens in a new tab)에서 공유된 글 일부 中

webAPI는 비동기 처리가 종료되면, 실행할 콜백 함수를 작업 큐(콜백 큐)에 넣는다.
이벤트 루프는 call stack이 비어있는지 체크하고, 비어있을 경우 작업 큐(콜백큐)의 첫 번째 이벤트를 call stack에 넣는다.

왜 call stack이 빌 때까지 기다리는가?

Call stack이 빌 때까지 기다리지 않고 랜덤한 순간에 push 된다면 상황이 복잡해진다.

만약 push된 함수가 실행될 때 또다른 함수가 또 push되어서 실행된다면? 점점 스케줄링이 복잡해질 것이고, 이처럼 다른 함수에 의해 인터럽트 되는 상황까지 추가적으로 고려해서 함수를 설계해야될 것이다.

=> 15강에서 전체적으로 다루고 있는 장바구니 담기 버그와 비슷하다고 생각되었음

장바구니 버그 원인 : 서로 다른 타임라인에 있는 액션의 순서가 엮여 그 과정에서 액션의 결과가 다른 값에 영향을 끼침 ( ← 의도하지 않은 결과 )
call stack : 실행이 끝나지 않은 상황에서 또 다른 함수가 실행된다면, 다른 함수에 의해 인터럽트 되는 상황이 발생할 수 있음 ( ← 의도하지 않은 결과 )

=> 이와 같은 다양한 상황을 타임라인의 관점에서도 이해해볼 수 있구나, 라고 느껴 흥미로웠습니다 ^_^