[JavaScript] 더 나은 비동기 통신

프리온보딩 팀원들과 함께 면접 스터디를 시작했다! 이번 주 주제 중 하나인 Promise, callback hell, async/await, fetch 등에 대해 자세히 알아보는 시간을 가졌다. API를 통해 데이터를 가져올 때 async/await나 fetch를 사용하면서도 내부적으로 어떻게 동작하는지는 잘 모르고 있었는데 이번 기회에 내부 동작이 어떻게 이루어지는지 공부해 볼 수 있었다.

 

그럼 바로 시작~

 

 

✔️ 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 한다. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수(Higher-Order Function, HOF)라고 한다.

 

특정 작업을 n 번 반복시키는 함수가 있다고 하자.

function repeat(n) {
  for (let i = 0; i < n; i++) {
    console.log(i);
  }
}

repeat(5); // 0 1 2 3 4

 

console.log(i) 대신 다른 작업을 n번 반복시키고 싶을 수도 있을 것이다. 그럴 때 함수로 n과 같이 콜백 함수를 넘겨 준다면 우리가 원하는 대로 특정 작업을 반복시킬 수 있다.

function repeat(n, callback) {
  for (let i = 0; i < n; i++) {
    callback(i);
  }
}

const logAll = (i) => {
  console.log(i);
};

repeat(5, logAll); // 0 1 2 3 4

const logOdds = (i) => {
  if (i % 2) console.log(i);
};

repeat(5, logOdds); // 1 3

 

✔️ callback hell

비동기 처리를 위해 콜백 함수를 연속해서 사용할 때 중첩되면서 생기는 문제를 보통 콜백 지옥(callback hell)이라고 부른다.

$.get("<https://api.test.com/proudcts>", function (response) {
  var firstProductId = response.products[0].id;
  $.get(
    "<https://api.test.com/proudct/comments?id=>" + firstProductId,
    function (response) {
      var firstCommentId = response.comments[0].id;
      $.get(
        "<https://api.test.com/proudct/comment/likes?id=>" + firstCommentId,
        function (response) {
          var likes = response.likes;
          var likesCount = likes.length;
        }
      );
    }
  );
});

이렇게 콜백이 중첩되어 있는 코드는 가독성도 좋지 않을뿐더러 유지 보수 하기도 어렵다는 단점이 있다.

 

❕ 콜백 지옥 개선

콜백 지옥은 Promise 사용, Async/Await 사용, 코딩 패턴 개선으로 해결할 수 있다.

 

코딩 패턴으로 개선하는 방법은 다음과 같이 중첩되어 있는 콜백을 따로 분리하여 작성하는 방법이다.

function fetchCommentLikes(commentId) {
  $.get(
    "<https://api.test.com/proudct/comment/likes?id=>" + commentId,
    function (response) {
      var likes = response.likes;
      var likesCount = likes.length;
    }
  );
}

function fetchComments(productId) {
  $.get(
    "<https://api.test.com/proudct/comments?id=>" + productId,
    function (response) {
      var firstCommentId = response.comments[0].id;

      fetchCommentLikes(firstCommentId);
    }
  );
}

$.get("<https://api.test.com/proudcts>", function (response) {
  var firstProductId = response.products[0].id;

  fetchComments(firstProductId);
});

그러나 이마저도 흐름을 쫓아가며 읽어야 하기 때문에 눈에 썩 잘 들어오지는 않는다.

 

 

✔️ Promise란?

프로미스는 중첩되는 비동기 통신 로직과 콜백 지옥의 문제를 해결하기 위한 기법이다.

💡 인터넷 익스플로러는 프로미스를 지원하지 않기 때문에 인터넷 익스플로러 호환성이 필요하다면 프로미스 대신 AJAX를 사용해야 한다.

 

✔️ 프로미스 객체의 상태

프로미스 인스턴스는 진행 중인 비동기 작업, 그에 따른 결과 처리 방법, 상태 정보를 가지고 있다.

프로미스 인스턴스는 Pending, Fulfilled, Rejected 3개의 상태 정보를 가진다. 그리고 상태에 따른 2개의 메소드 resolve와 reject를 가진다.

대기 중(Pending)	프로미스 객체의 기본 상태, 비동기 처리 결과가 나오지 않은 상태
이행 완료(Fulfilled)	비동기 처리가 완료되어 결과를 얻은 상태. resolve() 함수를 호출함
거부됨(Rejected)	비동기 처리는 완료되었지만 실패한 상태. reject() 함수를 호출함

 

✔️ 프로미스 기본 사용법

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    let result = "promise fulfilled";
    resolve(result);
  }, 1000);
});

myPromise
  .then((successMessage) => {
    console.log(successMessage);
  })
  .catch((failMessage) => {
    console.log(failMessage);
  });

새로운 프로미스 객체를 작성할 때는 파라메터 2개를 가지는 비동기 처리 함수를 작성한다.

첫 번째 파라미터는 성공했을 때 호출하는 이행 완료 함수명이고, 두 번째 파라미터는 실패했을 때 호출하는 거부 함수명이다.

관습적으로 이행 완료 함수명은 resolve, 거부 함수명은 reject로 작성하지만 success, fail 등으로 작성해도 괜찮다.

파라메터에서 정한 함수명을 호출하면 then()과 catch() 중 하나를 호출한다. resolve()가 호출되면 then() 메서드의 파라메터에 정의한 콜백 함수가 실행되고, reject()가 호출되면 catch() 메서드의 파라메터에 정의한 콜백 함수가 실행된다.

 

✔️ 다중 프로미스 처리

function asyncWork(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      value -= 20;
      if (value > 50) {
        resolve(value);
      } else {
        reject(value);
      }
    });
  });
}

asyncWork(100)
  .then((value) => {
    console.log(value);
    return asyncWork(value);
  })
  .then((value) => {
    console.log(value);
    return asyncWork(value);
  })
  .then((value) => {
    console.log(value);
    return asyncWork(value);
  })
  .catch((error) => {
    console.log("catch: " + error);
  });

asyncWork 함수는 프로미스 인스턴스를 반환한다. 따라서 함수를 호출하며 메서드 체인으로 then()을 실행할 수 있다. 예제에서도 then()을 연달아 체인 방식으로 여러 개 호출한다.

 

다중 프로미스는 체인으로 호출하는 then() 메서드의 콜백 함수의 리턴 값으로 프로미스 인스턴스를 생성하는 함수를 다시 호출한다는 것이다. 반환된 프로미스 인스턴스는 다음 then()의 프로미스 인스턴스가 된다. then() 메서드는 콜백 함수에서 반환하는 asyncWork() 프로미스 인스턴스의 비동기 처리가 완료되기 전까지 다음 then()을 호출하지 않고 대기한다.

∴ 따라서 모든 비동기 처리 작업은 then의 콜백 함수 순서대로 하나씩 실행되고, 콜백 함수의 파라메터를 통해 결과 값을 순차적으로 전달한다.

 

마지막으로 프로미스 인스턴스 상태가 거절 상태가 되면 다음 then()이 아닌 catch()를 실행하며 에러 메시지를 출력하고 종료한다. 상단의 코드는 value를 20씩 차감하며 다음 then()을 호출하고, 값이 50보다 작으면 거절 상태로 변경한 후 catch()를 호출하면서 비동기 처리 체인을 종료한다.

 

프로미스를 사용한다면 순서대로 then() 메서드를 붙여 나열하기 때문에 콜백 지옥에서처럼 비동기 처리를 위해 코드를 중첩할 필요가 없다. 비동기 처리 작업을 중복 작성할 필요가 없기 때문에 처리 구조의 효율이 좋아지고 코드 량도 줄일 수 있다. 또한 비동기 처리 흐름이 한눈에 들어오고 실행 구조와 순서를 명확하게 파악할 수 있다.

 

📌 callback과 promise의 차이

callback 함수는 비동기 처리만을 위한 것은 아니다. 비동기 처리를 할 때는 콜백 패턴이 쓰인다. 콜백 패턴을 사용했을 경우에는 자유도가 높다는 장점이 있지만, 중첩될 경우 코드가 복잡해져 가독성이 떨어질 수 있으며, 에러 처리가 까다롭다.

 

프로미스는 콜백 지옥의 문제를 해결할 수 있는 비동기 처리만을 위한 기법이기 때문에 콜백 패턴보다 사용법이 더 편리하고 간편하다고 할 수 있다. 프로미스 내에 이행 완료 상태일 때 실행하는 함수, 거부되었을 때 실행하는 함수를 사용한다면 에러 처리도 콜백 패턴을 사용했을 때보다 간편하다.

 

 

 

✔️ 간편한 Promise 구현을 위한 Fetch

fetch는 프로미스를 재포장해 구문을 조금 더 간결하게 사용할 수 있도록 만든 래퍼이다. 기술적으로 프로미스와 동일하다.
프로미스 인스턴스를 만들 필요 없이 fetch 메소드에 비동기 요청을 할 URL만 넘기면 리턴 값으로 프로미스 인스턴스를 반환하기 때문에 then~catch로 순차 처리 하는 것도 가능하다.

fetch("https://www.request.com/api/data.json")
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

 

fetch는 비동기 요청이 실패했을 경우만 catch() 내 구문을 실행한다. 404 에러(페이지 없음)나 500 에러(HTTP 상태)는 실행이 완료된 것으로 간주하기 때문에 이러한 에러를 확인하기 위해서는 then() 안에서 상태를 확인해 별도로 그에 맞는 처리를 해야 한다.

if (response.status >= 200 && response.state <= 299) {
  // 정상적으로 완료
} else {
  // 에러 발생
}

 

 

✔️ Async/Await란?

Async/Await는 프로미스의 사용 방법을 개선하기 위해 ES8에서 새롭게 소개된 비동기 처리 문법이다.

⚠️ 따라서 구 버전 웹 브라우저에서는 지원되지 않으므로 사용 전 호환성 확인이 필요하다.

Async 함수 내부에서 프로미스를 사용해 비동기 요청 결과를 반환한다.

 

Promise의 다중 프로미스 처리를 Async/Await를 사용해 바꿔 보자.

function asyncWork(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      value -= 20;
      if (value > 50) {
        resolve(value);
      } else {
        reject(value);
      }
    });
  });
}

let asyncFunc = async () => {
  try {
    let res = await asyncWork(100);
    console.log("resolve1: " + res);
    res = await asyncWork(res);
    console.log("resolve2: " + res);
    res = await asyncWork(res);
    console.log("resolve3: " + res);
  } catch (error) {
    console.log("catch: " + error);
  }
};

asyncFunc();

resolve1: 80
resolve2: 60
catch: 40

Async와 Await는 항상 쌍으로 사용해야 한다. 함수 내부에 await를 사용한다면 함수를 선언할 때 async 함수로 선언해야 한다.

async 함수를 실행하면 async 함수 안에 선언된 프로미스가 실행되는데, await 키워드가 있는 프로미스는 이행 완료 상태가 될 때까지 다음 행의 코드를 실행하지 않고 대기한다. 이행 완료가 되면 콘솔에 응답 내용을 출력하고 다음 코드를 실행한다.

프로미스 비동기 코드에서 거부(reject)가 발생하면 try ~ catch 처리에 따라 catch() 예외 처리를 실행하고 비동기 처리를 종료한다.

✔️ Async/Await의 장점

• 일반 자바스크립트 코드가 동기적으로 실행되는 것과 같은 형태로 비동기 처리를 순차적으로 실행
• 자바스크립트의 동기적 함수/코드와 이질감이 있는 프로미스의 체인 방식 비동기 처리와 콜백 함수를 일일이 작성해야 하는 불편함이 사라짐
• Fetch보다 가독성이 좋음

 

✔️ Promise.all()

Promise.all 메소드는 Array와 같이 순회 가능한 객체의 모든 프로미스가 이행 완료한 후 이행한 프로미스를 반환한다. 만일 프로미스 중 하나가 거부된다면, 첫 번째로 거부된 프로미스를 즉시 반환한다.

 

Promise.all()은 여러 개의 비동기 작업을 병렬로 처리하고 싶을 때 사용한다. 순차적으로 진행해야 하는 비동기 작업이 아니라면 Promise.all()을 사용하여 한꺼번에 처리하고, 시간을 단축할 수 있다.

 

 

async function display(text, time) {
  return new Promise((resolve, reject) => {
    setTimeout(
      () =>
        typeof text === "string"
          ? resolve("string입니다")
          : reject("string이 아닙니다"),
      time
    );
  });
}

/* await를 사용했을 때 */

console.time("소요 시간");
await display("태림", 3000);
await display("ttaerrim", 2000);
await display("LTR", 1000);
console.timeEnd("소요 시간");

// 소요 시간: 6011.14306640625 ms

/* Promise.all 사용했을 때 */
console.time("소요 시간");
await Promise.all([
  display("태림", 3000),
  display("ttaerrim", 2000),
  display("LTR", 1000),
]);
console.timeEnd("소요 시간");

// 소요 시간: 3001.381103515625 ms

 

에러를 처리하는 경우에도 Promise.all()의 경우가 걸리는 시간이 더 짧다.

/* await를 사용했을 때 */

console.time("소요 시간");
try {
  await display(1, 3000);
  await display(2, 2000);
  await display(3, 1000);
} catch (error) {
  console.log(error);
}
console.timeEnd("소요 시간");

// 소요 시간: 3002.85791015625 ms

/* Promise.all 사용했을 때 */
console.time("소요 시간");
try {
  await Promise.all([display(1, 3000), display(2, 2000), display(3, 1000)]);
} catch (error) {
  console.log(error);
}
console.timeEnd("소요 시간");

// 소요 시간: 1002.778076171875 ms

같은 비동기 처리를 하는 경우이지만, await로 각각 실행시켰을 경우 첫 번째 함수가 실행되는 데 걸리는 시간인 3초를 모두 다 채우고 반환된다. Promise.all()을 사용했을 경우에는 가장 빨리 에러를 반환하는 함수를 기준으로 동작해 가장 짧은 시간인 1초만에 에러를 반환한다.

 

 

 

 

🚩 참고

ES6로 기초부터 다시 배우는 자바스크립트 파워북

Promise.all()

언제 Promise.all을 사용해야 될까?