함수(function) 콜백지옥과 비동기제어

* 스크랩 내용

 

05. 콜백지옥과 비동기제어

 

- 콜백지옥은 콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 깊어지는 현상

- 주로 이벤트처리나 서버 통신과 같이 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장함

- 동기적인 코드는 현재 실행중인 코드가 완료된 후에야 다음 코드를 실행하는 방식 

- 비동기적인 코드는 현재 실행중인 코드 완료 여부와 무관하게 즉시 다음 코드로 넘어감 

- 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout)

- 사용자의 직접적인 개입이 있을 때 함수를 실행하도록 대기한다거나 (addEventListener)

- 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 응답이 왔을 때 함수를 실행하도록 대기하는 (XMLGttpRequest)

- 이런 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드

 

// setTimeout 문법

var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);

var timeoutID = window.setTimeout(code[, delay]);

window.setTimeout(function, milliseconds);

// 예제 4-12

setTimeout(function(name){

  var coffeeList = name;

  console.log(coffeeList);

 

  setTimeout(function(name){

    coffeeList += ',' + name;

    console.log(coffeeList);

    

    setTimeout(function(name){

      coffeeList += ',' + name;

      console.log(coffeeList);

     

      setTimeout(function(name){

        coffeeList += ',' + name;

        console.log(coffeeList);

      },500,'카페라떼');

    },500,'카페모카');

  },500,'아메리카노');

},500,'에스프레소');

 

// 에스프레소

// 에스프레소, 아메리카노

// 에스프레소, 아메리카노, 카페모카

// 에스프레소, 아메리카노, 카페모카, 카페라떼

// 문제점 : 들여쓰기 수준이 깊어졌으며, 값이 전달되는 순서가 아래에서 위로 향하고 있어 어색하게 느껴짐

// 예제 4-13 - 기명함수로 변환

var coffeeList = '';

 

var addEspresso = function(name){

  coffeeList = name;

  console.log(coffeeList);

  setTimeout(addAmericano, 500, '아메리카노');

};

var addAmericano = function(name){

  coffeeList += ',' + name;

  console.log(coffeeList);

  setTimeout(addMocha, 500, '카페모카');

};

var addMocha = function(name){

  coffeeList += ',' + name;

  console.log(coffeeList);

  setTimeout(addLatte, 500, '카페라떼');

};

var addLatte = function(name){

  coffeeList += ',' + name;

  console.log(coffeeList);

};

  setTimeout(addEspresso, 500, '에스프레소');

 

// 가독성은 좋아졌지만, 일회성 함수라는 것이 단점

 

- setTimeout을 변수에 넣는 과정에서 메서드가 실행된다고 배웠는데, 위 예제에서 실행되지 않는 이유 

=> setTimeout을 함수안에 넣었기 때문에 함수를 실행하지 않는 이상 별도로 실행되지 않는다

 

// 예제 4-14 비동기 작업의 동기적 표현 - Promise

new Promise(function(resolve){

  setTimeout(function(){

    var name = '에스프레소';

    console.log(name);

    resolve(name);

},500);

}).then(function(prevName){

  return new Promise (function(resolve){

    setTimeout(function(){

      var name = prevName + '아메리카노';

      console.log(name);

      resolve(name);

    },500);

  });

}).then(function(prevName){

  return new Promise (function(resolve){

    setTimeout(function(){

      var name = prevName + '카페모카';

      console.log(name);

      resolve(name);

    },500);

  });

}).then(function(prevName){

  return new Promise (function(resolve){

    setTimeout(function(){

      var name = prevName + '카페모카';

      console.log(name);

      resolve(name);

    },500);

  });

 

- resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 then 또는 오류구문(catch)으로 넘어가지 않음

 

// 예제 4-15 비동기작업의 동기적 표현 - Promise2

var addCoffee = function(name) {

  return function(prevName) {

    return new Promise(function(resolve){

      setTimeout(function(){

        var newName = prevName ? (prevName + ',' + name) : name;

        console.log(newName);

        resolve(newName);

      },500);

    });

  };

};

addCoffee('에스프레소')()          // 함수 addCoffee 안에 return값으로 내부함수가 있는구조기 때문에 함수 실행을 두번한다 

  .then(addCoffee('아메리카노'))

  .then(addCoffee('카페모카'))

  .then(addCoffee('카페라떼'));

 

- 함수 addCoffee안에 return값으로 내부함수가 있는 구조기 때문에 함수 실행을 두번한다 

- 이후 then의 두번째 함수의 인자로 이전 resolve값이 온다

 

// 예제 4-16 비동기작업의 동기적표현 - Generator

var addCoffee = function (prevName, name){

  setTimeout(function(){

    coffeeMaker.next(prevName? prevName + ',' + name : name);

  },500);

};

var coffeeGenerator = function* () {

  var espresso = yield addCoffee('', '에스프레소');

  console.log(espresso);

  var americano = yield addCoffee(espresso, '아메리카노');

  console.log(americano);

  var mocha = yield addCoffee(americano, '카페모카');

  console.log(mocha);

  var latte = yield addCoffee(mocha, '카페라떼');

  console.log(latte);

};

var coffeeMaker = coffeeGenerator();

coffeeMaker.next();  

 

- '*'이 붙은 함수가 Generator 함수

- 함수 실행시 Iterator가 반환되는데, Iterator는 next라는 메서드를 가지고 있음

- next메서드 호출시 가장 먼저 등장하는 yield에서 함수의 실행을 멈춤

- 이후 다시 next메서드를 호출하면 앞서 멈췄던 부분부터 시작해서 다음에 등장하는 yield에서 함수의 실행을 멈춤  

 

​

 

// 비동기작업의 동기적표현 - Promise+Async/await

var addCoffee = function(name){

  return new Promise(function(resolve){

    setTimeout(function(){

      resolve(name);

    },500);

  });

};

var coffeeMaker = async function(){

  var coffeeList = '';

  var _addCoffee = async function(name){

    coffeeList += (coffeeList ? ',' : '') + await addCoffee(name);

  };

  await _addCoffee('에스프레소');

  console.log(coffeeList);

  await _addCoffee('아메리카노');

  console.log(coffeeList);

  await _addCoffee('카페모카');

  console.log(coffeeList);

  await _addCoffee('카페라떼');

  console.log(coffeeList);

};

coffeeMaker();

 

- 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기한다,

- 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await 표기하는 것만으로 뒤의 내용을 Promise로 자동전환되며, 

해당 내용이 resolve된 이후에야 다음으로 진행된다 ( Promise then과 흡사한 효과를 얻을 수 있다 )