Callback과 동기 비동기 그리고 Promise 와 async await

1. 비동기 작업

1.1 비동기 작업의 필요성

• 서버 쪽 데이터가 필요할때 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용할 때는 네트워크 송수신 과정에서 시간이 걸리 때문에 작업이 즉시 처리 되느것이 아니라, 응답을 받을때 까지 기다렸다가 전달받은 응답 데이터를 처리한다.

• 그러나 Javascript 는 동기적이므로 이러한 작업을 동기적으로 할경우 요청이 끝날 때 까지 기다리는 동안 다른 작업은 중단되는 상태이며, 요청이 끝나야지만 예정된 작업을 할수 있게 된다.

• 그렇기에 비동기적으로 작업을 하는 방식이 필요한것이다.

1.2 콜백함수

• 비동기적으로 작업을 할수 있게 해주는것이 콜백함수이다.

• 콜백함수는, 특정 시점에 함수를 동작할수 있게 해준다.

function printMe() {
  console.log("Hello World!");
}

setTimeout(printMe, 3000);
console.log("대기중...");

//실행결과
대기중
Hello World

• 윗 코드가 동기적이라면, 3초후에 HelloWorld! => 대기중…이 나와야 정상이지만, setTImeout()를 통해 비동기 작업을 해줌으로써 위와 같은 실행결과가 나오게 되는것이다.

• 이 코드의 동작 방식을 보려면 아래를 참조

  (코드의 동작방식)[https://jungyosup.github.io/javascript/javascript09/]

  (event Loop)[https://www.youtube.com/watch?time_continue=791&v=8aGhZQkoFbQ]

1.3 콜백 지옥

• 하지만 데이터 값의 경우 순차적으로 값을 받아야 하는 문제가 생긴다. 그럴경우 Callback 함수를 여러번 사용해야하는데, 이럴경우 가독성이 떨어지는 Callback 지옥에 빠질수 있다.

1.4 해결방법

• 이를 해결하기 위해 Primise [es 6] 와 Async await [es 7] 을 사용하여 해결할수 있다.