Promise Async/Await setTimeout

for (let i = 0; i < 5; i++) {
	
}

function wait(i) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(i);
    }, i * 100);
  });
}

위와 같이 코드를 작성한 경우가 굉장히 많다.
그런데 부족한 점들이 많은 코드다.

코드명은 wait인데 그러면 무엇인가를 기다려야 할 것 같다는 느낌을 준다. 그런데 사실상 이 함수의 맥락은 콘솔도 찍고 다른 일을 한다.

function wait(ms) {
	return new Promise((resolve) => {
      setTimeout(resolve, ms);
  });
}

wait(100).then();

await wait(100);

리팩토링을 할 때에는 무엇이 나아졌느냐?를 생각하면 된다.

const writeNumber = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 100);
  }).then(function(data) {
    console.log(data);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(2);
      }, 100);
    })
  }).then(function(data) {
    console.log(data);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(3);
      }, 100);
    })
  }).then(function(data) {
    console.log(data);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(4);
      }, 100);
    })
  }).then(function(data) {
    console.log(data);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(5);
      }, 100);
    })
  });
};

나의 경우에는 이렇게 작성했다.
그리고 받은 피드백은, 1단계 리팩토링 결과가 원본에 비해 낫다고 생각하는지?

콜백패턴 -> Promise 패턴 -> Async/await 패턴

• 모두 알아야 함.
• 최근 프로젝트를 할 때에는 무조건 async await 써야 함.
• 라이브 코딩을 볼 때에도 다양한 시나리오들을 물어볼 수 있다. 이렇게 하면 어떻게 될까요? 이런 식으로. 꼭 잘 알아야 한다!

Promisify를 써서 콜백 패튼을 구현한다.
흠.. 꼭 해봐야겠다..