JavaScript에서 비동기적으로 코딩하기

자바스크립트에서 비동기적으로 코딩하기

비동기 작업을 위한 다양한 자바스크립트 기능을 살펴보자.

동기와 비동기

비동기는 자료가 순서대로 실행되지 않고 무작위의 순서로 실행되는 특성이다.
따라서, 이로 인해 페이지가 멈추지 않고 사용자와의 상호작용 유지가 가능하다.

이를 위한 JavaScript 기능에 대해 알아보자.

---

Promise

• 자바스크립트 비동기 작업을 처리하기 위한 객체
• 비동기 작업의 성공 또는 실패를 표하는 정보를 가짐.

3가지의 PromiseState

• pending
  • 프로미스 객체가 생성된 즉시 → 대기 중, 아직 결과가 없음
• fullfilled
  • 작업이 성공, resolve가 호출된 상태
• rejected
  • 작업이 실패, reject가 호출된 상태

Consumer의 작성 코드

• then
  • 성공 시, 실행할 코드
• catch
  • 실패 시, 실행할 코드
• finally
  • 작업 성공/실패 여부 상관 없이, 실행할 코드

사용 코드

// Promise - Producer
const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("실행 성공!");
  } else {
    reject("실행 실패!");
  }
});

// Promise - Consumer
promise //
  .then((result) => console.log(result));
  .catch((error) => {
    console.log(error); 
  })
  .finally(() => {
    console.log("Promise 끝!");
  });

---

async / await

• Sugar Syntax(설탕 문법)의 예시 중 하나이다.
  • 기존 기능을 더 쉽게, 짧게 쓸 수 있게 해주는 문법
• async: 해당 함수는 항상 promise를 반환함.
• await: promise가 처리될 때까지 대기.

사용 코드

// async 자체가 Promise Producer
async function makePromise() {
  const success = true;

  if (success) {
    return "실행 성공!"; 
  } else {
    throw new Error("실행 실패!");
  }
}

// async/await - Consumer
async function run() {
  try {
    const result = await makePromise();
    console.log(result);
  } catch (error) {
    console.log(error.message);
  } finally {
    console.log("Promise 끝!");
  }
}

---

콜백함수

• 콜백함수로도 비동기 작업을 처리할 수 있다.
• 다만, 콜백지옥에 빠질 우려가 있으므로 주의하도록 한다.

---

✨ 출처

blog, 프론트엔드 면접 문제 은행

---