JavaScript에서 콜백을 사용한 비동기 코드

우리에게 어떤 비동기 함수가 있다고 가정해 봅시다:

javascriptfunction make() {
  setTimeout(function() {
    console.log('1');
  }, 3000);
}

이 함수를 다음과 같이 사용한다고 가정해 봅시다:

javascriptmake();
console.log('2'); // 먼저 실행될 것입니다

함수 내부의 비동기 작업이 수행된 후에 두 번째 콘솔 출력이 실행되도록 만들고 싶다고 가정해 봅시다. 이를 위해 사용되는 접근 방식 중 하나는 콜백을 사용하는 것입니다: 기다리는 코드를 익명 함수로 감싸서 make 함수에 매개변수로 전달합니다:

javascriptmake(function() {
  console.log('2');
});

물론, 이것 자체로는 우리의 문제를 해결하지 못합니다. 지금 우리는 단순히 다음 규칙을 정한 것입니다: make가 실행된 후 코드를 실행하려면 해당 코드를 콜백으로 make 호출에 전달하십시오.

make 함수의 코드를 우리의 규칙에 따라 작동하도록 수정해 봅시다:

javascriptfunction make(callback) {
  setTimeout(function() {
    console.log('1'); // 어떤 비동기 작업, 여러 개일 수도 있음
    callback();       // 그리고 우리의 콜백
  }, 3000);
}

javascriptfunction make(callback) {
  setTimeout(function() {
    console.log('1');
    callback();
  }, 3000);
}

make(function() {
  console.log('2');
  console.log('3');
});