[JavaScript]비동기처리 문제

최근 edwith 부스트코스까지만 하더라도 왜 callback 지옥이 발생하는지 이해할 수 없었다.

네이버 페이지를 꾸밀 때 비로소 알 수 있었다.

문제가 있는 프로세스

1. Tab UI를 누른다.

2. 전체리스트 수 표현하기
   - 2-1) 전체 리스트 수를 Ajax로 API를 요청하여 받는다. (caching되어 있다면 바로 2-3으로)
   - 2-2) 받은 API를 caching한다.
   - 2-3) caching한 정보로 전체 리스트 수를 출력한다.

3. UI탭 아래 전시 항목 보여주기
   - 3-1) product 정보(전시항목)를 Ajax로 API를 요청하여 받는다. (caching되어 있다면 바로 3-3으로)
   - 3-2) 받은 API를 caching한다.
   - 3-3) caching한 정보로 product정보를 출력한다.

이와 같은 과정이였고 이를 다음과 같이 구현했다.

sendAjaxTotalCount();
renderTotalCount();

sendAjaxProducts();
renderProducts();

 

구현 결과는?

2번 클릭하고 나서야 정상적으로 출력되는 문제가 발생했다.

 

문제는?

바로 문제는 비동기처리였다. 자바스크립트는 실행하다가 비동기 함수는 이벤트 핸들러에게 맡긴 후 이벤트 큐로 이동한다. 그러다보니 실제 순서는 다음과 같았다.

1. sendAjax는 이벤트 핸들러에 넘겨진다. 이후 처리되면 이벤트 큐로 들어간다.
2.render()가 실행된다.
3.이벤트 큐 내용이 실행된다.

이렇기 때문에 render()했을 시 caching데이터는 없었다. (함수가 이벤트 큐에서 대기),
다시 눌렀을 때는 이벤트 큐 내용이 처리된 이후 이므로 caching 데이터가 있기 때문에 그때서야 원하는 결과가 나왔던 것 이다.

해결방법은?

여기서 콜백지옥이 나온다. 순서상 Ajax요청 후에 render()가 되야하므로 이벤트 발생 후에 render()를 넣어주면 된다.

var oReq = new XMLHttpRequest();

oReq.addEventListener("load", ()=> {
    var data =  JSON.parse(oReq.responseText);
    render(data);
})

oReq.open(method,url);
oReq.send();

 

그런데 이와 같이 코드를 작성하면 비동기처리가 많아질 경우 depth가 커지고, 그에 따라 가독성이 매우 떨어질 수 있다.

1 작동 -> 2 작동 -> 3작동 .....

(여기서 i번째 작동은 i-1번째가 처리되어야만 정상적인 결과를 얻을 수 있다. )

보기만해도 끔찍하다. 따라서 이 때문에 javascript는 promise에서 then을 제공해준다.
promise는 말 그대로 약속. promise 인자로 넣은 함수를 처리할 것을 약속합니다~ 그리고나서(then) ~을 처리할겁니다
자세한 내용은

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

를 참고!

 

평

이번을 계기로 비동기 함수를 더욱 잘 이해할 수 있게 되었다.

이 덕분에 application을 만든다면 어떤 부분을 먼저 처리하여 사용자가 쾌적함을 느끼게 해줄 것인지,

안드로이드를 개발한다면 당연하게도 비동기 처리하는 기능을 제공해주겠거니...

이러한 부분들을 생각할 수 있게 되었다.