[javascript] 자바스크립트 비동기 처리 방식

14 Dec 2023

javascript

자바스크립트에서 비동기 처리는 웹 애플리케이션에서 매우 중요합니다. 이를 통해 사용자 경험을 향상시키고 웹 애플리케이션의 성능을 최적화할 수 있습니다. 자바스크립트에서의 비동기 처리 방식에 대해 알아봅시다.

콜백 함수
프로미스
async/await

콜백 함수

콜백 함수는 가장 기본적인 비동기 처리 방식입니다. 비동기 작업이 완료되면 콜백 함수가 호출됩니다. 이 패턴은 콜백 지옥(callback hell)이라는 문제가 발생하기 쉽고 가독성이 떨어진다는 단점이 있습니다.

예시:

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

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

프로미스

ES6에서 프로미스가 도입되어 콜백 함수의 단점을 극복했습니다. 프로미스는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. 성공 시에는 resolve를 호출하고, 실패 시에는 reject를 호출합니다.

예시:

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

ES8에서 도입된 async/await는 프로미스를 기반으로 한 문법적 설탕으로, 비동기 코드를 동기식으로 작성할 수 있게 해줍니다.

예시:

async function fetchData() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data fetched!'), 1000);
  });

  let data = await promise;
  console.log(data);
}

fetchData();

이러한 비동기 처리 방식을 통해 자바스크립트에서 더 나은 코드 구조와 성능을 달성할 수 있습니다.

References

위 내용은 자바스크립트에서의 비동기 처리 방식에 대한 간략한 소개입니다. 이를 통해 비동기 처리 방식을 이해하고, 프로젝트에 적절히 적용할 수 있기를 바랍니다.

Table of Contents

콜백 함수

프로미스

async/await

References