비동기 처리
자바스크립트의 특성중 하나.
특정 코드의 연산이 끝날 때 까지 코드의 실행이 멈추지 않고 다음 코드를 먼저 실행한다.
비동기 처리 예제
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData()); // undefined위에 코드는 https://domain.com/에 GET을 보내서 1번 상품의 정보를 요청하는 코드이다.
위 코드를 실행시키면 url로 부터 받은 정보를 로그에 출력할 것 같지만 사실은 undefined가 출력된다.
그 이유는 앞서 말했듯이 자바 스크립트는 비동기 처리를 하는 언어이므로 url로 데이터를 받아오기 전에 getData()가 실행되므로 초기값이 설정되지 않은 tableData의 값 undefined가 출력되는 것이다.
위 예제는 단 한개의 요청이였기때문에 서버에서 받아오는 시간이 오래걸리진 않지만, 만약 요청이 백개, 만개가 된다면 한개의 웹 어플리케이션을 실행하는데 수십분은 걸릴 것이다. 따라서 자바스크립트는 비동기 처리를 사용하고 있다.
callback 함수
하지만 여전히 비동기 처리는 많은 문제점을 가지고있다. callback 함수는 이런 문제점들을 해결해 줄 수 있다.
function getData(callbackFunc) {
$.get('https://domain.com/products/1', function(response) {
callbackFunc(response);
});
}
getData(function(tableData) {
console.log(tableData);
});비동기 처리예제를 callback 함수를 사용하여 단점을 보완한 코드이다.
이 코드 역시 https://domain.com/에 GET을 보내서 1번 상품의 정보를 요청하는 코드지만, callback을 사용함으로써 정보를 받아온 후에 getData()함수를 실행다는 차이점이 있다.
또, JS는 여전히 비동기 처리중이기 때문에 1번 상품의 정보를 요청받아오는 중에는 getData()를 제외한 다른 코드는 실행이 될 것이다.
callback 지옥
콜백 함수는 콜백 이후에 처리될 작업들을 callback 함수 내부에 작성해야한다.
즉, 1번코드의 정보를 바탕으로 2번코드를 실행하고, 그것을 바탕으로 3번코드를 실행하고.. 하다보면 아래와 같은 callback 지옥을 마주하게 된다.
obj.callback(parameter1, () => {
obj.callback(parameter2, () => {
obj.callback(parameter3, () => {
obj.callback(parameter4, () => {
obj.callback(parameter5, () => {
obj.callback(parameter6, () => {
console.log('Hello, World!')
})
})
})
})
})
})보기에도 어지럽고 읽기도 불편하며 심지어 수정도 쉽지 않을것이다.
이를 보완하기 위해 promise, async / await이 개발되었고 이 중 async / await를 다뤄보도록 하겠다.
async / await
function logName() {
var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
}위 코드는 fetchUser를 사용해서 서버에서 부터 1번 user의 데이터를 받아온 후, 유저의 아이디가 1이라면 콘솔에 유저의 이름을 찍는 코드이다. 우리는 위에서 자바스크립트의 비동기 처리는 코드의 실행순서를 보장받지 못한다는것을 알고있고, 그래서 콜백함수 사용함을 이미 알고있다. 더 나아가, 콜백함수로는 한계가 있음을 알고있다.
async function logName() {
var user = await fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
}async와 await은 예제 처럼 단순히 async를 함수의 앞에 붙이고, 비동기 처리 코드 앞에 await을 붙이는 방식으로 사용한다.
async와 await을 사용하면 콜백함수보다 간단하고 쉽게 코드를 순서대로 실행할 수 있다!
일반적으로 await의 대상이 되는 비동기 처리 코드는 프로미스를 반환하는 API호출 함수이다.
(프로미스 업데이트 예정)
Reference
