비동기

프론트엔드분야를 공부하며 생길수 있는 의문점과 가져야할 지식에 대하여 공부하는 바를 적은 글입니다.

자바스크립트 엔진의 실행

• 자바스크립트의 엔진은 한번에 하나의 태스크만 실행할 수 있는 ***싱글 스레드*** 방식으로 동작한다.

• 한 번에 하나의 태스크만 처리할 수 있기 때문에, 시간이 오래걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다.

비동기 처리

Code 1.

function foo(){
	console.log("foo");
}

function bar(){
	console.log("bar");
}

setTimeout(foo, 3 *1000);
bar();

// bar 호출 후 3초 뒤에 foo를 호출한다.

• Code 1에서 사용된 setTimeout 메서드는 대표적인 비동기 함수이다.

• setTimeout함수는 일정 시간뒤에 콜백 함수를 호출하지만, setTimeout 함수 이후의 태스크를 곧바로 실행한다(블로킹 X)

• 위와 같이 현재 실행중인 태스크가 종료되지 않아도 다음 태스크를 실행하는 방식을 비동기 처리라고 한다.

• 동기 처리는 태스크가 끝나고 다음 태스크를 실행하기에 실행순서가 보장된다는 장점이 있지만, 앞선 태스크가 완료되지 못하면 뒤의 태스크들은 모두 블로킹 된다.

HTTP 요청, 이벤트 핸들러는 모두 비동기 처리방식으로 작동한다.

reference

모던 자바스크립트 Deep Dive