js 이벤트 루프(Event Loop)와 동시성(concurrency)

자바스크립트는 싱글 스레트 프로그래밍 언어이다.

싱글스레드: 한 번에 하나의 작업만 할 수 있다.

one thread == one call stack == one thing at a time

함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고

스택의 위에서부터 차례대로 한번에 하나의 함수만 처리한다.

블로킹: 복잡한 프로그램을 구동한다면 시간이 오래걸려 스택에 쌓이게 되고 그 다음은 무한정 대기한다. (제출 버튼 누르고 다른 페이지로 가기전 새로고침되는 시간)

해결방안: 비동기 콜백(Asynchronus Callbacks)

call stack(호출 스택): 프로그램 상에서 우리가 어떤 순서로 작업을 수행하는지 기록하는 작업 스케쥴링과 관련된 자료구조이다. 어떤 함수를 실행하게 되면 우리는 그 함수를 스택의 맨위에 push, pop한다.

1.함수를 동기 호출하게 되면 call stack에 차곡차곡 쌓여 순차적으로 실행된다.

2. 이때 AJAX나 setTimeout ,DOM event함수를 실행하면 call stack에서 Web APIs로 보내진다.

3. 정해진 시간 혹은 이벤트가 발생한 순간에 순차적으로 callback queue에 적재한다.

4.callback queue에 줄을 선 함수들은 call stack에 쌓여있던 것들이 모두 제거되어 깨끗해지면 차례대로 스택에 쌓여 실행된다.

예 1)

console.log(1)

setTimeout(function cb() {

console.log(2);

},5000)

console.log(3)

1. main함수 실행, console.log(1)이 스택에 쌓인다. 1이 실행되어 콘솔에 1이출력된다.

2. setTimeout의 콜백 함수인 cb가 스택에 쌓이는데 브라우저에서 제공된 api로 js엔진에서 처리하지 않고 바로 web Api로 넘긴다. web api에서 돌고 있는동안

3. 브라우저는 setTimeout이 완료된 것처럼 스택에서 pop하고 다음 3을 실행하여 출력한다.

4.main()함수가 스택에서 제거되고 5초동안 대기하고 있던 cb 함수가 5초 지난 시점에 queue에 들어온다.

5. stack 이 비어있으므로 cb를 스택에 적재하고 2를 출력한다.

예 2)

document.querySelector('button').addEnentListener('click', function() {

console.log('click'); })

1. 브라우저는 click event 함수를 call stact에 저장하고 즉시 web apis로 옮겨진다.

2. 무한대기하고 있다가 사용자가 버튼을 누르는 순간

3. click 이벤트의 콜백 함수는 queue로 이동한다.

4. stack 이 비는 순간 stack으로 이동하여 함수를 실행한다.

웹 개발