[함수형 코딩#15] 타임라인 격리/ JS thread

 

타임라인 다이어그램을 그려서, 시간에 따라 어떤 일이 일어나는지 보고, 버그를 수정

액션 확인하고 -> 액션그리기(순서대로 실행, 비동기실행분류) -> 타임라인 단순화 -> 타임라인 읽고 결과예측 

> 두가지 액션이 순서대로 나타나면 같은 타임라인에 넣음 
   ㄴ순차 실행

함수A()
  |
함수B()
  |
함수C()

 

> 두가지 액션이 동시에 실행되는 경우 순서를 예측할수 없음 > 다른 타임라인에 넣음 
   ㄴ 자바스크립트는 stack에서 한가지만 수행하기 때문에 동시에 실행되지는 않음

함수A()   
  |      exeA() 
함수B()     |
  |      exeB()
함수C()

 

---

자바스크립트는 싱글스레드(single threaded)

- 하나의 실행 컨텍스트를 가짐(=동기적 처리한다= 한번에 코드 한줄씩 차례차례 실행한다= synchronous =콜스택이 하나다)
- 자바스크립트로 비동기 실행하고 싶으면 콜백함수 써야함 (=> 길어지면 가독성 문제 생김 => promise나옴)
- 싱글스레드인데 setTimeout()같은 비동기함수는 어떻게 실행되는것인가? 
   ㄴ> 비동기함수(= webAPI와 관련된 특수한 함수)는 브라우저가 지원해서 런타임에는 비동기처리 가능

 

WebAPI를 가진 브라우저가 지원하는 함수로 런타임에는 자바스크립트도 멀티스레드처럼 작동함
(=비동기처리함)

웹 브라우저 작동방식
(자바스크립트엔진 = stack + heap)
ㄴ>(call) Stack : main context + 실행 순서대로 함수들넣고 차례로 실행함 
ㄴ> Heap : 참조 타입(객체 등) 데이터 들이 저장되는 공간 
ㄴ> 비동기 함수 만나면 대기실로 보내두고 다음 코드 실행함
ㄴ> 대기실 (=web apis) : eventListener(), ajax, setTimeout(), setInterval()...들은 대기실로 보내짐
ㄴ>(callback) Queue: 대기실에서 대기 끝나면 Queue에 머물다가 Stack이 텅비면 Queue에서 올려보냄
ㄴ> 이벤트 루프 : Queue에서 Stack으로 올려보내는 작업을 함 (1. Queue에 작업있는지 확인 && 2. Stack이 비어있는지 확인)
ㄴ> 네트워크 엔진: 자바스크립트에서 ajax요청이 오면 네트워크 엔진은 연결을 맺고 캐싱하고 ajax를 큐에 넣음 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop

이벤트 루프 - JavaScript | MDN