비동기 처리의 시작 Callback 이해하기

JavaScript는 동기적인 언어이다.

hoisting이 된 이후 부터 코드가 작성한 순서에 맞추어서, 하나하나 씩 동기적으로 실행 된다는 의미이다.

 

*hoisting :  var(변수) 혹은 function(함수) 선어들이 자동적으로 제일 위로 올라가는 것을 의한다.

 

함수  setTimeout()

브라우저에서 제공되는 api로, 지정한 시간이 지나면, 지정한 callback함수를 호출하는 것이다. 해당 함수에는 handler:TimeHandler라는 callback함수를 전달해주고, 어느정도 시간을 timeout할 것 인지 지정해주는 인자들이 존재한다. 해당 함수의 callback함수를 전달한 인자만큼의 시간뒤에 실행해달라고 브라우저에게 요청한다.

브라우저 api는 무조건 브라우저에게 먼저 요청을 보내게 된다. 그리고 응답을 기다리지 않고 바로 다음 코드로 넘어간다.

 

해당함수에서 

 

callback은 비동기적인 상황에서만 쓸까?

Synchronous callback

 

Asynchronous callback

JavaScrip는 함수를 인자로 다른 함수에 전달 할 수도 있고, 또는 변수에 할 당할 수도 있는 언어 인데, 언어들 마다 callback을 지원하는 방식은 저마다 차이점이 존재한다. sub-routine,Ramda expression, function pointer등등을  사용하는 경우도 있다.

 

loginUser 함수를 호출하게 되면,  2초 뒤에 setTimeout 안의 callback 함수가 호출이 된다. if 조건에 맞으면, callback 함수의 callback 함수인 onSuccess가 호출되고, 그렇지 않으면 다른 callback함수인 onError

 

 

 

UserStorage class 사용

1. 사용자에게 id와 password를 입력 받아 올 것이다.
2. 받아온 id와 password를 이용 서버와 통신해서, login한다.
3. login이 성공적으로 된다면, id를 받아오고 이 받아온 id를 통해서, 해당 id의 roles(역할)이 무엇인지 반환 받을 것이다.
4. 역할이 성공적으로 받아와 진다면, 사용자의 이름과 역할에 대한 data를 반환 받을 수 있다.

 

 

 

콜백 체인의 문제점

callback을 함수를 이용해서, 그 안에서 다른 것을 호출하고, 그 안에서 또 다른 callback을 전달하고, 그안에서 또 다른 것을 호출하고 전달하면 => callback 지옥

 

1. 가독성이 떨어진다.
2. 비지니스 로직을 한눈에 이해 하는 것이 어렵다.
3. error가 발생하여 디버깅을 해야하는 과정도 까다롭다.

 

[출처 - https://youtu.be/s1vpVCrT8f4 ]