Promise와 async/await

하나의 자바스크립트 실행 에이전트에서는 코드가 한 번에 하나의 작업을 수행합니다. 호스트의 I/O와 별도 Worker 등은 이 실행 흐름과 구분합니다.

그런데 웹 애플리케이션에서는 네트워크 요청, 파일 I/O, 타이머처럼 오래 걸리거나 즉시 결과를 알 수 없는 비동기 작업이 자주 발생합니다.

이 비동기 흐름을 제대로 관리하지 못하면 UI가 멈추거나 애플리케이션 전체가 응답하지 않는 문제가 생길 수 있습니다.

과거에는 콜백 함수(Callback Function)로 비동기 작업을 처리했습니다.

하지만 콜백이 중첩되기 시작하면 이른바 콜백 지옥(Callback Hell)이 생기고, 가독성과 유지보수성이 빠르게 나빠졌습니다.

이 문제를 해결하기 위해 ES6(ECMAScript 2015)에서 Promise가 도입됐고, ES2017에서는 Promise를 더 직관적으로 다루도록 async/await 문법이 추가되었습니다.

타입스크립트는 자바스크립트의 비동기 기능을 타입 검사와 함께 사용할 수 있게 해주며, Promise 결과 타입과 오류 경로를 더 명확히 표현하도록 돕습니다.

처음 읽는다면 함수의 반환값과 콜백을 먼저 구별합니다. 일반 함수의 return은 현재 호출의 결과이고, Promise의 resolve는 나중에 소비할 결과를 정하는 함수입니다. await에서 멈추는 범위는 해당 async 함수의 이어지는 실행이며, 다른 코드까지 모두 멈추는 것은 아닙니다.

그림은 최종 정착과 이후 reaction의 실행을 구분합니다. resolve에 다른 Promise/thenable을 넘기면 그 상태를 따르므로 resolve 호출 즉시 fulfilled가 된다는 뜻은 아닙니다. Promise 생성자의 executor 자체는 동기적으로 실행됩니다.

Promise

Promise는 비동기 작업의 최종 완료(성공 또는 실패)와 그 결과값을 나타내는 객체입니다.

Promise는 다음 세 가지 상태 중 하나를 가집니다.

Promise는 한 번 상태가 결정되면(Fulfilled 또는 Rejected) 다시 변경될 수 없습니다.

// Promise 생성: 생성자는 executor 함수 하나를 받고, executor에 resolve와 reject를 전달합니다.
const myPromise = new Promise<string>((resolve, reject) => {
  // 비동기 작업 수행 (예: setTimeout으로 2초 후 성공)
  setTimeout(() => {
    const success = true; // 실제로는 서버 응답이나 다른 조건에 따라 결정

    if (success) {
      resolve("데이터를 성공적으로 가져왔습니다!"); // 작업 성공 시 호출
    } else {
      reject("데이터를 가져오는 데 실패했습니다."); // 작업 실패 시 호출
    }
  }, 2000);
});

// Promise 사용: .then()으로 성공 시 처리, .catch()로 실패 시 처리
myPromise
  .then((message: string) => {
    console.log("성공:", message); // '데이터를 성공적으로 가져왔습니다!'
  })
  .catch((error: string) => {
    console.error("실패:", error); // '데이터를 가져오는 데 실패했습니다.'
  });

console.log("Promise 작업 시작 (비동기적으로 실행됩니다)"); // 이 부분이 먼저 출력됩니다.

위 코드의 첫 주석은 생성자와 executor의 인자를 구별해서 읽어야 합니다. new Promise에 넘기는 인자는 (resolve, reject) => { ... }라는 executor 함수 하나이며, 생성자가 그 함수를 호출할 때 resolve와 reject 두 함수를 전달합니다. 그래서 타이머 등록은 즉시 실행되지만 성공 메시지는 등록한 타이머의 콜백이 실행된 뒤에 나옵니다.

Promise 체이닝 (Chaining): .then() 메서드는 Promise를 반환하기 때문에, 여러 비동기 작업을 순차적으로 연결하여 처리할 수 있습니다.

이를 Promise 체이닝이라고 합니다.

각 .then()은 이전 Promise의 결과값을 다음 .then()으로 전달합니다.

function fetchData(url: string): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`[1] ${url} 에서 데이터 가져오기 완료`);
      resolve(`Fetched data from ${url}`);
    }, 1000);
  });
}

function processData(data: string): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`[2] 데이터 처리 완료: ${data}`);
      resolve(`Processed: ${data.toUpperCase()}`);
    }, 1500);
  });
}

function saveData(processedData: string): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`[3] 데이터 저장 완료: ${processedData}`);
      resolve("모든 작업 완료!");
    }, 800);
  });
}

// Promise 체이닝
fetchData("api/users")
  .then((data) => processData(data)) // 첫 번째 Promise의 결과가 다음 Promise의 인자로 전달
  .then((processedData) => saveData(processedData)) // 두 번째 Promise의 결과가 다음 Promise의 인자로 전달
  .then((finalMessage) => {
    console.log(finalMessage); // '모든 작업 완료!'
  })
  .catch((error) => {
    console.error("체인 중 오류 발생:", error);
  });

console.log("비동기 체인 시작...");

Promise 체이닝은 콜백 지옥을 해결하고, 비동기 코드의 흐름을 동기 코드처럼 순차적으로 이해하기 쉽게 만듭니다.

이 체인은 fetchData의 문자열을 받아야 processData를 호출하고, 처리된 문자열을 받아야 saveData를 호출합니다. 각 핸들러가 Promise를 반환하므로 다음 단계는 그 Promise의 정착을 기다립니다. 함수 호출만 하고 반환하지 않으면 다음 단계에 전달되는 값은 undefined이고, 시작한 작업의 실패도 이 체인에 연결되지 않습니다. 세 타이머의 대기값 합은 1000 + 1500 + 800 = 3300ms이지만, 실제 완료 시각에는 호스트의 실행 지연도 더해집니다. 입력이 서로 의존하는 이 작업들을 단순히 Promise.all로 바꾸면 같은 처리 순서를 보장할 수 없습니다.

오류 처리: 연결된 체인의 거부와 핸들러가 던진 예외는 다음 거부 처리기로 전파됩니다. 반환하거나 await하지 않은 별도 작업, 타이머 콜백의 독립적인 throw까지 이 체인이 자동으로 포착하지는 않습니다.

이는 여러 비동기 단계 중 어느 곳에서든 오류가 발생했을 때 중앙에서 오류를 관리할 수 있게 해줍니다.

function mightFailFetch(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const shouldFail = Math.random() > 0.5;
      if (shouldFail) {
        reject("네트워크 오류 발생!");
      } else {
        resolve("데이터 성공적으로 가져옴.");
      }
    }, 500);
  });
}

mightFailFetch()
  .then((data) => {
    console.log("데이터:", data);
    return Promise.resolve("다음 처리"); // 성공적으로 다음 .then()으로 전달
  })
  .then((nextData) => {
    console.log("다음 처리:", nextData);
    // return Promise.reject("처리 중 의도적인 오류!"); // 여기서 오류를 발생시킬 수도 있습니다.
  })
  .catch((error) => {
    console.error("오류 발생:", error); // 체인 중 발생한 모든 오류를 여기서 처리
  })
  .finally(() => { // Promise가 성공하든 실패하든 항상 실행
    console.log("작업 종료 (finally 블록)");
  });

finally()의 핸들러는 연결한 Promise가 성공 또는 실패로 정착했을 때 실행됩니다. 계속 pending인 Promise의 정리를 보장하는 타이머는 아닙니다. 핸들러가 정상적으로 끝나면 이전 결과를 따르지만, 예외를 던지거나 거부된 Promise를 반환하면 뒤의 Promise는 그 이유로 거부됩니다.

async/await

async/await는 Promise를 기반으로 비동기 코드를 작성하는 훨씬 더 간결하고 읽기 쉬운 문법입니다.

async 함수는 항상 Promise를 반환합니다. await는 async 함수 안이나 이를 지원하는 모듈의 최상위에서 사용할 수 있습니다.

await는 Promise가 Fulfilled 또는 Rejected 상태가 될 때까지 함수의 실행을 일시 중지합니다.

// async 함수는 항상 Promise를 반환합니다.
async function fetchUserData(): Promise<string> {
  console.log("[1] 사용자 데이터 가져오기 시작...");
  // await은 Promise가 완료될 때까지 기다립니다.
  const response = await new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve("사용자 정보: Alice");
    }, 1500);
  });

  console.log("[2] 사용자 데이터 가져오기 완료:", response);
  return response;
}

async function processAndSaveUserData(): Promise<void> {
  try {
    const userData = await fetchUserData(); // fetchUserData가 완료될 때까지 기다림
    console.log("[3] 데이터 처리 중...");
    await new Promise<void>((resolve) => setTimeout(resolve, 1000)); // 처리 시간 시뮬레이션
    console.log(`[4] ${userData} 처리 완료.`);

    console.log("[5] 데이터 저장 중...");
    await new Promise<void>((resolve) => setTimeout(resolve, 800)); // 저장 시간 시뮬레이션
    console.log(`[6] ${userData} 저장 완료.`);
  } catch (error) {
    console.error("오류 발생:", error); // try-catch로 오류 처리
  } finally {
    console.log("[7] 모든 작업 완료 (async/await finally)");
  }
}

console.log("비동기 함수 호출 시작...");
processAndSaveUserData(); // async 함수를 호출하면 즉시 Promise가 반환됩니다.
console.log("비동기 함수 호출 완료 (실행은 계속됩니다)...");

async/await를 사용하면 Promise 체인보다 실행 순서와 예외 처리 위치를 한 블록 안에서 읽기 쉽습니다.

다만 병렬 실행이 필요한 작업까지 순차 await로 묶으면 전체 시간이 늘어날 수 있습니다.

오류 처리: async/await에서 오류는 try...catch 블록을 사용하여 동기 코드와 동일하게 처리할 수 있습니다.

await 표현식에서 Promise가 Rejected 상태가 되면, 해당 오류는 catch 블록으로 전달됩니다.

async function riskyOperation(): Promise<string> {
  const willFail = Math.random() > 0.5;
  if (willFail) {
    throw new Error("위험한 작업 실패!"); // async 함수에서 throw는 Promise.reject()와 동일
  }
  return "위험한 작업 성공!";
}

async function performRiskyTask(): Promise<void> {
  try {
    console.log("위험한 작업 시작...");
    const result = await riskyOperation(); // 실패하면 여기서 catch 블록으로 점프
    console.log("결과:", result);
  } catch (error: any) { // unknown으로 받으면 값의 종류를 확인한 뒤 속성을 읽어야 합니다.
    console.error("작업 중 오류:", error.message);
  } finally {
    console.log("위험한 작업 시도 종료.");
  }
}

performRiskyTask();
performRiskyTask(); // 여러 번 실행하여 성공/실패 확인

async 함수는 항상 Promise를 반환: async 함수가 명시적으로 Promise를 반환하지 않더라도, 항상 암묵적으로 Promise를 반환합니다.

async function greet(name: string): Promise<string> {
  return `Hello, ${name}!`; // Promise.resolve('Hello, Alice!') 와 동일
}

greet("Alice").then(message => console.log(message)); // Hello, Alice!

async function throwError(): Promise<never> { // 'never'는 이 함수가 값을 반환하지 않고 항상 예외를 던짐을 의미
  throw new Error("Something went wrong!"); // Promise.reject(new Error("...")) 와 동일
}

throwError().catch(error => console.error(error.message)); // Something went wrong!

Promise 체인과 async/await는 결국 같은 Promise 상태를 다루지만, 오류를 모으는 위치와 코드를 읽는 방식이 다릅니다.

실패 값은 임의의 값일 수 있으므로 unknown에서 좁혀 처리합니다. Promise<T>의 T는 성공 값 타입이며 거부 값의 타입을 제한하지 않습니다.

거부 타입과 회복한 결과를 구별합니다

Promise<string>이라고 적어도 reject에는 문자열·Error·다른 값이 올 수 있습니다. 위의 (error: string)은 이 예제가 직접 거부한 문자열을 설명하지만, Promise의 타입이 거부 값을 string으로 제한해 준 것은 아닙니다. 외부 작업을 처리한다면 unknown으로 받아 instanceof Error 등의 검사 뒤 .message를 읽습니다. 명시적인 catch (error: unknown) 표기는 TypeScript 4.0부터 가능하고, 4.4의 useUnknownInCatchVariables 옵션은 생략한 catch 변수에도 이 기본값을 적용합니다. 공식 catch 옵션 설명을 참고합니다.

catch에서 로그만 출력하고 정상 반환하면 뒤의 Promise는 보통 undefined로 이행합니다. 대체 값을 반환하면 그 값으로 회복하고, 다시 throw하면 거부가 이어집니다. 오류를 기록했다는 사실과 호출자에게 실패를 계속 전달했다는 사실은 다릅니다. finally에서 새 예외가 발생하면 앞 성공이나 회복 결과도 뒤 Promise의 실패로 바뀔 수 있습니다.

이 구분을 기억해 두면 체인 끝에 .catch()를 둘지, await가 있는 구간을 try/catch/finally로 감쌀지 판단하기 쉽습니다.

Promise와 async/await의 타입스크립트 적용

타입스크립트는 Promise와 async/await의 타입 추론을 매우 잘 지원합니다.

• Promise 타입: Promise<T> 형태로 Promise가 성공적으로 이행될 때 반환할 값의 타입을 명시합니다.

  interface User {
    id: number;
    name: string;
  }
  
  function getUserById(id: number): Promise<User> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ id, name: `User-${id}` });
      }, 500);
    });
  }
  
  // TypeScript는 then 블록 내의 user가 User 타입임을 자동으로 추론합니다.
  getUserById(1)
    .then(user => {
      console.log(user.name); // 자동 완성 지원
      // console.log(user.email); // Error: 'email' 속성이 'User' 형식에 없습니다.
    });

• async 함수 반환 타입: async 함수는 항상 Promise<T> 타입을 반환하므로, 명시적으로 반환 타입을 Promise<T>로 선언하는 것이 좋습니다. 그렇지 않으면 TypeScript가 함수의 실제 반환값(T)을 기반으로 Promise<T>를 추론합니다.

  async function fetchProduct(productId: number): Promise<{ id: number; name: string }> {
    const response = await fetch(`/api/products/${productId}`);
    const data = await response.json();
    return data; // 반환 타입 표시는 호출자의 타입 계약이며, data의 실제 구조를 검증하지는 않음
  }
  
  async function displayProduct(id: number): Promise<void> { // Promise<void> 반환
    try {
      const product = await fetchProduct(id); // product는 { id: number; name: string } 타입
      console.log(`Product: ${product.name}`);
    } catch (error) {
      console.error("Failed to fetch product:", error);
    }
  }
  
  displayProduct(123);

• await의 타입 추론: await 키워드 뒤에 오는 Promise의 제네릭 타입은 await 표현식의 결과 타입으로 정확하게 추론됩니다.

fetchProduct의 반환 타입 표시는 response.json() 데이터를 검증하지 않습니다. 원문은 응답 상태와 런타임 스키마 검사를 생략했으므로 외부 데이터까지 타입 안전하다는 의미로 읽지 않습니다.

비동기 작업의 동시 진행: Promise.all

여러 작업의 성공 값을 모을 때 Promise.all을 사용합니다. 아래 예제는 배열을 만들면서 두 함수를 먼저 호출하고, 반환된 Promise들을 조합합니다. 조합기 자체가 함수를 시작하거나 CPU 병렬 실행을 보장하지는 않습니다.

하나라도 실패하면 전체 Promise.all이 Rejected 상태가 됩니다.

async function fetchPost(id: number): Promise<any> {
  console.log(`Fetching post ${id}...`);
  return new Promise(resolve => setTimeout(() => resolve({ id, title: `Post ${id} Title` }), 1000));
}

async function fetchComments(postId: number): Promise<any> {
  console.log(`Fetching comments for post ${postId}...`);
  return new Promise(resolve => setTimeout(() => resolve([{ id: 1, text: "Comment 1" }, { id: 2, text: "Comment 2" }]), 1500));
}

async function loadPostAndComments(postId: number): Promise<void> {
  try {
    console.log("Loading post and comments concurrently...");
    // 두 Promise를 동시에 시작하고 모두 완료될 때까지 기다립니다.
    const [post, comments] = await Promise.all([
      fetchPost(postId),
      fetchComments(postId)
    ]);

    console.log("\n--- All data loaded ---");
    console.log("Post:", post);
    console.log("Comments:", comments);
  } catch (error) {
    console.error("Error loading data:", error);
  }
}

loadPostAndComments(1);

Promise.all 외에도 다음과 같은 유틸리티 메서드들이 있습니다.

• Promise.race: 여러 Promise 중 가장 먼저 완료되는 Promise의 결과(또는 오류)를 반환합니다.
• Promise.allSettled (ES2020): 모든 Promise가 성공하거나 실패하더라도 기다리며, 각각의 결과를 객체 배열로 반환합니다. (일부 성공, 일부 실패인 경우 유용)
• Promise.any (ES2021): 여러 Promise 중 가장 먼저 성공하는 Promise의 결과를 반환합니다. 모든 Promise가 실패해야만 Rejected 상태가 됩니다.

여러 Promise 도구는 이름이 비슷해도 실패 처리와 반환값의 의미가 다릅니다.

아래 보드처럼 "전부 필요", "가장 빠른 값", "모든 결과 기록", "가장 빠른 성공" 중 무엇을 원하는지 먼저 정하면 API 선택이 단순해집니다.

비동기 코드를 타입 관점에서 읽을 때는 Promise<T>가 어디에서 만들어지고, await 이후 어떤 타입으로 풀리며, 실패 경로의 오류 값이 어떻게 좁혀지는지 함께 추적해야 합니다.

서로 다른 결과 요구로 선택하기

세 작업 A·B·C를 모두 먼저 시작한 뒤 같은 목록 [A, B, C]에 네 조합기를 연결한다고 가정합니다. 외부 입력은 없으며 B가 10ms에 "B 실패"로 거부되고, C가 20ms에 "C 값"으로 성공하며, A가 30ms에 "A 값"으로 성공합니다. 이 시각은 문제의 관측 조건이고 실제 타이머의 정확한 실행 시각을 약속하는 수치는 아닙니다.

먼저 답을 가리고 all, allSettled, race, any의 결과와 정착 순서를 각각 적어 보세요. 또한 실패를 만나도 C와 A가 계속 실행되는 이유를 설명하고, 아래 체인의 마지막 출력도 예측하세요.

Promise.resolve(3)
  .then(value => value * 2)
  .then(value => { console.log("중간:", value); })
  .then(value => console.log("마지막:", value));

생성자 인자와 후속 핸들러의 반환 규칙은 ECMAScript의 Promise 생성자와 then 규칙에서도 확인할 수 있습니다.

연습: 동기 시작·재개·오류 회복 추적

아래 코드는 각각 독립적으로 실행한다고 가정합니다. 로그를 찍는 다른 코드·타이머·외부 요청은 없습니다. 이미 이행한 Promise에서도 await 뒤 코드는 현재 동기 실행을 끝낸 다음 재개됩니다.

console.log("A");
const ready = new Promise<number>((resolve) => {
  console.log("B");
  resolve(3);
});
async function runTrace(): Promise<void> {
  console.log("C");
  const value = await ready;
  console.log("E", value);
}
const traceDone = runTrace();
console.log("D");

async function safeMessage(work: Promise<string>): Promise<string> {
  try {
    return await work;
  } catch (reason: unknown) {
    const message = reason instanceof Error ? reason.message : String(reason);
    return `대체:${message}`;
  }
}

1. 첫 코드의 출력 순서를 쓰세요. executor와 async 함수의 await 이전 부분은 각각 언제 실행되며, D보다 E가 먼저 출력되지 않는 이유는 무엇인가요?
2. 두 번째 함수에 Promise.reject("접속 실패")와 Promise.reject(new Error("접속 실패"))를 각각 넘기고 결과를 await합니다. 반환 Promise는 이행인가요, 거부인가요? 두 결과값과 좁히기의 역할을 설명하세요.
3. Promise.reject("원래 실패").catch(() => "회복").finally(() => { throw new Error("정리 실패"); })의 마지막 Promise는 어떤 상태와 이유를 갖나요? finally가 정상 반환한다면 결과가 어떻게 달라지는지도 적으세요.