<div id="readability-page-1" class="page"><div><h2 id="es2015-이전"><a href="#es2015-%EC%9D%B4%EC%A0%84" aria-label="es2015 이전 permalink"></a>ES2015 이전</h2>과거의 자바스크립트에서는 비동기 동작을 모델링하기 위해 콜백을 사용했고, 악명 높은 콜백 지옥을 필연적으로 마주할 수 밖에 없었다.
아래 예제에서 볼 수 있듯, 실행의 순서는 코드의 순서와 반대이다. 이러한 콜백이 중첩된 코드는 직관적으로 이해하기 어렵다.
요청들을 병렬로 실행하거나 오류 상황을 빠져나오고 싶다면 더욱 혼란스럽다. <div data-language="typescript"><pre><code>fetchURL(url1, function(response1){
 fetchURL(url2, function(response2){
 fetchURL(url3, function(response3){
 // ...
 console.log(1);
 });
 console.log(2);
 });
 console.log(3);
});
console.log(4);


// 실행
4
3
2
1</code></pre></div><h2 id="es2015es6---promise"><a href="#es2015es6---promise" aria-label="es2015es6 promise permalink"></a>ES2015(ES6) - Promise</h2>ES2015(ES6)에서는 콜백 지옥을 극복하기 위해 Promise 개념을 도입했다. 프로미스는 미래에 가능해질 어떤 것을 나타내며, future라고 부르기도 한다. <div data-language="typescript"><pre><code>const pagePromise = fetch(url1);
pagePromise.then(response1 =&gt; {
 return fetch(url2);
}).then(response2 =&gt; {
 return fetch(url3);
}).then(response3 =&gt; {
 // ...
}).catch(error =&gt; {
 // ...
});</code></pre></div><h2 id="es2017es8---async--await"><a href="#es2017es8---async--await" aria-label="es2017es8 async await permalink"></a>ES2017(ES8) - async &amp; await</h2><div data-language="typescript"><pre><code>async function fetchPages() {
 const response1 = await fetch(url1);
 const response2 = await fetch(url2);
 const response3 = await fetch(url3);
 // ... 
}</code></pre></div><h3 id="await"><a href="#await" aria-label="await permalink"></a>await</h3><ol><li><code>await</code>은 각각의 프로미스가 처리(resolve)될 때까지 fetchPages 함수의 실행을 멈춘다. </li><li><code>async</code> 함수 내에서 await 중인 프로미스가 거절(reject)되면 예외를 던진다. </li><li>이를 통해 일반적인 <code>try/catch</code> 구문을 사용할 수 있다. </li></ol><div data-language="typescript"><pre><code>
async function fetchPages() {
 try {
 const response1 = await fetch(url1);
 const response2 = await fetch(url2);
 const response3 = await fetch(url3);
 // ...
 } catch (e) {
 // ...
 }
}
</code></pre></div><h2 id="callback보다-promise-또는-asyncawait을-사용해야하는-이유"><a href="#callback%EB%B3%B4%EB%8B%A4-promise-%EB%98%90%EB%8A%94-asyncawait%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0" aria-label="callback보다 promise 또는 asyncawait을 사용해야하는 이유 permalink"></a>Callback보다 Promise 또는 async/await을 사용해야하는 이유</h2><ol><li>Callback 보다는 Promise가 코드 작성하기 쉽다. <ol><li>병렬로 api call을 하고싶다면 Promise.all을 사용해서 Promise 조합하면 된다. <ol><li>이런 경우는 await와 구조 분해 할당이 찰떡궁합이다.</li></ol></li></ol></li><li>Callback 보다는 Prmoise가 타입 추론하기 쉽다. <ol><li>입력된 Promise들 중 첫 번째가 처리될 때 완료되는 Promise.race도 타입 추론과 잘 맞는다. </li><li>Promise.race를 사용하여 프로미스에 타임아웃을 추가하는 방법은 흔하게 사용되는 패턴이다.</li></ol></li></ol><div data-language="typescript"><pre><code>async function fetchWithTimeout(url: string, ms: number) {
 return Promise.race([fetch(url), timeout(ms)]); </code></pre></div><h2 id="프로미스를-생성하기-보다는-asycnawait을-사용하자"><a href="#%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4%EB%A5%BC-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0-%EB%B3%B4%EB%8B%A4%EB%8A%94-asycnawait%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90" aria-label="프로미스를 생성하기 보다는 asycnawait을 사용하자 permalink"></a>프로미스를 생성하기 보다는 asycn/await을 사용하자.</h2><ol><li>일반적으로 더 간결하고 직관적인 코드가 된다. </li><li>async 함수는 항상 프로미스를 반환하도록 강제된다.<ol><li>어떤 함수가 Promise를 반환하면 async를 사용하여 항상 비동기 코드를 작성하도록 하자. </li></ol></li></ol><div data-language="typescript"><pre><code>// async 사용 
const getNumber = async () =&gt; 42; // type: () =&gt; Promise&lt;number&gt;;
// Promise 직접 생성 
const getNumber = () =&gt; Promise.resolve(42); </code></pre></div><hr>출처: <a href="https://link.coupang.com/a/ki28i">이펙티브 타입스크립트</a> </div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</div>

아웃풋 트레이닝

BAEKDEV

ES2015 이전
과거의 자바스크립트에서는 비동기 동작을 모델링하기 위해 콜백을 사용했고, 악명 높은 콜백 지옥을 필연적으로 마주할 수 밖에 없었다.
아래 예제에서 볼 수 있듯, 실행의 순서는 코드의 순서와 반대이다. 이러한 콜백이 중첩된 코드는 직관적으로 이해하기 어렵다.
요청들을 병렬로 실행하거나 오류 상황을 빠져나오고 싶다면 더욱 혼란스럽다. 
fetchURL(url1, function(response1){
 fetchURL(url2, function(response2){
 fetchURL(url3, function(response3){
 // ...
 console.log(1);
 });
 console.log(2);
 });
 console.log(3);
});
console.log(4);
// 실행
4
3
2
1
ES2015(ES6) - Promise
ES2015(ES6)에서는 콜백 지옥을 극복하기 위해 Promise 개념을 도입했다. 프로미스는 미래에 가능해질 어떤 것을 나타내며, future라고 부르기도 한다. 
const pagePromise = fetch(url1);
pagePromise.then(response1 => {
 return fetch(url2);
}).then(response2 => {
 return fetch(url3);
}).then(response3 => {
 // ...
}).catch(error => {
 // ...
});
ES2017(ES8) - async & await
async function fetchPages() {
 const response1 = await fetch(url1);
 const response2 = await fetch(url2);
 const response3 = await fetch(url3);
 // ... 
}
await
await은 각각의 프로미스가 처리(resolve)될 때까지 fetchPages 함수의 실행을 멈춘다. 
async 함수 내에서 await 중인 프로미스가 거절(reject)되면 예외를 던진다. 
이를 통해 일반적인 try/catch 구문을 사용할 수 있다. 
async function fetchPages() {
 try {
 const response1 = await fetch(url1);
 const response2 = await fetch(url2);
 const response3 = await fetch(url3);
 // ...
 } catch (e) {
 // ...
 }
}
Callback보다 Promise 또는 async/await을 사용해야하는 이유
Callback 보다는 Promise가 코드 작성하기 쉽다. 
병렬로 api call을 하고싶다면 Promise.all을 사용해서 Promise 조합하면 된다. 
이런 경우는 await와 구조 분해 할당이 찰떡궁합이다.
Callback 보다는 Prmoise가 타입 추론하기 쉽다. 
입력된 Promise들 중 첫 번째가 처리될 때 완료되는 Promise.race도 타입 추론과 잘 맞는다. 
Promise.race를 사용하여 프로미스에 타임아웃을 추가하는 방법은 흔하게 사용되는 패턴이다.
async function fetchWithTimeout(url: string, ms: number) {
return Promise.race([fetch(url), timeout(ms)]); 
프로미스를 생성하기 보다는 asycn/await을 사용하자.
일반적으로 더 간결하고 직관적인 코드가 된다. 
async 함수는 항상 프로미스를 반환하도록 강제된다.
어떤 함수가 Promise를 반환하면 async를 사용하여 항상 비동기 코드를 작성하도록 하자. 
// async 사용 
const getNumber = async () => 42; // type: () => Promise<number>;
// Promise 직접 생성 
const getNumber = () => Promise.resolve(42); 
출처: 이펙티브 타입스크립트

이펙티브 타입스크립트 - 6. 비동기 코드에는 콜백 대신 async 함수 사용하기

댓글