자바스크립트 비동기가 되는 원리

자바스크립트가 비동기를 가능케하는 원리에 대해 궁금하여 공부하다가 잃어버릴까봐 정리 해논 글입니다.

현 회사에서 자바 RestAPI  서버단 코딩을 주로 하다가 자바스크립트로 클라언트 코딩할 일이 생겨.... 작업중 

브라우저에 대한 단일 쓰레드 비동기 처리방식이 어떻게  가능케 하는 원리가 궁금하여... 검색을 찾고 공부한 내용을 적어 둔 내용입니다.

출처는 http://meetup.toast.com/posts/89 입니다.

내용을 공유하여 주신분께 정말 감사하게 생각하고 있습니다..

1. 나의 의문점

어떻게 스레드가 하나인데 '자바스크립트는 어떻게 동시성(Concurrency)을 지원하는 걸까'?

자바는 쓰레드로 넘기면 되지만 단일 쓰레드에서 어떻게 저런일이 일어날까.....??

저의 의문점으로 시작하여 검색키워드에 '자바스크립트 비동기 원리' 검색을 시점으로 여러글을 읽었지만 Promise 객체 사용법에 대해서만 있었다.

몇몇 우연치 않게 Event Loop 라는 용어와 비동기 처리는 setTimeout 함수 및 setInterval로 사용할 수 있다. 라는 힌 검색 키워드를 알아 냈고

크롬에 개발자 모드에서 Call Stack부분을 봐도 setTimeout 함수는 Call Stack에서 사라지고 다른 함수들이 

Call Stack쌓이는 관경을 목격..  스택에 setTimeout  함수는 없는 어떻게 호출이 되는거지에 대한 의문에 시작

출처 사이트를 보면서 의문점에 대한 해갈을 시작함...

2. 출처를 보고 내린 결론

이게 결론임 자바스크립트가 '단일 스레드' 기반의 언어라는 말은 '자바스크립트 엔진이 단일 호출 스택을 사용한다'는 관점에서만 사실이다.

아래 이미지가 정말 핵심 이미지다 저걸 이해해야 자바스크립트의 비동기 작동원리가 이해된다고 생각한다.

그림(1)

지금 그림(1)을 설명하면 

1.자바스크립트 엔진, 

2.웹 APIs, 

3.이벤트 루프 ,

4.Task 큐 

위  4가지가 별게인거다

보면 이벤트 루프가 돌면서 Task큐에 첫번째큐를 실행 Task 큐안에 콜백함수 CallStack들이 실행 되어지는것이다.

setTimeout 이나 setInterval ,Ajax 함수는들을 호출하면 콜백함수가 바로 지금 실행중인 Task 큐에 CallStack에 들어가는 것이 아닌

다음 Task 큐에 들어간다 결국 다른 Task들인 셈이다. 각 Task별로 각 CallStack이 있는 개념으로 생각 하는것이 맞을 것이다.

이런 원리 때문에 자바스크립트가 비동기로 돌아가는 원리로 돌아 가는것이다

콜스택개념은 전 포스트에 남겨놓았으니 확인하기 요망