thumbnail image - dev.to/clovis1122/dont-make-that-function-async-9m6
비동기 처리
어떤 코드의 진행이 다른 코드의 진행 순서와 관계 없이 동작하도록 처리하는 것
위에 있는 썸네일 이미지와 함께 아래 간단한 코드의 실행 결과를 예상해보면
자바스크립트의 비동기 처리 를 직관적으로 이해할 수 있습니다.
console.log('start');
setTimeout(() => {
console.log('timer end')
}, 3000);
console.log('end');코드 실행 결과를 console에서 확인해보겠습니다.
위 코드를 동기 처리 했다면 start 출력, 3초 후 timer end 출력, 마지막으로 end 를 출력했겠지만
setTimeout() 함수를 비동기 처리 했기 때문에 console과 같이 출력되었습니다.
비동기 처리가 필요한 이유
이런 비동기 처리가 왜 필요할까요?
식당에서 주문받은 메뉴를 준비하는 과정과 연관지어 생각해보겠습니다.
/*
* @param menu 메뉴명
* @param minutes 메뉴를 준비하는데 필요한 시간
*/
function orderMenu(menu, minutes) {
setTimeout(()=> {
console.log(menu + '이(가) 준비되었습니다.');
}, minutes);
}
orderMenu('메뉴1', 10000);
orderMenu('메뉴2', 4000);
orderMenu('메뉴3', 6000);만약 메뉴 준비하는 과정을 동기 처리 한다면
메뉴1 이 완성된 후에 메뉴2 를 준비하고, 메뉴2 가 완성된 후에 메뉴3 을 준비하겠죠?
만드는데 6분 밖에 걸리지 않는 메뉴3 은 10+4+6 = 20분 후에 제공되겠네요...🥲
다행히 식당은 메뉴 준비하는 과정을 비동기 처리합니다.
각 메뉴를 다른 메뉴와 관계 없이 준비하기 때문에
메뉴를 준비하는데 필요한 시간에 따라 메뉴2, 메뉴3, 메뉴1 순서로 준비가 되었네요 🙂
모든 메뉴를 준비하는데는 총 10분이 소요되었습니다.
