이번에는 자바스크립트의 작동원리를 정리해볼까 한다. 기술블로그를 미루고미루고 미루면서 개발자 경력을 쌓았었는데... 뒤늦게 시작하면서 느끼게 된 건 기술블로그를 작성하면 더 확실하게 내 것이 되는거 같아서 이제라도 열심히 정리를 해볼까 한다.
자바스크립트를 구동시키기 위해서는 JS engine이 필수적이다. V8엔진이 바로 그것인데 node.js와 chorme등에서 지원하기 때문에 일반적으로 js는 브라우저나 node.js를 통해 구동시킬 수 있다.
싱글스레드 언어
자바스크립트가 싱글 쓰레드로 작동한다. 즉 멀티테스킹이 안된다는 의미인데 순차적으로 한번에 한 동작만을 처리할 수 있다. 이때 특정 업무가 너무 커서 이 업무를 수행하는데 오랜시간이 걸린다면... 이 업무가 끝날 때 까지 다음 업무를 처리할 수 가 없게된다. 이를 block이라고 하는데 자바스크립트의 엔진 구성요소들은 싱글쓰레드 언어의 문제점인 block을 비동기를 통해 해결시켜준다.
자바스크립트 엔진의 구성요소
- memory heap
- call stack
- web apis
- callback queue
- event loop
비동기
실행 컨택스트를 통해 자바스크립트 실행 컨택스트가 call stack을 통해 어떻게 작동하는지 공부했다.
이때 실행 컨택스트가 10초 또는 100초가 걸리는 업무일 경우 자바스크립트는 시간이 오래걸리는 특정 업무에 대해 block 이 생기지 않게 하기위해 web apis를 통해 비동기로 처리할 수 있게 지원한다.
예를 들어
setTimeout(() => {
console.log('5초 지났습니다.')
}, 5000)와 같이 setTimeout 와 같은 함수가 call stack에 쌓이게 되면 call stack 에서 web apis로 넘어간다.
() => {
console.log('5초 지났습니다.')
}5초가 지난 후 위의 콜백 함수는 실행 되지 않고 web apis의 timer의 종료와 함께 callback queue로 넘어가게 된다.
이 후 event loop는 call stack 에 어떤 실행 컨택스트도 남지 않았을 때 이후에 callback queue 에 쌓인 콜백함수들을 실행시키기 시작한다.
console.log(1)
setTimeout(() => {
console.log(2)
}, 0);
console.log(3)
// 결과
// 1
// 3
// 2위의 코드에서 비동기 함수 setTimeout의 콜백은 결론적으로 call stack에 쌓인 console.log(1)과 console.log(3)이 모두 실행 된 이후 실행이 되므로 결과는 1 3 2 순서가 된다.
onClick과 같은 이벤트 함수도 마찬가지로 web apis 에 저장되어 있다가 이벤트가 발생하면 이후에 실행 시킬 콜백들을 callback queue 에 쌓아둔다. event loop 는 마찬가지로 call stack 에 실행 컨택스트가 없는 것을 확인 한 이후 callback queue 에 콜백들을 실행시킨다.
render queue
- call stack 에 실행 컨택스트가 있을 경우 callback queue 뿐만 아니라 랜더링 또한 render queue 를 통해 실행이 된다. 따라서 call stack 에 실행 컨택스트가 없을 때 까지 랜더링은 일어나지 못한다.
- render queue 는 callback queue 보다 우선순위가 높다.
