자바스크립트 비동기, 콜백

비동기

특정 작업이 완료될 때까지 기다리지 않고, 다음 작업을 이어서 실행해 나가는 것을 말합니다.

자바스크립트는 기본적으로 싱글 스레드 기반으로 동기적으로 실행되는데, 이렇다 보니 웹에서 계속 동기적으로 기능이 동작하다 보면, 속도가 느린 것처럼 보이게 되는 현상이 발생합니다.. (그렇기 때문에 비동기를 써야 함!)

콜백

콜백 함수는 함수의 인수로 넘기는 함수인데, 콜백함수는 비동기 프로그래밍에서 아주 유용한 녀석입니다.
콜백 함수를 이용하면, 비동기 방식에 시점을 잡아 특정 시점에 호출할 수가 있다.
간단하게 아래와 같이 콜백 함수를 이용하여 비동기를 처리할 수 있습니다.

const myCallBack = () => console.log('콜백!');

// 5초 뒤, myCallBack 호출!! 
setTimeout(myCallBack, 5000); // 결과: 콜백!

물론 모든 코드가 위에 처럼 간단하지는 않습니다...
우리가 알고 있는 ajax, promise, aync... 비동기 관련된 동작 방식은 여러 개가 있지요.
하지만, 공통적으로 비동기 콜백에 대한 개념은 정말 필수요소이기 때문에.. 공부합시다... (나도..)

콜백 지옥

비동기 로직을 짜다보면, 흔히 콜백 지옥이라는 것을 볼 수 있을 것입니다.(안 봐도 들어는 봤을..)

어떤 경우에 발생하나요??..

• 우리가 유용하게 쓰고 있는 ajax로 비유하자면, ajax 호출 후, success로 넘어온 결과 값을 확인 후,
  다시 ajax 비동기 호출 후, success로 넘어온 결과 값을 확인 후, 다시 ajax.. (괴롭히기)
  이렇게 하나의 비동기 호출 후, 완료된 결과값을 가지고 다시 비동기를 호출하면 콜백 지옥이라는 것을 볼 수 있게 된다...
  하나가 아니고.. 여러 개의 비동기면 더 끔찍해진...

아래의 사진을 보면 좀 더 와닿을 것이다...

출처: https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/

이러한 콜백 지옥을 해결하는 방법 중에는 promise, async가 있다.

경험 - 1

처음 비동기를 공부할 때, 여러 비동기 함수를 한 번에 실행한적이 있다..
순서대로 나와야 하는데, 당연하게도 순서대로 나오지 않아서 당황한 기억이 있다... (지금 생각하면 ㅠ.ㅠ)

경험 - 2

개발 지원을 나가서 비동기 관련된 지원을 해준 적이 있는데,
조회된 데이터에 관해 무언가를 하는 함수가 있었다. 내부는 간단하게 보여주자면...

const LoadData = (data, callback) => {
    무언가();
    callback();
}

하지만, 위의 코드가 무언가 이후에 callback이 와야 하는데, callback의 실행이 안된다!라는 것이었다. 확인 결과..
무언가는 비동기 함수였고, 결국 callback의 위치가 잘못되어 조정해준 경험이 있다..
정말 간단한 처리지만, 어떻게 보면 개념이 제대로 잡히지 않거나, 종종 이런 실수를 할 수 있기 때문에
늘 비동기를 사용하는 경우, 콜백을 기억하자...