Javascript 비동기 코딩하기

자바스크립트는 싱글 스레드 언어로, 비동기 작업을 효과적으로 처리하기 위해 Promise와 Async/Await과 같은 기능을 제공합니다. 이러한 기능을 사용하면 비동기적인 작업을 보다 간편하게 다룰 수 있습니다. 아래는 자바스크립트에서 비동기 코딩을 하는 방법에 대한 내용입니다.

1. Callbacks

콜백은 비동기 작업의 가장 기본적인 형태입니다. 함수의 매개변수로 콜백 함수를 전달하여 작업이 완료된 후에 호출될 함수를 지정합니다.

function fetchData(callback) {
  setTimeout(() => {
    console.log('Data fetched');
    callback();
  }, 1000);
}

fetchData(() => {
  console.log('Callback executed');
});

2. Promise

Promise는 비동기 작업의 성공 또는 실패와 같은 결과를 다루기 위한 객체입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Data fetched');
      resolve();
    }, 1000);
  });
}

fetchData()
  .then(() => {
    console.log('Promise resolved');
  })
  .catch(() => {
    console.error('Promise rejected');
  });

3. Async/Await

Async/Await는 Promise를 보다 간결하게 사용할 수 있게 해주는 문법입니다.

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Data fetched');
      resolve();
    }, 1000);
  });
}

async function fetchDataAsync() {
  await fetchData();
  console.log('Async/Await executed');
}

fetchDataAsync();

4. 여러 비동기 작업 처리

Promise.all을 사용하면 여러 개의 비동기 작업이 모두 완료될 때까지 기다릴 수 있습니다.

function fetchData1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Data 1 fetched');
      resolve();
    }, 1000);
  });
}

function fetchData2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Data 2 fetched');
      resolve();
    }, 1500);
  });
}

Promise.all([fetchData1(), fetchData2()])
  .then(() => {
    console.log('All data fetched');
  });

비동기 코딩은 웹 개발에서 필수적인 부분이며, Callbacks, Promise, Async/Await 등을 통해 코드를 더욱 가독성 있고 유지보수가 용이하도록 작성할 수 있습니다.