JavaScript 학습 가이드: 콜백 문제_기본 지식

콜백 지옥

JavaScript 프로그래머의 경우 콜백을 처리하는 것이 일반적이지만 너무 깊은 콜백을 처리하는 것은 그다지 아름답지 않습니다. 다음 샘플 코드 조각은 세 가지 계층의 콜백을 사용합니다. 전설적인 콜백 지옥입니다.

getDirectories(function(dirs) {
  getFiles(dirs[0], function(files) {
    getContent(files[0], function(file, content) {
      console.log('filename:', file);
      console.log(content);
    });
  });
});
 
function getDirectories(callback) {
 setTimeout(function() {
  callback(['/home/ben']);
 }, 1000);
}
 
function getFiles(dir, callback) {
  setTimeout(function() {
    callback([dir + '/test1.txt', dir + '/test2.txt']);
  }, 1000)
}
 
function getContent(file, callback) {
  setTimeout(function() {
    callback(file, 'content');
  }, 1000)
}

솔루션

블루버드, Q 등 콜백 지옥 문제를 처리할 수 있는 비동기 솔루션이 생태계에 많이 있습니다. 이 기사에서는 ECMAScript 6/7 사양의 비동기 프로그래밍 지원에 중점을 둡니다.

ES6의 약속

Promise는 비동기 프로그래밍에 대한 솔루션이자 콜백 지옥 문제를 해결하는 강력한 도구입니다.

Promise는 2007년 Dojo 프레임워크에 dojo.Deferred 함수가 추가되면서 JavaScript 생태계의 주류에 의해 승인되었습니다. dojo.Deferred의 인기와 함께 2009년 Kris Zyp는 CommonJS Promises/A 사양을 제안했습니다. 그 후 Q.js, FuturesJS 등을 포함하여 수많은 Promise 구현이 생태계에 나타났습니다. 물론 Promise의 인기는 주로 jQuery의 존재에 기인하지만 jQuery는 CommonJS Promises/A 사양을 완전히 준수하지 않습니다. 보시다시피 ES 6 사양에는 약속이 포함되어 있습니다.
MDN은 Promise를 다음과 같이 설명합니다.

Promise 개체는 값을 반환하는 프록시입니다. 이 반환 값은 Promise 개체가 생성될 때 알려지지 않을 수 있습니다. 비동기 작업의 성공 또는 실패에 대한 처리 방법을 지정할 수 있습니다. 이를 통해 비동기 메서드는 동기 메서드와 마찬가지로 값을 반환할 수 있습니다. 비동기 메서드는 원래 반환 값이 포함된
을 반환합니다. 다음 코드는 Promise를 통해 구현된 "Callback Hell" 섹션의 예입니다. 코드가 그다지 간결해 보이지는 않지만 기존 계층적 콜백에 비해 크게 개선되었으며 코드 유지 관리 및 가독성이 더 좋습니다.

getDirectories().then(function(dirs) {
  return getFiles(dirs[0]);
}).then(function(files) {
  return getContent(files[0]);
}).then(function(val) {
  console.log('filename:', val.file);
  console.log(val.content);
});
 
function getDirectories() {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
    resolve(['/home/ben']);
   }, 1000);
  });
}
 
function getFiles(dir) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve([dir + '/test1.txt', dir + '/test2.txt']);
    }, 1000);
  });
}
 
function getContent(file) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve({file: file, content: 'content'});
    }, 1000);
  });
}

ES6 제너레이터

Promise의 구현은 충분히 간단하지 않습니다. 또한 더 나은 옵션이 필요하며 co는 옵션 중 하나입니다. co는 Generator 기반의 비동기 흐름 컨트롤러입니다. co를 이해하기 전에 먼저 Generator를 이해해야 합니다. C#에 익숙한 학생이라면 C# 버전 2.0에 반복 생성기에 대한 Yield 키워드가 도입되었다는 점을 알아야 합니다. ES 6 Generator는 C#과 유사하며 Yield 구문 설탕을 사용하고 내부적으로 상태 머신을 구현합니다. 구체적인 사용법은 MDN 문서의 기능* 섹션을 참조하세요. 원리는 Generator에 대한 심층적인 이해를 위해 AlloyTeam 팀 블로그를 참조하세요. co를 사용하면 ES6 Generator와 ES6 Promise를 교묘하게 결합하여 비동기 호출을 더욱 조화롭게 만들 수 있습니다.

co(function* (){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
});

co는 매우 영리합니다. 일반적인 아이디어는 상태가 완료될 때까지 생성기의 재귀 순회를 사용하는 것입니다.

runGenerator();
 
function* run(){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}
 
function runGenerator(){
  var gen = run();
 
  function go(result){
    if(result.done) return;
    result.value.then(function(r){
      go(gen.next(r));
    });
  }
 
  go(gen.next());
}

ES7 비동기/대기

ES6 Generator는 실제로 매우 훌륭하지만 안타깝게도 타사 라이브러리의 지원이 필요합니다. 좋은 소식은 ES 7이 비동기 호출 문제를 완벽하게 해결하기 위해 Async/Await 키워드를 도입한다는 것입니다. 글쎄요, .net은 한발 앞서 있습니다. .net Framework 4.5는 이를 지원하는 데 앞장섰습니다.
앞으로 작성될 코드는 다음과 같습니다.

run();
async function run() {
  var dirs = await getDirectories();
  var files = await getFiles(dirs[0]);
  var contentVal = await getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}

결론

고전적인 콜백 비동기 프로그래밍 방법부터 ES6 Promise 사양의 비동기 프로그래밍 개선, ES Generator와 결합된 우아한 처리, 그리고 마지막으로 ES7 async/await의 완벽한 결말까지 이러한 기능이 ECMAScript에 나타나는 이유와 어떤 문제가 해결되었는지, JavaScript 비동기 프로그래밍의 발전 추세를 더욱 명확하게 볼 수 있습니다.