동기와 비동기
동기
(Synchronous)
특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것
주문 즉시 커피를 만들어 주는 카페가 있다고 가정해 봅시다.
동기적으로 운영되는 카페의 경우
음료를 주문받은 후 주문 받은 음료를 만들어 손님에게 전달한 후
다음 손님의 주문을 받고 음료를 제작하게 됩니다.
이러한 방법은 여러 손님의 주문을 소화하기가 어려우며 비효율적입니다.
비동기
(Asynchronous)
특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것
앞선 예시로 든 카페가 비동기적으로 운영되는 경우
여러 손님의 주문을 받으면서 음료를 제작하게 되고
완성되는 대로 손님에게 음료를 제공하게 됩니다.
이러한 방법은 동기적으로 운영하는 경우보다 훨씬 효율적입니다.
코드로 보는 동기, 비동기
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
이는 함수를 실행할 수 있는 창구가 단 하나이며,
2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다.
이처럼 자바스크립트 엔진은
한 번에 하나의 테스크(task)만 실행할 수 있는
싱글 스레드(single thread) 방식으로 동작한다.
싱글 스레드 방식은 한 번에 하나의 테스크만 실행할 수 있기 때문에
처리에 시간이 걸리는 테스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생한다.
동기
예를 들어 setTimeout 함수와 유사하게 일정 시간이 경과한 후에
콜백 함수를 호출하는 sleep 함수를 구현해 보자.
// 동기적 처리 example
// sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
function sleep(func, delay) {
// Date.now()는 현재 시간을 숫자(ms)로 반환한다.
const delayUnitl = Date.now() + delay;
// 현재 시간(Date.now())에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복한다.
while(Date.now() < delayUntil);
// 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
func();
}
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
// sleep 함수는 3초 이상 실행된다.
sleep(foo, 3000);
// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹된다.
bar();
비동기
// 비동기적 처리 example
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
// 타이머 함수 setTimeout은 일정 시간이 경과한 이후에 콜백 함수 foo를 호출한다.
// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3000);
bar();
비동기를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
