자바스크립트 비동기 처리

10 Sep 2023

javascript

자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 웹 애플리케이션에서는 여러 작업을 동시에 처리해야 할 때가 많습니다. 이런 경우 자바스크립트의 비동기 처리 메커니즘이 큰 도움이 됩니다. 비동기 처리를 통해 여러 작업을 동시에 처리하고, 효율적으로 웹 애플리케이션을 개발할 수 있습니다.

콜백 함수

자바스크립트에서 가장 일반적으로 사용되는 비동기 처리 방법은 콜백 함수 입니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수입니다. 이를 통해 작업의 완료 여부를 확인하고, 이후 작업을 수행할 수 있습니다.

다음은 콜백 함수를 사용한 비동기적인 타이머 설정 예제입니다.

console.log("시작");

setTimeout(function() {
  console.log("3초 경과");
}, 3000);

console.log("끝");

위 코드에서 setTimeout 함수는 3초 후에 콜백 함수를 실행합니다. 코드의 실행 흐름은 다음과 같습니다.

“시작”을 출력합니다.
setTimeout 함수를 호출하고 작업을 등록합니다.
“끝”을 출력합니다.
3초가 지나면 등록된 콜백 함수가 실행되어 “3초 경과”를 출력합니다.

Promise

콜백 함수는 쉽게 깊어지는 콜백 헬(callback hell)을 유발할 수 있습니다. 이러한 문제를 해결하기 위해 ES6부터는 Promise 객체가 도입되었습니다. Promise는 비동기 작업의 성공 또는 실패 상태를 나타내는 객체로, 콜백 함수보다 가독성이 높고 유지 보수가 쉽습니다.

Promise를 사용한 예제를 살펴보겠습니다.

console.log("시작");

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3초 경과");
  }, 3000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

console.log("끝");

위 코드는 이전의 콜백 함수 예제와 동일한 동작을 수행합니다. 하지만 Promise를 사용하면 .then() 메서드와 .catch() 메서드를 통해 성공과 실패에 대한 처리를 분리할 수 있습니다.

async/await

ES8부터는 async/await 문법이 도입되었습니다. async/await는 Promise를 더 간편하게 사용할 수 있도록 해 줍니다. async 함수는 항상 Promise를 반환하며, await 키워드를 사용하여 비동기 작업을 동기적으로 처리할 수 있습니다.

console.log("시작");

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

async function timer() {
  await delay(3000);
  console.log("3초 경과");
}

timer()
  .then(() => {
    console.log("완료");
  })
  .catch((error) => {
    console.error(error);
  });

console.log("끝");

위 코드에서는 delay 함수를 정의하여 원하는 시간(ms)만큼 대기할 수 있도록 했습니다. timer 함수는 delay 함수를 사용하여 3초를 기다린 후 “3초 경과”를 출력합니다. 이후 호출한 곳에서 .then()을 사용하여 작업의 완료를 확인할 수 있습니다.

마무리

자바스크립트 비동기 처리는 웹 애플리케이션 개발에서 중요한 부분입니다. 콜백 함수, Promise, async/await 등을 통해 비동기 작업을 효율적으로 처리할 수 있습니다. 하지만 비동기 처리를 사용할 때에는 코드의 복잡성과 에러 처리에 대한 주의가 필요하므로, 유지 보수하기 쉬운 코드를 작성하는 것이 중요합니다.