오늘은 한 가지 세상에 있어서 안되었던 키워드를 이야기 하고자 한다. 뭐 물론, 이 키워드를 이용하여, 만들어진 프로그램은 수도 없이 많을 것이다. 특히나, ES6이후에 만들어진 웹사이트 Node 서버들은 무조건 포함이 되는 키워드일 것이다.
function initData() {
apiCall1().then((res) => {
this.data1 = res.payload
})
apiCall2().then((res) => {
this.data1 = res.payload
})
apiCall3().then((res) => {
this.data1 = res.payload
})
}
async function initData() {
this.data1 = await apiCall1().payload
this.data2 = await apiCall2().payload
this.data3 = await apiCall3().payload
}
이런 생각을 하는 사람들은 그렇게 많지는 않을 것 같다. 아마도 동료들한테 말을 하는 순간 엄청나게 욕을 먹고 까일 것 같다...
async/await은 비동기 코드를 동기코드로 만들어주는 아주 마법 같은 키워드이다. 하지만 그로 인해서 모든 대부분의 개발자들이 동시성이 주는 마법을 잊어버리고 있다. 특히나 싱글스레드인데도 사용하다니, 더 이상 동시성에 대한 고려를 하지 못하도록 원천 차단하고 있다.
그래도 Promise 때 까지만 해도 좋았다. 무슨 말일까? 잠깐만 아래의 코드를 잠깐만 생각해보도록 하자.
promise 방식
function initData() {
apiCall1().then((res) => {
this.data1 = res.payload
})
apiCall2().then((res) => {
this.data1 = res.payload
})
apiCall3().then((res) => {
this.data1 = res.payload
})
}
async/await
async function initData() {
this.data1 = await apiCall1().payload
this.data2 = await apiCall2().payload
this.data3 = await apiCall3().payload
}
자 이 두개의 코드가 내가 말하고 싶은 것의 축약본이다.
apiCall1: 1초,
apiCall2: 2초,
apiCall3: 3초,
라고 생각해보자.
apiCall1: 1초,
apiCall2: 2초,
apiCall3: 3초,
라고 생각해보자.
총: async/await으로 작성된 코드는 6초, promise코드는 3초 걸리게 된다.
뭐 물론 async/awiat은 쉽다.... 하지만 화면이 보일 때 까지 6초나 걸리는 프로그램을 누가 쓸까???
댓글
댓글 쓰기