[JS] 콜백지옥에서 벗어나기

먼저 동기와 비동기에 대해서 알아보자.

 

동기란, 어떤 작업을 실행할 때 그 작업이 끝나고 다음 작업을 수행하는 방식을 의미한다. 

이는 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다. 

비동기란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 

작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다. 

결국 비동기적이라는 말은 '동시에'라는 말과 비슷하다고 볼 수 있겠다.

이는 작업의 시간을 절약할 수 있다.

동기 방식으로 파일을 읽는다면 파일을 읽기 시작한 이후에 다음 코드를 실행하지 않고 파일이 읽혀지기를 기다린다. 

반면에 비동기 방식으로 파일을 읽는다면 파일을 읽는 작업이 실행되는 동안 다른 작업을 수행할 수 있다.

 

 

콜백지옥부터 체험해보자

 

function timer(time) {
  return new Promise((resolve) => setTimeout(() => resolve(time), time));
}

console.log('start');

timer(1000)
  .then((time) => {
    console.log('time:' + time);
    return timer(time + 1000);
  })
  .then((time) => {
    console.log('time:' + time);
    return timer(time + 1000);
  })
  .then((time) => {
    console.log('time:' + time);
    console.log('end');
  });

 

음... 나쁘지 않은 코드처럼 보이지만, 로직이 복잡하다 가정하면 매우 더러운 코드가 될 것 같다.

 

직접 실행시키면 아래와 같은 결과가 나온다.

 

 

 

조금 더 깔끔하게 작성하려면 어떻게 해야 할까?

 

async await을 사용해보자.

 

async function run() {
    console.log('start');
    var time = await timer(1000);
    console.log('time' + time);
    time = await timer(1000);
    console.log('time' + time);
    time = await timer(1000);
    console.log('time' + time);
    console.log('end');
  }

 

실행화면은 아까와 똑같다.

 

 

그렇다면 만약, 

 

console.log('parent start');
run();
console.log('parent end');

 

이렇게 실행시키면 어떻게 될까?

 

parent start가 먼저 출력되고, run이 실행되고 run 함수 안에 있는 것들이 모두 종료가 되면 parent end가 실행되기를 바란다.

 

 

그러나,

 

 

우리가 바랬던 대로 실행되는게 아니라,

위와 같이 실행되는 모습을 볼 수 있다.

 

우리가 바라던 실행순서를 보장하려면 어떻게 해야할까?

 

결국 똑같이 async await으로 감싸주면 된다.

 

async function run2() {
    console.log('parent start');
    await run();
    console.log('parent end');
  }

 

 

 

출처: 생활코딩