1월 28일 여정 20일차이다.

"자바스크립트는 싱글 스레드이며, 비동기처리를 지원한다"

싱글 스레드는 무엇이고, 비동기처리 지원은 무엇일까?

오늘의 Today I Learned

problem

자바스크립트를 깊게 공부하다 보면 꼭 한번쯤은 듣는 말이다. 하지만 이해가 가지않아 한번 깊게 알아보기로 하였다.

try

항해99에서 제공해준 문서를 보았지만, 나에게는 쉽지 않았다. 그래서 다른 것들을 찾아보기로 하였다.

solve

아래의 내용은 '애플 코딩'을 바탕으로 작성하였습니다.

위의 그림을 보면 자바스크립트의 비동기 런타임을 볼 수 있다. 일단 제일 먼저 눈에 띄이는 것은
바로 stack이다. stack은 이전에도 보았던 코드를 처리해주는 곳이다. record와 outer등을 놓고 렉시컬 환경등을 통하여 처리해주는 곳이 바로 저곳이다.
일단 x + y = 4라는 것이 들어오면 Stack에서는 코드를 처리하기 시작한다. Stack은 x의 값과 y의 값을 Heap영역에서 가져와 x = 2 , y = 2 를 통하여 stack에서 처리를 한다.
그렇지만 문제는 setTimeoutP()이라는 것이 들어오면 생긴다.

일단 자바스크립트는 항상 동기식 처리언어이다. 이게 무슨 소리냐면 한 마디로 한번에 한줄씩 차례차례 실행된다는 소리이다.

console.log(1); 
setTimeout(function(){
  console.log(2);
}, 1000);  
console.log(3); 

위의 코드를 다른 언어에서 실행했을 때를 생각해보자. 파이썬을 예를 들면 파이썬은 1이 출력되고 1초 쉬고 2라는 것이 출력된다. 마지막에 3이 출력된다. 하지만 자바스크립트는 다르다. 1이 출력된다. 그리고 바로 3이 출력된다. 나중에 2가 출력된다.

어떻게 생각해보면 이상하다고 느낄 수 있다. 왜냐하면 동기식 처리임에도 불구하고 왜 2가 먼저가 아니고 3이 먼저 출력되는 걸까?

위의 코드들은 stack라는 곳에서 하나씩 처리가 된다. 먼저 맨위 콘솔(1)이 처리가 된다.

그 다음은 setTimeout()차례인데, 이 함수는 비동기처리를 도와주는 함수이다.

비동기처리를 도와주는 함수는 Ajax요청 코드 그리고 이벤트리스너, setTimeout()등이 있다.
그럼 이 비동기 처리를 도와주는 함수는 Web APIs(대기실)이라는 곳에 가게 된다.
여기서 시간이 끝날 때까지 기다린다. 그리고 콘솔(3)이 먼저 처리된다.
비동기식 처리는 jax요청 코드 그리고 이벤트리스너, setTimeout()처럼 시간이 걸리는 것은 나중에 처리하고 먼저 빠르게 다른 것을 처리하는 자바스크립트의 특징을 말한다.

1초가 지나면 setTimeout()은 바로 스택으로 이동하지 않는다. 밑에 큐라는 곳으로 이동한다.
큐는 선입선출이다. 먼저 들어온것이 먼저 처리된다. 여기서 콜백의 형태로 대기를 한다.

자 제일 중요한것은 지금부터이다. 큐에 들어간 것은 바로 이벤트 루프라는 것을 타고 스택으로 가서 처리 되지 않는다.

'스택이 비어있으면 그때서야 스택에서 처리가 된다.'

자 이렇게 자바스크립트 엔진이 코드를 처리하는 과정을 보았다. 그럼 질문이 하나 남았다. 싱글 스레드는 과연 무엇일까?
위에서 자바스크립트는 동기식처리 언어라고 하였다.
기본적으로 자바스크립트는 스택이 1개 밖에 없기 때문에 코드를 한줄씩 밖에 처리하지 못한다.

그래서 이것을 전문용어로 싱글 스레드라고 한다.

knew

결과적으로 자바스크립트는 스택이 하나 밖에 없어 코드를 한줄밖에 처리하지 못한다. 그래서 싱글 스레드이다. 또한 비동기 처리를 도와주는 함수들이 있어 이것을 이용하여 비동기 처리를 할 수 있기 때문에 비동기처리를 지원하는 것이다.
"자바스크립트는 싱글 스레드이며, 비동기처리를 지원한다" 이 말이 조금씩 이해가기 시작한다. 이제는 왜 싱글 스레드인지 비동기처리를 지원하는지 알게 되었다.

마지막으로

하루하루 발전해가는 모습이 눈에 보인다...