[js] 비동기 프로그래밍

 

자바스크립트는 기본적으로 단일 스레드로 동작하는 언어로, 비동기 프로그래밍을 통해 여러 작업을 동시에 처리할 수 있다. 비동기 프로그래밍은 주로 네트워크 요청, 읽기/쓰기, 타이머 등 시간이 오래 걸리는 작업을 효율적으로 처리하는 데 사용된다.

 

콜백함수

// 비동기 프로그래밍의 가장 기본적인 형태
// 특정 작업이 완료된 후 호출되는 함수
// setTime을 사용하여 1초 후에 콜백 함수가 호출됨
function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched");
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

 

 

프로미스

// 콜백 지옥 문제를 해결하기 위해 도입된 개념으로, 비동기 작업의 완료 또는 실패를 처리할 수 있는 객체
// 비동기 작업을 체이닝하여 처리할 수 있어 가독성이 향상됨
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

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

 

async/await

// ES2017(ES8)에서 도입된 문법으로, 프로미스를 더욱 직관적으로 사용할 수 있게 해줌
// async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 함수 실행을 일시 정지함
// async/await는 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 뛰어나고, 에러 핸들링도 
// try/catch 블록을 통해 간편하게 처리할 수 있음
async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

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

main();