JavaScript의 Promise와 Callback 이해하기

인증 테스트에 대한 주요 질문 및 답변

1. 콜백 함수란 무엇이며 일반 함수와 어떻게 다릅니까?

   • 콜백 함수는 다른 함수에 인수로 전달되고 비동기 작업을 처리하기 위해 호출됩니다. 일반 함수와 달리 콜백은 특정 작업이 완료된 후에 실행되도록 설계되었습니다.

2. 프라미스는 어떻게 코드 가독성을 높이고 콜백과 비교하여 비동기 작업을 관리합니까?

   • 프라미스는 연결과 더 나은 오류 처리를 허용하여 더 읽기 쉽고 유지 관리하기 쉬운 코드로 이어집니다. 이는 "콜백 지옥"으로 알려진 깊게 중첩된 구조를 피하는 데 도움이 됩니다.

3. Promise의 주요 상태는 무엇이며 이러한 상태 간에 어떻게 전환됩니까?

   • 주요 상태는 Pending(초기 상태), Fulfilled(작업이 성공적으로 완료됨), Rejected(작업 실패)입니다. Promise는 Pending에서 Fulfilled 또는 Rejected로 전환됩니다.

4. 프라미스를 사용하여 오류를 어떻게 처리할 수 있으며, 콜백을 사용한 오류 처리와 어떻게 비교되나요?

   • 프라미스는 효율적인 방식으로 오류를 처리하기 위한 catch 메서드를 제공하는 반면, 콜백을 사용한 오류 처리에는 중첩된 콜백에서 오류 객체와 여러 검사를 전달해야 하는 경우가 많습니다.

5. Promise.all과 Promise.race의 차이점은 무엇이며 각각 언제 사용합니까?

   • Promise.all은 모든 입력 Promise가 해결될 때 확인되므로 여러 비동기 작업이 완료될 때까지 기다리는 데 유용합니다. Promise.race는 입력 Promise 중 하나가 해결되자마자 해결되며, 첫 번째 완료된 작업의 결과가 필요한 시나리오에 유용합니다.

6. async/await 구문은 Promise 작업을 어떻게 단순화하며, wait 사용 규칙은 무엇입니까?

   • async/await 구문을 사용하면 동기 방식으로 비동기 코드를 작성할 수 있어 가독성이 향상됩니다. wait는 비동기 함수 내에서만 사용할 수 있으며 Promise가 해결될 때까지 실행을 일시 중지합니다.

소개

진화하는 JavaScript 환경에서 비동기 작업을 효율적으로 관리하는 것은 고성능 웹 애플리케이션을 구축하는 데 핵심입니다. 콜백은 원래 접근 방식이었지만 Promise는 비동기 작업을 처리하기 위해 보다 구조화되고 읽기 쉬운 방법을 도입했습니다. 이 블로그에서는 사용자가 이미 이러한 개념을 기본적으로 이해하고 있다는 가정 하에 Promise와 콜백 사용의 복잡성을 자세히 살펴봅니다.

콜백에 대한 약속의 이점

향상된 가독성 및 유지 관리성

콜백은 기능적이지만 종종 "콜백 지옥"이라는 깊게 중첩된 구조로 이어져 코드를 읽고 유지 관리하기 어렵게 만듭니다.

콜백 지옥의 예:

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

약속으로 개선됨:

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

오류 처리

콜백을 사용하면 오류 개체를 전달하고 각 수준에서 처리해야 하므로 오류 처리가 번거로울 수 있습니다.

콜백을 사용한 오류 처리:

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Promise를 사용한 오류 처리:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

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

고급 약속 방법

약속.모두

Promise.all은 계속 진행하기 전에 여러 비동기 작업이 완료될 때까지 기다려야 할 때 유용합니다.

예:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

약속.경주

Promise.race는 가장 빠른 작업의 결과가 필요할 때 유용합니다.

예:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

async/await를 사용하여 비동기 코드 단순화

async/await 구문을 사용하면 동기식으로 보이는 비동기 코드를 작성할 수 있어 가독성이 향상되고 Promise 연결의 복잡성이 줄어듭니다.

예:

async function fetchData() {
  return 'data';
}

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

processData();

결론

콜백은 JavaScript에서 비동기 작업을 처리하기 위한 기반을 마련했지만 Promise는 비동기 코드의 가독성, 유지 관리성 및 오류 처리 기능을 크게 향상시켰습니다. 이러한 도구를 효과적으로 사용하는 방법과 시기를 이해하는 것은 최신 JavaScript 개발에 매우 ​​중요합니다. Promise와 async/await 구문을 사용하면 개발자는 더 깔끔하고 관리하기 쉬운 코드를 작성하여 더 강력한 애플리케이션을 위한 기반을 마련할 수 있습니다.