4.5 콜백 지옥과 비동기 제어

[eunzy38]

study 완료 후 체크 부탁드립니다.

• [x] 김혜선
• [x] 전은경
• [x] 서동국
• [x] 김은지
• [x] 이봄
• [x] 오근영
• [x] 정형교

[dongggook]

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

• 콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상이다.
• CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적인 코드이다.
• 비동기는 동기의 반대말로 비동기적인 코드는 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어간다.
• 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드이다.
• 가독성 문제와 어색함을 동시해 해결하는 방법은 익명의 콜백 함수를 모두 기명함수로 전환하는 것이다.
• ECMAScript에는 Promise, Generator, async/await 등 콜백 지옥에서 벗어날 수 있는 방법들이 등장하고 있다.

[OHKuenYoung]

콜백 지옥과 비동기 제어

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

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

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

비동기 작업의 동기적 표현

promise

var addCoffee = function (name) {
  return function (prevName) {
    return new Promise(function (resolve) {
      setTimeout(function (){
        var newName = prevName ? (preName + ',' + name) : name;
        console.log(newName);
        resolve(newName);
      }, 500);
    });
  };
};

addCoffee ('에스프레소')()
  .then(addCoffee('아메리카노'))
  .then(addCoffee('아메리카노2'))
  .then(addCoffee('아메리카노3'));

new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지 다음 (then) 또는 오류 구문으로 넘어가지 않는다. 따라서 비동기 작업이 완료될 때 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능하다.

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 coffeeMaker = coffeeGenerator();
  coffeeMaker.next();

'*' 이 Generator 함수이며 이를 실행하면 Iterator가 반환되는데, Iterator는 next라는 메서드를 갖고 있다. next 메서드를 호출하면 Generator 함수 내부에서 가장 먼저 등장하는 yield에서 함수 실행을 멈춘 후 이후 다시 next 메서드 호출하며 앞서 멈췄던 부분부터 실행.

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('에스프레소2');
    console.log(coffeeList);

  };

  coffeeMaker();

함수 앞에 async를 표기하고 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행

[Lee-Bom]

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

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기가 깊어지는 현상
• 동기적 코드란? 현재 실행 중인 코드가 완료된 후 다음 코드를 실행하는 방식, CPU의 계산에 의해 즉시 처리
• 비동기적 코드란? 별도의 요청, 실행 대기, 보류 등과 관련
• ECMAScript에는 비동기 작업을 동기적으로 보일 수 있도록 여러 장치 도입
  • Promise promise의 인자로 넘겨주는 콜백함수는 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음(then) 또는 오류문구(catch)로 넘어가지 않음
  • Generator generator 함수를 실행하면 next라는 메서드를 가진 Iterator 반환, next 메서드를 호출하면 yield에서 함수 실행을 멈춘 뒤 다시 next 메서드를 호출 > 그 다음에 등장하는 yield에서 함수 실행 멈춤
  • Promise + Async/await 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 wait을 표기하면 뒤의 내용을 promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행

[jeonEK]

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

• 콜백지옥 : 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 기준이 감당하기 힘들 정도로 깊어지는 현상(가독성이 떨어지며, 코드수정이 어려움)
• 동기적인 코드 : 현재 실행중인 코드가 완료된 후에야 다음 코드를 싱행하는 방식
• 비동기적인 코드 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감.(별도의 요청, 실행대기, 보류 등과 관련된 코드)

비동기 작업을 동기적으로 보일 수 있도록 하는 장치

• promise : Promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 reslve또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음(then) 또는 오류 구문(catch)으로 넘어가지 않는다. 따라서 비동기 작업이 완료될 때 비로소 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능
• Generator : 비동기 작업이 완료되는 시점마다 next 메서드를 호출해준다면 Generator 함수 내부의 소스가 위에서부터 아래로 순차적으로 진행
• Promise + Async/await : 비동기 작업을 수행하고자 하는 함수 앞에 asyns를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise를 자동으로 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행합니다. 즉 Promise의 then과 흡사한 효과를 얻을 수 있음

[hyeonggyo]

4-5 콜백 지옥과 비동기 제어

• 콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 기능이 감당하기 힘들정도로 깊어지는 현상이다.

• 비동기는 동기의 반대말으로서 동기적인 코드는 현재 실행중인 코드가 완료된 후에야 다음 코드를 실행하는 방식이다.

• 가독성 문제와 코드의 어색함을 해결하기 위한 가장 간단한 방법은 일명의 콜백 함수를 모두 기명함수로 전환하는 것이다

• ES6 promise : new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백 함수는 호출할 떄 바로 실행되지만 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘중 하나가 실행되기 전까지는 다음 또는 오류 구문으로 넘어가지 않습니다.

• ES6 Generator : Generator 함수를 실행하면 interator가 반환되는데 interator가 가지고 있는 next 메서드를 호출하면 Generator 함수 내부에서 가장 먼저 등장하는 yield에서 함수의 실행을 멈춘다

• ES2017 async/await : 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행합니다

[KimHyeSeon]

콜백 지옥과 비동기 제어

콜백지옥

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상
• 자바스크립트에서 흔희 발생하는 문제
• 가독성이 떨어지고, 코드 수정이 어려움

비동기적인 코드

• 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감
• 별도의 요청, 실행 대기, 보류 등과 관련된 코드

ES6의 Promise를 이용한 방식

• new연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백 함수는 호출할 떄 바로 실행
• 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지 다음 또는 오류 구문으로 넘어가지 않음
• 비동기 작업이 완료될 때 비로소 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표헌이 가능함

ES6의 Generator

• Generator 함수를 실행하면 Iterator가 반환되는데, Iterator는 next라는 메서드를 가지고 있음
• 비동기 작업이 완료되는 시점마다 next 메서드를 호출해준다면 Generator함수 내부의 소스가 위에서부터 아래로 순차적으로 진행 됨

ES2017의 async/await

• 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행함

[eunzy38]

콜백 지옥과 비동기 제어

콜백 지옥

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상
• 자바스크립트에서 흔히 발생하는 문제
• 가독서이 떨어지고, 코드 수정하기 어려움

동기적 코드

• 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
• CPU 계산에 의해 즉시 처리 가능한 대부분의 코드

비동기적 코드

• 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감
• 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout), 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener), 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기하는 등(XMLHttpRequest), 별도의 요청, 실행 대기, 보류 등과 관련된 코드

[비동기 작업의 동기적 표현]

ES6의 Promise를 이용한 방식

• new연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행
• 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지 다음 또는 오류 구문으로 넘어가지 않음
• 비동기 작업이 완료될 때 비로소 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현 가능

ES6의 Generator를 이용한 방식

• Generator 함수를 실행하면 Iterator가 반환되는데 Iterator는 next라는 메서드를 가지고 있음
• 비동기 작업이 완료되는 시점마다 next 메서드를 호출해준다면 Generator함수 내부의 소스가 위에서부터 아래로 순차적으로 진행 됨

ES2017의 async/await 도입

• 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행함