[javascript] 이벤트 루프를 통한 자바스크립트의 동시성 제어 방법

자바스크립트는 단일 스레드로 동작하지만, 이벤트 루프를 통해 동시성을 제어할 수 있습니다.

이벤트 루프는 단일 호출 스택을 사용하여 비동기 콜백을 처리하고, 이를 통해 다양한 동작을 동시에 처리할 수 있습니다.

비동기 코드와 콜백

비동기 코드는 주로 콜백 함수를 통해 처리됩니다. 예를 들어, setTimeout 함수를 사용하면 일정 시간이 지난 후에 콜백 함수를 실행할 수 있습니다. 콜백 함수는 이벤트 루프를 통해 스케줄되어 실행됩니다.

console.log('첫 번째');
setTimeout(() => {
  console.log('두 번째');
}, 1000);
console.log('세 번째');

위 예제는 ‘첫 번째’, ‘세 번째’, ‘두 번째’ 순서로 출력됩니다. 이는 setTimeout에 의해 콜백 함수가 1초 뒤에 실행되기 때문입니다.

Promise와 async/await

콜백 지옥을 피하기 위해 Promiseasync/await가 도입되었습니다.

Promise를 사용하면 비동기 작업을 보다 간결하게 표현할 수 있고, async/await는 Promise를 더 쉽게 다룰 수 있도록 해줍니다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('첫 번째');
  await delay(1000);
  console.log('두 번째');
  console.log('세 번째');
}

example();

위 예제에서 delay 함수는 지정된 시간(ms) 후에 Promise를 해결(resolve)합니다. example 함수에서는 await를 사용하여 비동기 작업을 순차적으로 실행할 수 있습니다.

결론

자바스크립트의 이벤트 루프를 이용하면, 단일 스레드 환경에서도 비동기 작업을 효과적으로 다룰 수 있습니다. 콜백, Promise, async/await 등을 활용하여 동시성을 제어하고, 효율적으로 비동기 코드를 작성할 수 있습니다.

참고 자료