TIL 11 동기, 비동기 처리 then , 콜백함수, callback hell, Promise, async + await

then 함수

자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. 우리가 작성한 코드들은 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다.
API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다.

 

비동기처리

$.get() 을 이용하여 해당 URL에서  /product/1에 대한 정보를 서버에 요청하는 것이다.  서버에서 받아온 데이터는 response 에 담기고 function 인자에 넘겨주었다. 

그 인자값을 tableData에 넣어주고 그 값을 반환하는 함수이다. 그러면 console.log부분에서 getData()함수를 호출하면 우리가 원하는 tableData 값이 콘솔창에 찍혀야한다. 하지만 결과값은 초기값을 설정해주지 않았던 undefined 를 반환하는데 이유는 get 을 이용하여 정보를 요구하고나서 기다리지 않고 다음 코드로 넘어가서 비동기처리식으로 실행하기때문이다.  만약 이를 동기처리한다면 서버에서 언제 올지모르는 정보를 기다리는동안 다음을 실행하지않는다. 지금은 데이터하나지만 만약 100개가 넘는것을 받아올려고 한다면 여간 불편하고 기다려야하는 시간은 계속 길어질것이다. 이를 위해 비동기 처리를 이용하는것인데 이렇게 다음코드로 바로 넘어가지면 정보를 못읽어온다. 따라서 다른 코드들을 비동기처리를 하되 정보가 오면 나머지부분을 계산해서 반환해주는형식으로 하기위해 await 을 쓰는것이다

 

비동기 방법 2번째 setTimeout

위에 getData() 와 같이 undefined 값을 주지않고 다른일을 처리하고나서 3초후에 돌아와서 실행하는 부분이다.  

따라서 비동기처리가 setTimeout에서 일어나는지 알수있다. 

 

setTime 함수는 두번째 인자 시간이후에 첫번째 콜백함수를 실행한다라는건 어느정도 알고있을것이다. 그래서 위의 코드를 실행하면 어떤 결과의 순서대로 나올까를 생각해보면 만약 

비동기처리를 모른다면 hello가 뜨고 3초후에 Bye가 뜨고 Hello Again 이 뜬다고 생각할수있다 하지만 비동기 처리는 setTime이 3초후에 실행한다는걸 안다고해서 다른것이아니라 그다음 코드를 실행하기때문에 Hello 를 출력하고 Hello Again을 출력하고 3초후에 실행해야하는부분으로 돌아와서 Bye를 출력해준다. setTime역시 비동기처리방식이기때문이다. 

 

세번째 콜백함수 비동기처리

비동기처리 방식을 위해 사용한다.

이러한 비동기처리로 인해서 원하지않는 결과가 나올수도 있는데 이러한 문제를 해결하기위해서 콜백함수를 사용한다

콜백함수를 쓴다고 다른일을 안하고 기다리는것도 아니고 똑같이 비동기 처리 방식으로 진행할텐데 어떻게 에러나 원하지않는 값을 출력안하고 원래 기존에 생각한것처럼 반환할수있을까? 라고 생각했을때 식당의 예약 시스템을 생각하면 좋을것 같다. 기존의 비동기처리 방식이라면 먼저 식당에 가서 자리를 본다음 자리가 없는것을 알고 주문을 먼저 한다 음식을 기다리는동안 다른일을 하는데 요청이오면 그결과값을위해 다시 레스토랑에 찾아간다. 음식이 나왔을땐 이미 레스토랑을 한번 들렀다는 실행이있기때문에 그다음에 나온다고하면 레스토랑을 2번 가게되는것이다. 그런데 콜백함수 경우는 전화예약과 같아서 자리와 밥을 예약하고 요청한다. 자리가 났다고 연락이 오기전까지는 레스토랑에 갈필요가없다. 코드로 해석하자면 get을 통해 자료를 요청하고 function() 부분을 바로 실행하지 않고 기다리는동안 다른 일을 처리하는것이다.  기다리는동안 다른 볼일을 보지만 레스토랑에는 가지 않기때문에 자리가 있나 없나에 대한 결과를 미리 받지를 않는다. 그렇게 다른 처리를하다가 전화가오면 그때 레스토랑으로 가는것이다. 코드로는 function 부분을 실행하는것이다 

따라서 console로 출력하면 그전과 달리 response 값을 잘 받아와서 undefined가 아닌 tableData를 반환해준다.

 

콜백지옥 (Callback hell)

하지만 이렇게 콜백함수로 비동기 처리하기위해서 중첩으로 그안에 넣게된다면 가독성도 떨어지고 로직을 변경하기도 어렵게 된다 이런것을 콜백 지옥이라고 한다.

 

Promise

따라서 이러한 복잡성을 없애기 위해서  Promise 를 사용한다

위의 코드를보면 getData를 실행하고 그안에 콜백함수를 실행하게 된다 이때 Promise를 만나는데 아래 getData().then 을 보면 실질적으로 getData를 호출하는곳은 여기이기

때문에 호출하고나서 getData가 promise 를 만나기전까지 실행을 한다 그리고 정보를 가져오면 그때 response값을 가지고 function(tableData)를 실행하게하여 undefined가 아닌 table값을 가져올수있다

async + await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완해준다.