오늘 배운 것

Asynchronous JavaScript

• 자바스크립트(JavaScript)는 싱글 스레드(Single Thread)이다. 즉 컴퓨터가 여러 개의 CPU를 가지고 있어도 Main Thread라 불리는 단일 Thread에서만 작업이 실행된다.
• 별도의 다른 처리를 하지 않는다면, 작성한 모든 코드는 Main Thread에서 순차적으로 실행될 것이다.
• 콜백 함수를 이용한 비동기 코드 처리에 대해서는 지난 포스팅에서 알아보았다.
• 이번에는 Promise와 Async를 이용해 비동기적으로 자바스크립트를 사용하는 방법에 대해 알아본다.

2. Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

Promise 객체를 만들면서 객체가 성공했을 때와 실패했을 때의 결과 값을 설정해주면, 프로미스의 상태에 따라 .then()이나 .catch() 메소드를 이용해 값을 받을 수 있다.

.then(), catch()와 같은 메소드들은 프로미스를 리턴하기 때문에 이어서 chaining 할 수 있다.

//지난번 callback 함수를 promise를 사용해 바꾸어 보았다.
const printMessage = (message) => {
    return new Promise((resolve, reject) => {
//함수에서는 return new Promise()를 이용해 프로미스를 생성할 수 있다.
      setTimeout(
        () => {
         console.log(message)
         resolve()
        }, 
       Math.floor(Math.random() * 100)
      )
    })
  }
//프로미스는 Pending,Fulfilled,Rejected의 세 가지 상태가 존재한다.
//프로미스 생성자의 매개변수에는 executor 실행 함수가 있고,
//이 실행함수는 resolve와 reject 파라미터를 인자로 가지고 있다.
//프로미스가 이행(Fulfilled)하면 resolve를 호출해 값을 전달하고
//프로미스가 거절(Rejected)하면 reject를 호출해 값을 전달한다.

const printAllMessage = () => {
    printMessage("1")
    .then(() => {
      return printMessage("2")
    })
    .then(() => {
      return printMessage("3")
    })
}
//.then() 메소드는 이행된 프로미스의 resolve 값을 파라미터로 받는다.
//printString 프로미스 생성자에서 resolve 값으로 아무것도 반환하지 않으므로,
//.then()에서의 파라미터도 따로 표현하지 않았다.


printAllMessage()
//1->2->3
//콜백함수를 중첩해서 사용하는 것 보다 깔끔하게 표시가 가능하다.

//promise hell
//하지만 promise도 과도하게 중첩해 사용하면 이러한 hell에 빠질 수도 있다.

function startVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('1. start Vacation') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndPoop() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('2. eat and poop') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndSleep() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('3. eat and sleep') }, Math.floor(Math.random() * 100))
    })
}
 
function endVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('4. end Vaction') }, Math.floor(Math.random() * 100))
    })
}
 
startVaction()
.then(data => {
    console.log(data)
 
    eatAndPoop()
    .then(data => {
        console.log(data)
 
        eatAndSleep()
        .then(data => {
            console.log(data)
            
            endVaction()
            .then(data => {
                console.log(data)
        
            })
        })
    })
})

//promise chaining
//return을 활용해 가독성있게 chaining 할 수 있다.

function startVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('1. start Vacation') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndPoop() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('2. eat and poop') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndSleep() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('3. eat and sleep') }, Math.floor(Math.random() * 100))
    })
}
 
function endVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('4. end Vaction') }, Math.floor(Math.random() * 100))
    })
}
 
startVaction()
.then(data => {
    console.log(data)
    return eatAndPoop()
})
.then(data => {
    console.log(data)
    return eatAndSleep()
})
.then(data => {
    console.log(data)
    return endVaction()
})
.then(data => {
    console.log(data)
})

3. Async & Await

**async function** 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다.

async 함수에는 await식이 포함될 수 있다.

await 식은 async함수의 실행을 일시중단시키고, Promise가 fulfill되거나 reject되기를 기다리고, 다시 async함수를 실행시킨다. 이때 await 문의 값은 Promise 에서 fulfill된 값이 됩니다.

await 키워드는 async 함수에서만 유효하다.

function startVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('1. start Vacation') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndPoop() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('2. eat and poop') }, Math.floor(Math.random() * 100))
    })
}
 
function eatAndSleep() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('3. eat and sleep') }, Math.floor(Math.random() * 100))
    })
}
 
function endVaction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('4. end Vaction') }, Math.floor(Math.random() * 100))
    })
}
 
const result = async () => {
    const one = await startVaction();
    console.log(one)
 
    const two = await eatAndPoop();
    console.log(two)
 
    const three = await eatAndSleep();
    console.log(three)
 
    const four = await endVaction();
    console.log(four)
}
 
result();