[Javascript] 콜백함수와 비동기 처리 part 2

😊 비동기 제어하기

1. Promise

MDN에서 설명하는 Promise는 다음과 같다.

 

"Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결괏값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다."

 

간단히 말하면 비동기 처리에서 사용하는 객체다.

setTimeout(function () { 
	console.log("one"); 
    setTimeout(function () { 
    	console.log("two"); 
        setTimeout(function () { 
        	console.log("three"); 
            setTimeout(function () { 
            	console.log("four"); 
            }, 1000); 
         }, 1000); 
     }, 1000); 
 }, 1000);

 

위와 같은 콜백 지옥에 빠진 코드를 Promise 객체를 사용해서 바꿔보겠다.

new Promise(function(resolve, reject){
  setTimeout(function() {
  	console.log("one");
    resolve();
  }, 1000);
})
.then(function(result) {
  return new Promise(function(resolve, reject){
    setTimeout(function() {
      console.log("two");
      resolve();
    }, 1000);
  })
})
.then(function(result) {
  return new Promise(function(resolve, reject){
  setTimeout(function() {
    console.log("three");
    resolve();
  }, 1000);
  })
})
.then(function(result) {
  setTimeout(function() {
  	console.log("four");
  }, 1000);
});  

대충 then()을 사용해서 코드를 분리한다는 걸 알 수 있다.

코드를 분리하니 콜백지옥에 빠졌을 때보다 가독성이 좋아졌다.

자, 그럼 본격적으로 프로미스에 대해서 알아보자.

프로미스 상태

Promise는 다음 중 하나의 상태를 가진다.

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

대기(pending)

new Promise(function(resolve, reject){

});

 

new Promise(executor) 함수를 실행하면 프로미스 객체가 생성되고 대기(pending) 상태가 된다.

Promise 생성자 함수는 매개변수로 콜백 함수를 받고, 콜백 함수는 매개변수로 2개의 함수(resolve, reject)를 받는다.

resolve 함수는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출하고,

reject 함수는 작업이 실패하여 오류의 원인을 반환할 때 호출한다.

이행(fulfilled)

new Promise(function(resolve, reject){
  setTimeout(function() {
  	console.log("one");
    resolve();
  }, 1000);
})
.then(function(result) {
    setTimeout(function() {
      console.log("two");
    }, 1000);
});

 

resolve 함수를 실행하면 이행(fulfilled) 상태가 된다.

이행(fulfilled) 상태가 되면 then 메서드가 있는 경우, 반환된 프로미스는 then 메서드를 따라가서 결과값을 받을 수 있다.

따라서 위 코드를 실행하면 1초 간격으로 아래와 같은 결과가 출력된다.

one
two

거부(rejected)

new Promise(function(resolve, reject){
 	reject("error");
})
.then(function(value) {
 // 이행상태
 console.log(value);
}, function(error) {
 // 거부상태
 console.log(error);
});

 

resolve 함수를 실행하면 거부(rejected) 상태가 된다.

따라서, 위 코드를 실행하면 아래와 같은 결과가 출력된다.

error

 

다른 방법으로 catch를 사용해서 에러를 핸들링 할 수 있다.

new Promise(function(resolve, reject){
  reject("error");
})
.then(function(value) {
  console.log(value);
})
.catch(function(err) {
  console.log(err);
});
  

 

then을 사용해서 에러를 핸들링할 경우 오류를 제대로 잡지 못하는 경우가 발생하므로

가급적이면 catch를 사용하는게 좋다.

 

🙋‍♀️ 더 상세한 내용을 확인하고 싶다면 MDN을 참고하면 된다.

2. Generator

MDN에서 설명하는 Generator는 다음과 같다.

 

"Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다.

Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 Iterator 객체가 반환됩니다. Iterator의 next() 메서드를 호출하면 Generator 함수가 실행되어 yield 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환 값을 반환합니다. yield* 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.

이후 next() 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. next() 가 반환하는 객체는 yield문이 반환할 값(yielded value)을 나타내는 value 속성과, Generator 함수 안의 모든 yield 문의 실행 여부를 표시하는 boolean 타입의 done 속성을 갖습니다. next()를 인자 값과 함께 호출할 경우, 진행을 멈췄던 위치의 yield 문을  next() 메서드에서 받은 인자 값으로 치환하고 그 위치에서 다시 실행하게 됩니다."

 

이게 무슨 말인지 코드를 보면서 이해해 보자!

function* idMaker(){
  var index = 0;
  while(index < 3)
    yield index++;
}

 

필자는 위처럼 function* keyword를 사용해서 제너레이터 함수(Generator fucntion)를 정의했다.

var gen = idMaker();

 

그다음, idMaker()를 실행하면 제너레이터(Generator) 객체를 반환한다.

반환된 제너레이터(Generator) 객체를 gen 변수에 담는다.

※ Generator 객체는 generator function으로부터 반환된 값이며 반복자(Iterator)와 반복자 프로토콜을 준수한다.

console.log(gen.next().value); 
console.log(gen.next().value); 
console.log(gen.next().value); 
console.log(gen.next().value); 

 

next() 메서드가 실행되면 제너레이터 함수에서 yield문을 만날 때까지 실행됐다가 멈추고, 다시 next() 메서드가 실행되면 멈춘 곳에서 재시작한다.

따라서, 위 코드를 실행하면 아래와 같은 결과가 출력된다.

0
1
2
undefined

🙋‍♀️ 더 상세한 내용을 확인하고 싶다면 MDN 을 참고하면 된다.

3. async/await

MDN에서 설명하는 async는 다음과 같다.

 

"async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.

async 함수에는 await식이 포함될 수 있습니다. 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환합니다."

 

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

var samplePromise = function (value) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log(value);
      resolve();
    }, 1000);
  });
};

var sampleAsync = async function () {
  await samplePromise("one");
  await samplePromise("two");
  await samplePromise("three");
  await samplePromise("four");
};

sampleAsync();

필자는 위와 같이 콜백 지옥에 빠진 코드를 Promise + asyn/await 을 사용해서 변경했다.

 

🙋‍♀️ 더 상세한 내용을 확인하고 싶다면 MDN 을 참고하면 된다.

 

참고 자료

• MDN Promise
• 자바스크립트 Promise 쉽게 이해하기
• MDN function*
• MDN async function

 

---

 🎉 피드백은 언제나 환영입니다. 🎉

---