자바스크립트 비동기 처리 방법

10 Nov 2023

javascript

자바스크립트는 싱글 스레드로 동작하기 때문에, 비동기 처리는 매우 중요합니다. 비동기 처리를 통해 웹 애플리케이션의 성능을 향상시킬 수 있고, 사용자 경험을 개선할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 비동기 처리를 하는 방법에 대해 알아보겠습니다.

1. 콜백 함수 (Callback)

콜백 함수는 가장 기본적인 비동기 처리 방식으로, 함수의 인자로 전달되어 특정 이벤트가 발생하거나 작업이 완료되면 호출됩니다.

function fetchData(callback) {
  setTimeout(function() {
    const data = "비동기 데이터";
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(data);
}

fetchData(handleData);

2. 프로미스 (Promise)

프로미스는 ES6부터 도입된 비동기 처리 방식으로, 콜백 지옥을 피할 수 있는 구조를 제공합니다. 프로미스는 성공(resolve) 또는 실패(reject) 상태를 가질 수 있으며, then()과 catch() 메소드를 이용해 결과를 처리합니다.

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = "비동기 데이터";
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

3. async/await

async/await은 ES8부터 도입된 비동기 처리 방식으로, 프로미스를 기반으로 동작합니다. async 함수 안에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = "비동기 데이터";
      resolve(data);
    }, 1000);
  });
}

async function handleData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

handleData();

마무리

이번 포스트에서는 자바스크립트에서 비동기 처리를 하는 세 가지 방법에 대해 알아보았습니다. 각각의 방법은 고유한 특징과 장단점을 가지고 있으므로, 상황에 따라 적합한 방법을 선택하여 사용할 수 있습니다. 비동기 처리에 대한 이해를 바탕으로 웹 애플리케이션의 성능과 사용자 경험을 개선할 수 있습니다.

참고 자료:

#javascript #비동기 #자바스크립트