자바스크립트는 싱글 스레드 언어
: 한 번에 하나의 일밖에 처리할 수 밖에 없는 언어
: 즉 하나의 프로세스가 자원을 점유해버리면 다른 프로세스들은 해당 프로세스의 작업이 끝나기만을 기다려야 함
⇒ 이때 사용하는 것이 비동기 콜백, 비동기 콜백에 대해 이해하려면 JS Engine과 web API, event loop에 대한 이해가 필요함
자바스크립트 코드를 이해하고 실행을 도와주는 녀석 JS Engine
: Javascript 코드를 이해하고 실행을 도와주는 프로그램 또는 인터프리터
: 대표적으로 V8 Engine(Chrome, Node.js 등)이 있으며 외에도 각 브라우저들 별로 여러가지 엔진이 존재함, 자바스크립트 엔진은 Memory Heap, Call Stack으로 이루어 짐
•
Memory Heap
: 데이터를 임시 저장하는 곳으로 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장
•
Call Stack
: 코드가 실행되면 코드의 내부의 실행 순서를 기록해놓고 하나씩 순차적으로 진행할 수 있도록 도와주는 곳
function multiplyNumber(num1, num2) {
return num1 * num2;
}
function printSquare(x) {
let n = multiplyNumber(x, x);
console.log(n);
}
printSquare(5);
JavaScript
복사
⇒ 위 코드를 실행하면 아래와 같은 Call Stack이 차례대로 생기게 됨
printSquere(5)
printSquere(5)
multiplyNumber(x, x)
printSquere(5)
multiplyNumber(x, x)
num1 * num2
printSquere(5)
multiplyNumber(x, x)
printSquere(5)
printSquere(5)
console.log(n)
printSquere(5)
⇒ 즉 실제로 코드를 실행했을 때, 다음에 실행되어야 할 코드를 순서대로 기록하며 순차적으로 코드를 실행할 수 있게 도와줌
⇒ 만약 노란색으로 칠해진 코드가 어떠한 이유로 오래 걸린다면 다음에 호출될 multiplyNumber(x, x)는 시간이 오래걸릴 수 밖에 없음, 이와 같은 상황이 특정 코드가 오래 걸려 block된 상태
⇒ 이 때, 효과적으로 event를 관리하기 위해 필요한 것이 바로 web API, Callback Queue, event loop
물이 끓고 나면 해야하는 일 (Callback Function)
: 라면에 물이 다 끓으면 라면을 넣거나 스프를 넣음
: 스프 먼저, 면 먼저와 같이 기호가 다르듯 하나의 일이 끝나면 사람마다 다음 해야할 일이 다를 수 있음
: 자바스크립트에서는 함수가 실행이 끝나면 다음에 실행할 일을 정할 수 있는데 이것을 Callback이라고 부름
setTimeout(function(){
console.log('1초가 지나갔다')
}, 1000)
JavaScript
복사
⇒ setTimeout 함수는 첫번째 인자로 callback function을 받고 두번째 인자로 기다릴 시간을 받는 함수
⇒ 위 코드를 실행해보면 1초 후에 function() { console.log(”1초가 지나갔다”) } 가 실행됨
⇒ 즉 Callback Function은 함수가 정해놓은 일이 끝난 뒤, 후속으로 하는 일을 알려주는 함수
오래 걸리는 일 따로 처리하기 (browser web APIS)
: 아침 식사를 준비할때, 토스트기 없이 프라이팬에 빵을 구우면 빵을 굽는 동안은 식탕을 세팅한다거나 음료를 준비하는 등의 일을 할 수 없음
: 반면에 토스트기가 있다면 빵 굽는 일을 시키고 다른 일을 할 수 있음
: 이를 브라우저에 대입해보면 browser web API가 브라우저에서 토스트기와 같이 오래걸리는 작업을 대신해주는 역할을 함
: browser web API는 브라우저 안의 C++로 구현한 쓰레드로 DOM event, AJAX request, setTimeout 등 비동기 이벤트를 처리하여 javascript는 싱글 쓰레드의 영향없이 독립적으로 이벤트 처리
머리 속에 다음에 할 일 생각해 놓기 (Callback Queue)
: 토스트기에 식빵을 넣어둔 상황임, 빵이 다 구워지면 빵에 잼을 바를 예정
: 이처럼 사람은 어떤 일이 끝나면 다음에 할 일을 머리속에 저장해놓지만 브라우저의 경우 Callback Queue에 저장해놓고 사용함
: 즉, Callback Queue는 browser web API에 있는 event가 실행되고 나면 javascript에서 실행할 callback을 저장하고 있는 저장소
할 일을 정돈하기 (event loop)
: 토스트기에 빵을 넣고 냉장고에서 우유와 과일을 세팅함, 우유를 따르던 도중 토스트에서 빵이 다 구워졌음, 빵이 다 구워지면 잼을 바르려했으나 우유를 따르던 중이므로 우유를 마저 따르고 잼을 바름
: 이처럼 사람은 능률적으로 일하기 위해 우유를 마저 따르고 빵을 굽는 행동을 효과적으로 판단하고 행동함
: Javascript에서도 효과적으로 일을 처리하기 위해 비슷한 매커니즘이 존재하는데, 이를 event loop라고 부름
⇒ 설명
: event loop 매커니즘
