[Javascript] 비동기함수(2) - CallBack

비동기와 콜백

저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다.

client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다.

예를 들어 어떤 이벤트가 발생했을때 아래의 함수가 실행된다고 가정해보자.

server에게 data를 가져오는 http요청을 하는 함수이다.

// Client side code...


function getUserData() {
  //request (kim 이라는 user의 데이터를 요청 )
  someCallToServer({username:"kim"},(err,data)=> {
    if(err){
      return "err!!!";
    }else{
	  // 받아온 data를 가지고 작업...
    }
  })
}

 

보통 이런식으로 작업을 하게 된다. 

callback으로 넘겨준 함수에서 작업을 하는 이유가 무엇일까??

---

callback의 원리와 비동기 함수의 작동원리를 잘 이해했다면 그리 어렵지 않은 문제이다

[Javascript] callBack은 call me back

Cambridge Dictionary 에서 call back의 뜻을 알아보았다. 정의들을 보면 빈번하게 중복되는 단어를 볼수가 있다. request 와 return 어떤 요청을하고 그에 따른 리턴을 받는것. 프로그래밍에서의 callback도 동일..

artdev.tistory.com

[Javascript] 비동기함수(1) - Event Loop

코드는 위에서 아래쪽으로 순차적으로 실행된다. console.log('첫번째'); console.log('두번째'); console.log('새번쨰'); 콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순..

artdev.tistory.com

http request는 대표적인 비동기함수이다. (http이 외에도 file을 다룬다거나 db작업을 할때도 비동기 작업은 빈번하다.)

비동기 함수는 callstack이 모두 비워진 이후에 실행이 된다. 

내가 원하는 일을 하려면 (어떤 버튼을 눌렀을때 server에서 data를 받아와서 view에 보여주는) callback으로 내가 하려던 일을 넘겨주어야 실행이 될것이다. 비동기 함수에서 callback은 실행 순서를 보장하기 위해서 사용한다고 이해하면 될것이다.

---

비동기의 비동기의 비동기의..

코드 작업을 하다보면 비동기 요청을 연속적으로 하는 일이 빈번하다.

비동기 함수의 실행순서가 call스택이 비워져야 비로서 실행이 되기때문에 비동기 함수를 중첩해서 사용해야 내가 원하는 실행순서가 된다.

// Client side code...


function getUserData() {
  //request (kim 이라는 user의 데이터를 요청 )
  someCallToServer({username:"kim"},(err,data)=> {
    if(err){
      return "err!!!";
    }
	someCallToServer({data : data},(err,data) => {
      if(err){
        return "err!!!";
      }
      someCallToServer({data : data},(err,data) => {
        if(err){
          return "err!!!";
        }
        //...
      })
    })
  })
}

// 비동기 함수가 계속 쓰이게 되면 callback함수내부에 다시 비동기 함수를 사용하게 된다.

계속 이렇게 사용하면 callback에 서 계속 부르기 때문에 코드의 depth가 계속 늘어서 가독성이 나쁘게 되고, 관리하기도 힘이 든다.

javascript는 이런 문제를 callback Hell 이라고 표현한다. (말 그대로 callback 지옥이다.!)

---

Promise의 등장

promise라는 문법이 es6에 등장하여 callback hell을 피할수 있게되었다.

다음 포스팅은 promise를 하도록 하겠다.