본문으로 건너뛰기
Advertisement

JavaScript: 비동기 처리 (Async/Await)

1. 비동기 프로그래밍이란?​

JavaScript는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 네트워크 요청이나 타이머와 같이 오래 걸리는 작업을 기다리는 동안 메인 스레드가 멈추지 않도록 비동기(Asynchronous) 처리가 필수적입니다.

2. Promise​

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("데이터를 성공적으로 불러왔습니다!");
    } else {
      reject("데이터 로드 실패.");
    }
  }, 2000);
});

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

3. Async / Await​

ES2017(ES8)에서 도입된 async/await 구문은 비동기 코드를 마치 동기 코드처럼 읽기 쉽게 작성할 수 있게 해줍니다.

기본 사용법​

async function getUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error("사용자 정보를 가져오는 중 오류 발생:", error);
  }
}

4. 실무 팁: Promise.all​

여러 비동기 작업을 병렬로 처리할 때 유용합니다.

async function fetchMultiple() {
  const [res1, res2] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2')
  ]);
  // 두 요청이 모두 완료될 때까지 기다림
}
Advertisement
Advertisement