2018.12.18

비동기 자바스크립트에서 async/await를 사용하는 방법

Jonathan Freeman | InfoWorld
프로미스를 중심으로 코드를 정리하기 위해 ES2017에 도입된 몇 가지 새로운 구문을 살펴보자. 새로운 구문(주로 asyncawait)은 가독성과 관리 편의성이 높은 비동기(asynchronous) 코드를 작성하는 데 도움이 되는 경우가 많지만 단점도 있다. 일단 asyncawait를 사용하는 방법을 살펴본 다음 이에 따른 영향을 알아보자.

먼저 프로미스를 사용하는 간단한 예제를 async/await를 사용해 리팩터링(refactor)한다. 이 예제는 프로미스 기반 HTTP 라이브러리인 axios를 사용한다.

let getUserProfile = (userId) => {
  return axios.get(`/user/${userId}`)
    .then((response) => {
      return response.data;
    })
    .catch((error) => {
      // Do something smarter with `error` here
      throw new Error(`Could not fetch user profile.`);
    });
};
getUserProfile(1)
  .then((profile) => {
    console.log('We got a profile', profile);
  })
  .catch((error) => {
    console.error('We got an error', error)
  });

  
앞의 코드는 사용자 ID를 받아 프로미스를 반환하는 함수를 정의한다(반환 형식은 axios.get().then().catch()). HTTP 엔드포인트를 호출해 프로필 정보를 가져와 프로필을 해결하거나(resolve) 거부하고(reject) 오류를 내보낸다. 코드 자체는 문제 없이 작동하지만 getUserProfile 내에 구문이 많아 비즈니스 로직이 지저분하게 된다.

  .then((response) => {
     /* important stuff */
  })
  .catch((error) => {
     /* more important stuff */
  });


자바스크립트 async/await, 단계별로 알아보기

이럴 때 async/await를 사용한다. 이 두 함수를 사용하면 복잡한 then, catch 구문없이 프로미스를 다루고 비동기 코드의 가독성도 높일 수 있다. 프로미스로 계산되는 식 앞에 await를 추가하면 프로미스가 해결될 때까지 대기하다가 해결된 후 함수의 나머지 부분이 계속 실행된다. await 함수는 async 함수 내에서만 사용할 수 있다. async 함수란 async 연산자가 앞에 붙은 함수다. 프로미스가 값과 함께 실현되면 이 값을 다음과 같이 할당할 수 있다.

let someFunction = async () => {
  let fulfilledValue = await myPromise();
};


프로미스가 오류와 함께 거부되면 await 연산자가 오류를 내보낸다. async/await를 사용해 단계별로 getUserProfile 함수를 다시 작성해보자.

1. 함수에 async 키워드를 추가해 비동기 함수로 만든다. 이렇게 하면 함수 본문에서 await 연산자를 사용할 수 있게 된다.

let getUserProfile = async (userId) => {
  /* business logic will go here */
};


2. 프로미스에 await 키워드를 사용하고 해결된 값을 할당한다.

let getUserProfile = async (userId) => {
  let response = await axios.get(`/user/${userId}`);
  /* more to do down here */
}


3. 해결된 response 값의 data 속성을 반환해야 하는데, then 블록 내에 중첩할 필요없이 간단히 값을 반환할 수 있다.

let getUserProfile = async (userId) => {
  let response = await axios.get(`/user/${userId}`);
  return response.data;
  /* more to do down here */
}


4. 오류 처리를 추가한다. HTTP가 실패하고 프로미스가 거부되면 await 연산자가 거부된 메시지를 오류로 내보낸다. 이 오류를 잡아서 직접 작성한 오류를 다시 내보내야 한다.

let getUserProfile = async (userId) => {
  try {
    let response = await axios.get(`/user/${userId}`);
    return response.data;
  } catch (error) {
    // Do something smarter with `error` here
    throw new Error(`Could not fetch user profile.`);
  }
};


자바스크립트 async/await 주의 사항

구문이 많이 줄어들지는 않았지만 더 중요한 점은 동기 코드처럼 한 줄씩 코드를 읽을 수 있다는 것이다. 단, 몇 가지 주의 사항이 있다.

async를 추가하면 함수의 반환 값이 소리없이 바뀐다. 필자는 async/await로 바꾼 뒤 이전의 동기 함수에 비동기 호출을 추가해야 할 때 많은 혼란을 겪었다. asyncawait를 추가하기만 하면 다른 부분은 모두 생각대로 계속 작동할 것이라고 생각하기 쉽지만, async 함수는 프로미스를 반환하므로 함수를 비동기로 변경하는 경우 기존 함수 호출도 프로미스를 적절히 처리하도록 조정해야 한다. 다만 전통적인 프로미스 구문을 사용할 때도 기존 함수 호출 확인은 필요한 작업이다. async 함수에서는 그 점이 명확하게 드러나지 않을 뿐이다. 

async/await를 사용한다면 어디선가는 프로미스를 처리해야 한다는 의미다. 비동기 함수를 추가하는 순간부터 프로미스의 땅에 발을 들여놓게 된다. 비동기 함수를 호출하는 모든 함수는 결과를 프로미스로 취급하거나 직접 async/await를 사용해야 한다. 

비동기 함수가 깊게 중첩되는 경우 이 함수까지 이어지는 함수의 스택 역시 비동기 함수일 수 있다. 이것도 마찬가지로 async/await에 국한된 문제가 아니고 프로미스에서도 문제가 될 수 있다. 어쨌든 어느 시점에서는 프로미스가 필요하다. 호출 스택 위로 async/await를 계속 끌어올릴 경우 결국 await를 사용할 수 없는 전역 컨텍스트에 이르게 된다. 어디선가는 전통적인 프로미스 방식으로 비동기 함수를 처리해야 한다.

async/await를 사용하면 try/catch도 사용해야 한다. async를 사용해서 거부될 가능성이 있는 프로미스를 처리하는 경우 try/catch를 사용해야 한다. try/catch는 일반적으로 자주 사용되는 언어 기능은 아니다. 사실 필자는 특정 기능을 탐지하기 위해서는 시도(try)해 적절히 오류를 잡는(catch) 것이 유일한 방법인 라이브러리 내에서 사용되는 경우를 제외하고는 거의 본 적이 없다. 

물론 지나친 일반화일 수 있지만, 요지는 try/catch를 사용하지 않고도 견고하고 어법에 맞는 자바스크립트를 얼마든지 쓸 수 있다는 것이다. async/await를 데려오고 싶다면 try/catch도 함께 데려와야 한다.

async/await는 몇 가지 단점도 있지만 프로미스에 의존하는 코드의 가독성을 대폭 높여준다. 다음에는 수준을 더 높여서 가장 많은 혼란을 일으키는 프로미스의 세부적인 부분을 살펴볼 것이다. editor@itworld.co.kr 


2018.12.18

비동기 자바스크립트에서 async/await를 사용하는 방법

Jonathan Freeman | InfoWorld
프로미스를 중심으로 코드를 정리하기 위해 ES2017에 도입된 몇 가지 새로운 구문을 살펴보자. 새로운 구문(주로 asyncawait)은 가독성과 관리 편의성이 높은 비동기(asynchronous) 코드를 작성하는 데 도움이 되는 경우가 많지만 단점도 있다. 일단 asyncawait를 사용하는 방법을 살펴본 다음 이에 따른 영향을 알아보자.

먼저 프로미스를 사용하는 간단한 예제를 async/await를 사용해 리팩터링(refactor)한다. 이 예제는 프로미스 기반 HTTP 라이브러리인 axios를 사용한다.

let getUserProfile = (userId) => {
  return axios.get(`/user/${userId}`)
    .then((response) => {
      return response.data;
    })
    .catch((error) => {
      // Do something smarter with `error` here
      throw new Error(`Could not fetch user profile.`);
    });
};
getUserProfile(1)
  .then((profile) => {
    console.log('We got a profile', profile);
  })
  .catch((error) => {
    console.error('We got an error', error)
  });

  
앞의 코드는 사용자 ID를 받아 프로미스를 반환하는 함수를 정의한다(반환 형식은 axios.get().then().catch()). HTTP 엔드포인트를 호출해 프로필 정보를 가져와 프로필을 해결하거나(resolve) 거부하고(reject) 오류를 내보낸다. 코드 자체는 문제 없이 작동하지만 getUserProfile 내에 구문이 많아 비즈니스 로직이 지저분하게 된다.

  .then((response) => {
     /* important stuff */
  })
  .catch((error) => {
     /* more important stuff */
  });


자바스크립트 async/await, 단계별로 알아보기

이럴 때 async/await를 사용한다. 이 두 함수를 사용하면 복잡한 then, catch 구문없이 프로미스를 다루고 비동기 코드의 가독성도 높일 수 있다. 프로미스로 계산되는 식 앞에 await를 추가하면 프로미스가 해결될 때까지 대기하다가 해결된 후 함수의 나머지 부분이 계속 실행된다. await 함수는 async 함수 내에서만 사용할 수 있다. async 함수란 async 연산자가 앞에 붙은 함수다. 프로미스가 값과 함께 실현되면 이 값을 다음과 같이 할당할 수 있다.

let someFunction = async () => {
  let fulfilledValue = await myPromise();
};


프로미스가 오류와 함께 거부되면 await 연산자가 오류를 내보낸다. async/await를 사용해 단계별로 getUserProfile 함수를 다시 작성해보자.

1. 함수에 async 키워드를 추가해 비동기 함수로 만든다. 이렇게 하면 함수 본문에서 await 연산자를 사용할 수 있게 된다.

let getUserProfile = async (userId) => {
  /* business logic will go here */
};


2. 프로미스에 await 키워드를 사용하고 해결된 값을 할당한다.

let getUserProfile = async (userId) => {
  let response = await axios.get(`/user/${userId}`);
  /* more to do down here */
}


3. 해결된 response 값의 data 속성을 반환해야 하는데, then 블록 내에 중첩할 필요없이 간단히 값을 반환할 수 있다.

let getUserProfile = async (userId) => {
  let response = await axios.get(`/user/${userId}`);
  return response.data;
  /* more to do down here */
}


4. 오류 처리를 추가한다. HTTP가 실패하고 프로미스가 거부되면 await 연산자가 거부된 메시지를 오류로 내보낸다. 이 오류를 잡아서 직접 작성한 오류를 다시 내보내야 한다.

let getUserProfile = async (userId) => {
  try {
    let response = await axios.get(`/user/${userId}`);
    return response.data;
  } catch (error) {
    // Do something smarter with `error` here
    throw new Error(`Could not fetch user profile.`);
  }
};


자바스크립트 async/await 주의 사항

구문이 많이 줄어들지는 않았지만 더 중요한 점은 동기 코드처럼 한 줄씩 코드를 읽을 수 있다는 것이다. 단, 몇 가지 주의 사항이 있다.

async를 추가하면 함수의 반환 값이 소리없이 바뀐다. 필자는 async/await로 바꾼 뒤 이전의 동기 함수에 비동기 호출을 추가해야 할 때 많은 혼란을 겪었다. asyncawait를 추가하기만 하면 다른 부분은 모두 생각대로 계속 작동할 것이라고 생각하기 쉽지만, async 함수는 프로미스를 반환하므로 함수를 비동기로 변경하는 경우 기존 함수 호출도 프로미스를 적절히 처리하도록 조정해야 한다. 다만 전통적인 프로미스 구문을 사용할 때도 기존 함수 호출 확인은 필요한 작업이다. async 함수에서는 그 점이 명확하게 드러나지 않을 뿐이다. 

async/await를 사용한다면 어디선가는 프로미스를 처리해야 한다는 의미다. 비동기 함수를 추가하는 순간부터 프로미스의 땅에 발을 들여놓게 된다. 비동기 함수를 호출하는 모든 함수는 결과를 프로미스로 취급하거나 직접 async/await를 사용해야 한다. 

비동기 함수가 깊게 중첩되는 경우 이 함수까지 이어지는 함수의 스택 역시 비동기 함수일 수 있다. 이것도 마찬가지로 async/await에 국한된 문제가 아니고 프로미스에서도 문제가 될 수 있다. 어쨌든 어느 시점에서는 프로미스가 필요하다. 호출 스택 위로 async/await를 계속 끌어올릴 경우 결국 await를 사용할 수 없는 전역 컨텍스트에 이르게 된다. 어디선가는 전통적인 프로미스 방식으로 비동기 함수를 처리해야 한다.

async/await를 사용하면 try/catch도 사용해야 한다. async를 사용해서 거부될 가능성이 있는 프로미스를 처리하는 경우 try/catch를 사용해야 한다. try/catch는 일반적으로 자주 사용되는 언어 기능은 아니다. 사실 필자는 특정 기능을 탐지하기 위해서는 시도(try)해 적절히 오류를 잡는(catch) 것이 유일한 방법인 라이브러리 내에서 사용되는 경우를 제외하고는 거의 본 적이 없다. 

물론 지나친 일반화일 수 있지만, 요지는 try/catch를 사용하지 않고도 견고하고 어법에 맞는 자바스크립트를 얼마든지 쓸 수 있다는 것이다. async/await를 데려오고 싶다면 try/catch도 함께 데려와야 한다.

async/await는 몇 가지 단점도 있지만 프로미스에 의존하는 코드의 가독성을 대폭 높여준다. 다음에는 수준을 더 높여서 가장 많은 혼란을 일으키는 프로미스의 세부적인 부분을 살펴볼 것이다. editor@itworld.co.kr 


X