[javascript] 비동기 작업의 올바른 사용 사례

14 Dec 2023

javascript

웹 애플리케이션에서 사용자 경험을 최적화하기 위해 비동기 작업을 올바르게 활용하는 것이 중요합니다. 비동기 작업을 사용하면 웹 애플리케이션이 더 반응적이고 빠르게 동작할 수 있으며, 사용자는 페이지 새로고침 없이 실시간 업데이트를 받을 수 있습니다.

콜백 함수 활용

function fetchData(callback) {
  // 비동기 작업을 수행하고 데이터를 가져옴
  let data = fetchDataFromServer();
  callback(data);
}

fetchData(function(data) {
  // 데이터를 사용하여 UI를 업데이트
  updateUI(data);
});

위의 예시에서, fetchData 함수는 비동기 작업을 처리하고, 작업이 완료되면 callback 함수를 호출하여 데이터를 전달합니다.

Promise 활용

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 비동기 작업을 수행하고 데이터를 가져옴
    let data = fetchDataFromServer();
    if (data) {
      resolve(data);
    } else {
      reject("데이터를 가져오는 데 실패했습니다");
    }
  });
}

fetchData()
  .then(function(data) {
    // 데이터를 사용하여 UI를 업데이트
    updateUI(data);
  })
  .catch(function(error) {
    // 오류 처리
    displayError(error);
  });

Promise를 사용하면 보다 구조화된 방식으로 비동기 작업을 처리할 수 있습니다. then과 catch를 사용하여 성공적으로 작업이 완료된 경우와 오류가 발생한 경우를 처리할 수 있습니다.

async/await 활용

async function fetchData() {
  try {
    // 비동기 작업을 수행하고 데이터를 가져옴
    let data = await fetchDataFromServer();
    // 데이터를 사용하여 UI를 업데이트
    updateUI(data);
  } catch (error) {
    // 오류 처리
    displayError(error);
  }
}

fetchData();

async/await를 사용하면 비동기 작업을 연속적인 방식으로 작성할 수 있습니다. await 키워드를 사용하여 비동기 작업의 완료를 기다린 후 다음 작업을 수행할 수 있습니다.

비동기 작업은 효율적으로 처리하고 사용자 경험을 향상시키기 위한 강력한 도구입니다. 올바른 방법으로 활용하면 웹 애플리케이션의 성능과 반응성을 향상시킬 수 있습니다.

참조: