[JavaScript] 비동기

동기 처리와 비동기 처리

JavaScript 엔진

• 싱글 스레드(signle thread) 방식
• cf. 브라우저는 멀티 스레드로 동작!
  • 한 번에 하나의 태스크만 실행
  • 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생

동기 처리 방식

💡 현재 실행중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식

 

• 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨
• 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 됨

/* 동기 처리 방식
* 현재 실행 중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식
*/
//함수 sleep은 delay가 경과한 후에 콜백함수(func) 호출
function sleep(func, delay){
		//Date.now()는 현재 시간을 반환
    const delayUntil = Date.now() + delay
		//현재 시간에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복
    while(Date.now() < delayUntil)
		//일정 시간이 경과한 이후에 콜백함수 실행
    func()
}
function foo(){
    console.log('foo')
}
function bar(){
    console.log('bar')
}
//slepp 함수는 3초 이상 실행
sleep(foo,3*1000)
// bar 함수는 sleep이 종료된 이후에 호출됨 (3초 이상 blocking)
bar()
//3초 이상 경과 후 foo 호출=>bar호출

비동기 처리 방식

 💡 현재 실행 중인 태스크가 종료되지 않은 상태라도 다음 태스크를 곧바로 실행하는 방식

• 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행해 블로킹 발생하지 않음
• 태스크의 실행 순서가 보장되지 않음
• 비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용
• 비동기 처리를 위한 콜백 패턴은 콜백 헬(callback hell)을 발생시킴
  • 가독성을 나쁘게 함
  • 비동기 처리 중 발생한 에러의 예외처리 곤란
  • 여러 개의 비동기 처리를 한 번에 처리하는 데 한계
• setTimeout, setInterval, HTTP 요청, 이벤트 헨들러
• 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)와 깊은 관계
•  

/* 비동기 처리 방식
현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
*/
//함수 sleep은 delay가 경과한 후에 콜백함수(func) 호출
function sleep(func, delay){
		//Date.now()는 현재 시간을 반환
    const delayUntil = Date.now() + delay
		//현재 시간에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복
    while(Date.now() < delayUntil)
		//일정 시간이 경과한 이후에 콜백함수 실행
    func()
}
function foo(){
	console.log('foo')
}

function bar(){
	console.log('bar')
}

//타이머 함수 setTimeout은 일정 시간이 경과한 이후에 콜백 함수 foo를 호출
// 타이머 함수 setTimeout은 bar함수를 브로킹하지 않는다.
setTimeout(foo,3*1000)
bar()
//bar 호출 -> (3초 경과후) foo호출

이벤트 루프와 태스크 큐

Task Queue로 할당된 후 Event Loop가 Call Stack이 빈 것을 확인 후 Call Stack으로 할당

자바스크립트 엔진

콜 스택(Call Stack)

💡 소스코드(전역 코드나 함수코드 등) 평과 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 컨텍스트 스택

 

• 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸쉬되어 순차적으로 실행
• 단 하나의 콜스택을 사용
• 최상위 실행 컨택스트가 종료되어 콜 스택에 제거되기 전까지는 다른 어떤 태스크도 실행되지 않음

힙(Heap)

💡 객체가 저장되는 메모리 공간

 

• 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조
• 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정(동적 할당)
• 객체가 저장되는 메모리 공간인 힙은 구조화 되어있지 않음

 

태스크 큐(Task Queue/Event Queue/Callback Queue)

 💡 setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

 

• 태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재

이벤트 루프(Event Loop)

💡 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인

 

• 자바스크립트의 동시성을 지원
• 브라우저에 내장된 기능 중 하나
• 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적 (First In First Out)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동
• 콜 스택으로 이동한 함수는 실행됨
• 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작

Reference

이웅모 저, 「모던 자바스크립트 Deep Dive」, 위키북스(2020)