이 글의 원본은 https://jaeheon.kr/161 입니다.
자바스크립트에서 async
, await
을 사용하면 좀 더 깔끔한 코드를 작성할 수 있습니다. 하지만, 적절하게 사용하지 않으면 적지 않은 시간을 사용해야할 수도 있습니다. 특히, 여러개의 await
을 사용할 경우에 주의해야합니다.
위와 같은 코드가 있을 때, end
를 보려면 얼마나 기다려야할까요?
2700ms
를 기다려야합니다. 생각보다 긴 시간입니다.
Promise.all
를 사용해서 시간을 단축해보았습니다. 이제는, 1900ms
만 기다리면됩니다. 800ms
나 줄였습니다.
하지만 아직 개선의 여지가 있어보입니다.
자, 이제 1200ms
면 모든 작업을 끝내고, end
를 볼 수 있습니다. API의 응답시간 개선 없이 1700ms
를 단축했습니다.
async
, await
을 사용하는 목적은 코드를 동기식으로 작성하기 위함입니다.
1개만 있을 때에는 크게 문제가 되지 않지만, 두 개 이상의 await
을 사용할 시에는 의존관계를 면밀히 살펴봐야 할 필요가 있습니다.
예를 들어, read
와 readSomething
은 '독립적인 관계'를 가진 함수입니다. read
를 먼저 호출하나, readSomething
을 먼저 호출하나 서로에게 영향을 주지 않습니다.
반대로, readThat
과 checkValidKey
는 '의존적인 관계'을 가진 함수입니다. 반드시, readThat
이 선행되어야, checkValidKey
를 호출할 수 있습니다.
또, read
와 readSomething
은 readThat
, checkValidKey
2개의 함수와 '독립적인 관계'를 가진 함수입니다. 세가지 작업을 동시에 비동기적으로 진행하여도 무방합니다.
'의존적인 관계'에서는 await
을 사용하여 동기식으로 작성하여도 무방합니다. 동기적으로 동작하여야하는 코드이니깐요.
그러나, '독립적인 관계'에서는 위의 예시처럼 Promise.all
을 사용하거나, 아래와 같이 사용할 수도 있습니다.
위의 예시에서, run1
, run2
, run3
은 동시에 시작합니다.
run2
와 run3
은 run1
보다 빨리 끝났지만, run1
이 아직 끝나지 않아, run1
이 끝날 때 까지 기다리게 됩니다.
'후속 작업'이 존재하면, 그것을 우선적으로 await
하여, 가능한 빨리 후속 작업을 호출할 수 있도록 하면 됩니다.
일반적인 경우에, await
을 사용하는 것이 더 깔끔한 코드를 작성할 수 있도록 해줍니다. 또한 대부분의 경우에 API 호출에 오래 걸리지 않습니다. 그렇기 때문에, 적극적으로 await
을 사용하는 것을 추천드립니다.
하지만, API가 느리거나, 최적화를 원하는 경우(라고 쓰지만, 100ms
라도 로딩시간을 줄일 수 있으면 줄이는 것은 매우 좋습니다)에는, 대부분의 경우에 Promise.all
같은 기법을 사용해야합니다.
await
은 동기식으로 코드를 만들어줌으로, 주의가 필요하다.
Promise.all
이나, 적절한 await
배치로, 많은 시간을 절약할 수 있다.
[ 수정내용 ]