JS의 핵심! 혼프~ with setTimeout()&Promise

혼프는 혼자 프로젝트의 약자이다.

---

혼자 프로젝트 이름은 'delivery 누가 먼저 도착하나' 이다. setTimeout을 통한 비동기적 동작을 살펴보기 위해 만든 작업이다. 어려운 코드는 아니지만 간단하게 쉽게 볼 수 있다.

function delay(name) {

  //random time

  const ms = Math.floor(Math.random() * 11) * 1000

  console.log(`start ${name}!! delivery need ${ms / 1000}second`)

  return setTimeout(() => console.log(`${name} is Arrived! ${ms}`), ms);

}

delay('delivery1')

delay('delivery2')

delay('delivery3')

이렇게 작성하면 비동기적인 모습이 잘 나타나지 않는다.

위 결과만 보더라도 단순히 순차적으로 이행한 것 처럼보이지만  조금 더 생각해보면 전혀 그렇지 않다. 만약 우리가 비동기함수인 setTimeout을 사용하지 않았다러라면 하나의 큰 시간(증감)함수를 제작하고 그 안에서 random함수를 제작하고 이후 random함수에서 특정 값 변수를 받고 특정 random값을 받은 변수값을 기준으로 조건문(if,switch/case)문과 같은 조건을 만들어 해당 delivery가 각기 다른 도착 시간을 발생하게 만들 수 있을 것이다. 하지만 이것은 비동기가 아니다.

위 코드를 예시로 비동기를 설명하자면 첫 번째 delay('delivery1')함수가 호출되면서 비동기 함수인 setTimeout이 해당 카운트를 하기 시작한다. 그 사이에 두 번째 delay('delivery2')함수가  호출되면서 setTimeout이 해당 카운트를한다. (위의 함수가 동시에 시작했다 보기에 어렵다. JS는 순차적으로 코드를 파싱하기 때문이다.) 결과적으로 동시에 서로 다른 작업을 수행하고 있는 것이다. 

조금 더 이해를 돕기 위해 setInterval함수를 통해 setTimeout함수가 발동하고 있는 동시에 다른 작업이 동시에 이루어지고 있다는 것을 직관적으로 표현해 봤다. 

function delay(name) {

  //random time

  const ms = Math.floor(Math.random() * 11) * 1000

  console.log(`start ${name}!! delivery need ${ms / 1000}second`)

  return setTimeout(() => console.log(`${name} is Arrived! ${ms}`), ms);

}

 

let time = 0;

function checkTime() {

  time += 1;

  console.log(time);

  if (time === 10) { console.log("stop"); stop(); }

}

let isTime = setInterval(checkTime, 1000);

function stop() { clearInterval(isTime) }

delay('delivery1')

delay('delivery2')

delay('delivery3')

결과는 아래와 같다.

이제 비동기에 대한 개념은 확실하게 굳쳤을 것이라 본다. 위의 코드는 왼벽한 비동기 코드라고 보기엔 많이 부족하다. promise함수를 사용해 리팩토링해 더욱 비동기적인 코드를 만들어 보자.

참고로 setTimout은 콜백함수를 지정한 이후 일정 시간이 지난 후 해당 콜백 함수를 실행하는 자바스크립트 내장 함수 이다.

---

promise로 이루어진 코드는 아래와 같다.

랜덤값이 나오고 배달 승인 여부에 따라 res와 reject가 다르게 나오고 이에 따라 배달 시간 뿐만 아니라 배달의 승인 여부가 바뀌게 만든다. 0:은 강북구지역, 1: 노원구지역, 2: 강남구지역 등

let delivery = (name) => {

  let delay = Math.floor((Math.random() * 10) + 1) * 1000;//각 배달원이 할당 받아야할 시간

  let test = Math.floor((Math.random() * 10) + 1) * 1000;

  console.log(`start ${name}!! delivery need ${delay / 1000}second`)

  return new Promise(

    (resolve, reject) => {

      setTimeout(function () { resolve(`${name} is Arrived! ${delay} / ${test}`) }, delay)//

      console.log(`delay => ${delay}`);

    }

  )

}

let time = 0;

let isTime = setInterval(

  () => {//해당 함수 발동

    time += 1;

    console.log(time);

    if (time === 10) { console.log("stop"); stop(); }

  }, 1000);

//setInterval 제거 함수

function stop() { clearInterval(isTime) }

delivery('delivery1').then((done) => { console.log(done) });

delivery('delivery2').then((done) => { console.log(done) });

delivery('delivery3').then((done) => { console.log(done) });

여기서 나중에 다시 살펴보고 싶은 것은 것은 아래 코드와 같이 delay를 전역 변수 값으로 두었을 때와 값이 다르게 나오는 부분이다. 두 결과 값의 차이를 살펴 보자. chat gpt를 통해 답을 얻어 보았지만 완전히 이해가지 않았다.

let delay = 0;

let delivery = (name) => {

  delay = Math.floor((Math.random() * 10) + 1) * 1000;//각 배달원이 할당 받아야할 시간

  let test = Math.floor((Math.random() * 10) + 1) * 1000;

  console.log(`start ${name}!! delivery need ${delay / 1000}second`)

  return new Promise(

    (resolve, reject) => {

      setTimeout(function () { resolve(`${name} is Arrived! ${delay} / ${test}`) }, delay)//

      console.log(`delay => ${delay}`);

    }

  )

}

---

여기까지 setTimeout과 Promise를 활용한 비동기의 동작 원리를 파악해 보았다. 전반적으로 실행되는 방식을 이해했을 것이라 본다. 아쉽게도 Promise의 then구문과 sesolve 매개변수를 사용 해보았으나. catch와 reject 매개변수를 아직 다루어 보지 못했다. 차후에 이 포스팅에 추가해서 작성 해보겠다.

동기와 비동기의 개념과 차이

<비동기와 동기를 그림으로 쉽게 잘 설명한 글이다.>