Callback [#2비동기]

 

비동기 처리 => 

 

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성!

(실행시키는 우선순위가 존재한다.) 

 

 

비동기 처리 방식의 특징

오늘 블로깅할 callback과 promise은 비동기 동작을 원하는 때에 동작이 되도록 스케줄링을 할 수 있는 친구들이다.

(callback의 용도는 다양하나 여기선 비동기 제어의 목적으로 사용하는 부분만 다룸)

그렇다면!  스케줄링에 대표적인 메서드 setTimeout을 예로 보겠다!!!

(setTimeout()은 web API의 한 종류로 코드를 바로 실행하지 않고 설정된 시간까지 기다렸다가 실행된다.)

 

예상되는 출력순서는
1. 1 출력

2. 3초 후 2 출력

3. 3 출력

 

하지만 실제로 출력은

1. 1 출력

2. 3 출력

3. 2 출력

 

 

setTimeout()은 비동기 방식으로 실행되기 때문에 1,3이 출력되고 3초 후 2가 출력되는 것을 볼 수 있다.

위에 예시로 볼 수 있 듯이 함수 실행에서 우선순위가 발생되는 것을 볼 수 있다.

 

비동기 처리 방식의 문제점 

다음은  https://domain.com 라는 서버에 HTTP GET 요청을 날려 1번 상품(product) 정보를 요청하는 코드다.

서버에서 받은 정보는 response 인자에 담긴다.

기대하기로는 최종결과에 내가 웒는 1번 상품의 정보가 나와야 하는데 undefined가 나온다.

그 이유는 실행순서를 확인해보면 알 수 있다.

우리가 예상했을 때에는 함수가 실행되면 talbeData가 선언된 후 서버로부터 데이터를 받아온

response가 tableData에 담겨져 출력이 될 것이라고 예상하겠지만

실제 실행순서는 함수가 실행되면 tableData가 선언된 후 바로 tableData가 아무런 값을 받지 않은채로 리턴이 된다.

 

위와 같은 문제점이 발생하는 이유는 로직의 처리하는 것을 기다려주지 않고 실행되는 비동기 처리방식의 특징 때문이다.

(순차적인 로직이 실행되는 것은 동기호출의 특징)

이와 같은 문제점을 해결하기 위해서는 비동기 동작을 컨트롤 할 수 있는 로직이 필요한데 그 방법이 callback이다.

 

비동기 처리 핸들러 callback

 

비동기 처리방식의 문제점을 컨트롤 할 수 있는 것이 callback 함수이다.

callback함수는 데이터가 준비된 시점에서 동작을 하기 때문에 빈 변수를 리턴하는 비동기처리 방식의 문제점을 보완해준다.

동기처리의 문제점.

동기처리의 문제는 앞에 있는 로직이 처리되지 않으면 그 뒤에 있는 로직이 작동을 하지 않는다는 것이 큰 문제점!

유튜브 사이트에서 영상이 로딩중일 때 아무런 작업을 하지 못한다고 생각해보자.. 굉장히 불편할 것이다.

[놀이기구를 타기위해 긴 줄을 서서 기다리는 것과 같다.]

 

비동기처리의 문제점.

비동기는 다른 로직이 끝나는 것과 상관없이 실행된다. 즉 기다려주지 않는다.

그래서 위에서 예로 들었던 코드처럼 데이터를 받아오는 로직을 기다려주지 않고 그냥 빈 변수를 리턴한다.

[놀이기구를 타기위해 긴 줄을 서서 기다리는 것이 싫어서 새치기를 하다 쫒겨나는 느낌..동작은 했지만 목적을 이루지 못했다.] 

 

callback으로 문제점 해결

데이터가 준비된 시점(예약시간이 오기 전까지 나는 놀이기구 탑승이 어렵다.)에서만 우리가 원하는 동작을 수행할 수 있다.

[놀이기구를 이용할 시간을 예약한다면 줄을 서서 기다리는 시간에 다른 놀이기구를 타러 가거나, 다른 행위를 할 수 있다.]

여기서 예약을 하는 행위가 콜백함수를 만들어 주는 것이고, 예약한 시간이 되었을 때 예약한 놀이기구를 타러간다.

 

하지만... 이런 callback에도 문제점이 있다..ㅠ

 

 

콜백지옥(callback hell)

콜백 지옥은 비동기 처리 로직을 위해 함수를 연속해서 사용할 때 발생하는 문제이다.

 

위의 코드는 사용자가 서버에 들어와서 로그인을 하는 동작을 구현해 본 것인데, 

사용자가 아이디와 비밀번호를 입력했을 때의 처리과정을 구현하는 과정(오른쪽 4~20)에서 복잡해지는 것을 눈으로 확인할 수 있다.

사용자 인증에 대한 반응을 구현하는데에도 벌써 복잡한데 이러한 과정이 계속 반복된다면 가독성이 너무 떨어질 것 이고,

callback함수가 꼬리에 꼬리를 물고 있기 때문에 에러가 났을 때 수정을 하는데에도 어려움을 겪을 수 있다.

 

이러한 문제점을 해결하기 위한 방법이 Promise와 Async를 사용하는 방법이 있다.