Javascript 근본부터 알아보자

이불안에서 쉬다가 알고리즘을 통해서 백기선개발자님의 유툽을 보게 되었다.
해당 영상에서 개발자로 취업을 한다면 '기술의 근본이 되는 것을 내 것이 되도록 해야한다.'고 하셨고,
요즘 면접을 보러 다니면서 하고자 하는 언어에 대한 '근본적인것부터 공부 해야겠다'라는 생각을 하게 되어 글을 적게 되었다.

근래에 면접에서 질문을 받았던 event loop에 대해서 정리를 해보려고 하는데,
event loop 얘기를 듣자마자 javascript에서 event라면 웹상에서 action이 일어났을 때 발생하는 event밖에 생각이 안 났다.
(이제부터라도 공부 좀 제대로 하자😢)

집에 와서 찾아보니 이전에 Philip Roberts의 발표 해당 영상으로 알게 된 자바스크립트의 비동기 동작 방식이었다.

결론은, 자바스크립트는 Single Thread로 동작하는 언어로
한번에 하나의 작업만 수행할 수 있는데 '어떻게 동시성을 가질 수 있을까?' 하는 거였다.

V8 Javascript engine

모든 브라우저는 Javascript 코드를 실행하기 위해 Javascript Engine을 제공하는데 제일 많이 사용되는 Google의 V8엔진에 대해 알아보려고 한다.

초기 Javascript Engine은 최적화가 없었기에 실행 속도가 느렸다고 한다. 여기서 Google은 Chrome브라우저용 V8을 제작했고, Just-In-Time 컴파일로 실행시간을 크게 향상 시킬 수 있었다고 한다.

자바스크립트 엔진은 크게 두가지 구성요소로 되어있다고 한다.

• Memory Heap : 메모리 할당이 발생하는 곳
• Call Stack : 코드가 실행 될 때 Stack 형태로 쌓이는 곳
  이런 구조인데,
  앞서 언급한 Single Thread는 Call Stack이 하나라는 것입니다.
  따라서, 모든 일처리는 한번에 하나씩만 수행이 가능한데 비동기 콜백은 어떻게 처리하는지 알아보자!

Javascript Runtime

Javascript Runtime은 크게 4가지 요소로 나뉜다.

• Javascript Engine : Memory Heap, Call Stack으로 구성
• Web APIs : Javascript Engine에서 정의되지 않은 setTimeout, HTTP 요청 매소드, Dom이벤트 지원
• Callback Queue : Web API 결과값을 쌓아두는 Queue
• Event Loop : Call Stack과 Callback Queue를 관찰하며, Call Stack이 비어있으면 Callback Quere의 첫번째 Call back을 Stack에 쌓는 역할

예제

console.log('Start script...');

setTimeout(() => {
    task('Download a file.');
}, 1000);

console.log('Done!');

결과

Start script...
Done!
Download a file.

Javascript는 위에서부터 진행이 된다.
1. 첫번째 줄의 console.log('Start script...'); 를 실행하기 위해 Call Stack에 해당 값이 들어가고 실행되면 'Start script...'를 찍고 사라진다.
2. setTimeout함수가 Call Stack에서 실행되고, callback 함수인 task('Download a file.'); 함수는 Web API 에 1000ms 동안 머무른 후 Callback Queue에 쌓인다.
3. console.log('Done!');를 실행하기 위해 Call Stack에 해당값이 들어가고 실행되면 'Done!'을 찍고 사라진다.
4. Call Stack이 비워지면 Callback Queue에 있던 task()가 Call Stack에 올라간 후 실행 되면 'Download a file'을 찍은 후 사라진다.

이런 순서로 비동기로 동작이 진행된다.

참고한 사이트

• mdn web docs
• Philip Roberts의 발표 영상
• 우아한형제들-10분테크톡 영상
• Alexander Zlatkov Blog - 1
• Alexander Zlatkov Blog - 2
• Uday Hiwarale Blog
• Carson Blog
• jaynewho Blog
• thms200-velog