[JAVASCRIPT] Promis(프로마이스), 비동기, 동기, 콜백, Async/Await

비동기 처리

자바스크립트의 비동기 처리란 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

 

비유로 이해하는 비동기적 방식

카페에서 주문을 하게되면 주문을 받고 제조되는 순서대로 커피를 받게 됩니다.은행 업무와 달리 먼저 주문한 사람의 커피가 다 제조될 때까지 다음 사람이 기다릴 필요가 없기 때문에 카페에 '들어온 순서'보다 먼저 '제조된 순서'가 중요하게 됩니다.

 

이처럼 연속적으로 발생하는 이벤트를 담은 후 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않는 것을 비동기적 방식이라고 합니다.

 

 

콜백함수

제어권을 대상에게 넘겨줍니다. 함수 a(getData)의 매개변수로 콜백함수 b(callback)를 전달하면, a(getData)가 b(callback)의 제어권을 갖게 됩니다. 특별한 요청(bind)가 없는 한 a(getData)에 미리 정해진 방식에 따라 b(callback)를 호출한다.

 

 

비유로 이해하는 콜백 함수 동작 방식

콜백 함수의 동장 방식은 일종의 식당자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수 도 있고 아니면 다른 식당 자리를 알아볼수도 있습니다.

 

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다.

 

 

Async/Await

자바스크립트 비동기처리패턴의 최신문법입니다. Promise와 callback에서 주는 단점들을 해결(에러처리, 비동기적 사고 방식에서 벗어나 코드의 절차적 작성)을 도와줍니다. 좀 더 동기적인 코드처럼 작성할 수 있게 만들어 줍니다.

 

Promise를 사용하지만 then, catch 메소드를 사용하여 컨트롤 하는 것이 아닌 동기적 코드처럼 반환 값을 변수에 할당하여 작성할 수 있게끔 도와주는 문법입니다.

 

 

Promise

Promise 객체를 사용하여 비동기 작업이(성공 혹은 실패) 완료된 후의 결과값을 받을 수 있습니다. 그래서 이후 처리를 쉽게 컨트롤 가능합니다. 그래서 이후 처리를 쉽게 컨트롤 가능합니다.

 

Promise는 함수를 인자로 받으며 인자로 들어온 함수는 다시 resolve(비동기 처리 성공)와 reject(비동기 처리 실패) 2개의 함수를 인자로 받게 된다. resolve 시 then 메소드, reject 시 catch 메소드의 인자로 넘어갑니다.

 

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

 

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

- 대기(pending): 이행하거나 거부되지 않은 초기 상태.

- 이행(fulfilled): 연산이 성공적으로 완료됨.

- 거부(rejected): 연산이 실패함.

 

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오릅ᄕᆘ. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건(race condition)은 없습니다.

 

Promise.prototype.then() 및 Promise.prototype.catch() 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

1) PromiseTest

 

const PromiseTest = () => {
    console.log("PromiseTest Start")
 
    const promise = new Promise(
        function (resolve, reject) {
            setTimeout(function () {
                console.log("Hello ")
                resolve();
            }, 2000)
        }
        // then 은 체인(chain)처럼 원하는 만큼 연결이 가능하다.
    ).then(function () {
        console.log("World!!!")
    }).then(function () {
        console.log("빠세!!!!")
    }).then(function () {
        console.log("훠우!!!")
    })
 
    // 밑에 처럼 따로 적어도 가능하다.
    promise.then(function () {
        console.log("난혼자논다!!!내가왕따시켰다!!")
    })
 
    promise.then(function () {
        console.log("이것도 연결되니?")
    })
 
    console.log("PromiseTest Fin")
 
    // 출력 :
    // PromiseTest Satrt
    // PromiseTest Fin
    // Hello
    // World!!!
    // 빠세!!!!
    // 훠우!!!
    // 난혼자논다!!!내가왕따시켰다!!
    // 이것도 연결되니??
    // Hello
    // World!!!
    // 빠세!!!!
    // 훠우!!!
    // 난혼자논다!!!내가왕따시켰다!!
    // 이것도 연결되니??
 
    // console.log 들이 먼저 실행되고, 후에 then으로 연결된
    // 코드들이 출력된다.
    return (
        <div className="PromiseTest">
            <p>PromiseTest</p>
        </div>
    )
}
 
export default PromiseTest

 

 

 

 

 

 

 

 

2) PromiseTest2

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            resolve("World!!!");
        }, 2000)
    }
)
 
promise.then(function (response) {
    console.log(response)
})
 
const PromiseTest2 = () => {
    console.log("PromiseTest2 Start")
 
    console.log("PromiseTest2 Fin")
 
    // 출력 :
    // PromiseTest2 Satrt
    // PromiseTest2 Fin
    // Hello
    // World!!!
 
    // promise 부분이 PromisTest2 밖에 선언되면
    // Hello World!!! 부분은 한번만 출력.
 
   return (
        <div className="PromiseTest2">
            <p>PromiseTest2</p>
        </div>
    )
}
 
export default PromiseTest2

 

 

 

 

 

 

 

 

3) PromiseTest3

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            // reject를 선언함으로써
            // catch가 작동함.
            reject("Error!")
        }, 2000)
    }
)
 
promise.then(function (response) {
    console.log("Success")
}).then(function (response) {
    console.log("진짜로 하나면 되냐?")
}).then(function (response) {
    console.log("진짠가?")
}).then(function (response) {
    console.log("진짜네")
}).catch(function (error) {
    console.log(error)
})
// catch를 붙히면 then을 몇개를
// 연결해도 하나로 해결가능하다.
 
// 출력 :
// PromiseTest3 Satrt
// PromiseTest3 Fin
// Hello
// Error
 
 
const PromiseTest3 = () => {
    console.log("PromiseTest3 Start")
 
    console.log("PromiseTest3 Fin")
 
    return (
        <div className="PromiseTest3">
            <p>PromiseTest3</p>
        </div>
    )
}
 
export default PromiseTest3

 

 

 

 

 

 

 

 

4) PromiseTest4

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            reject("Error!")
            //resolve("Wow!")
        }, 2000)
    }
)
 
promise.then(function (response) {
    console.log("Success")
}).catch(function (error) {
    console.log(error)
}).finally(() => {
    // fanally 를 할당하면 resolce, reject 상관
    // 없이 실행이 무조건 된다.
    console.log("나는 무조건 실행된다!!!")
})
 
// 출력 :
// PromiseTest4 Satrt
// PromiseTest4 Fin
// Hello
// Error
// 나는 무조건 실행된다!!!
 
const PromiseTest4 = () => {
    console.log("PromiseTest4 Start")
 
    console.log("PromiseTest4 Fin")
 
    return (
        <div className="PromiseTest4">
            <p>PromiseTest4</p>
        </div>
    )
}
 
export default PromiseTest4

 

 

 

 

 

 

 

 

5) PromiseTest5

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            resolve("World!")
        }, 2000)
    }
)
 
// resolve()는 promise.then
// reject()는 promise.catch
// finally는 무조건
promise.then(response =>
    console.log("Success")
).catch(function (error) {
    console.log(error)
}).finally(() => {
    console.log("PromiseTest5: 나는 무조건 실행된다!!!")
})
 
// 출력 :
// PromiseTest5 Satrt
// PromiseTest5 Fin
// Hello
// Sucdess
// PromiseTest5: 나는 무조건 실행된다!!!
 
const PromiseTest5 = () => {
    console.log("PromiseTest5 Start")
 
    console.log("PromiseTest5 Fin")
 
    return (
        <div className="PromiseTest5">
            <p>PromiseTest5</p>
        </div>
    )
}
 
export default PromiseTest5

 

 

 

 

 

 

 

 

6) PromiseTest6

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            resolve("World!")
        }, 2000)
    }
)
 
// resolve()는 promise.then
// reject()는 promise.catch
// finally는 무조건
promise.then(response =>
    console.log(response)
).then(response =>
    console.log("Success")
).catch(function (error) {
    console.log(error)
}).finally(() => {
    console.log("PromiseTest6: 나는 무조건 실행된다!!!")
})
 
// 출력 :
// PromiseTest6 Satrt
// PromiseTest6 Fin
// Hello
// World!
// Success
// PromiseTest6: 나는 무조건 실행된다!!!
 
const PromiseTest6 = () => {
    console.log("PromiseTest6 Start")
 
    console.log("PromiseTest6 Fin")
 
    return (
        <div className="PromiseTest6">
            <p>PromiseTest6</p>
        </div>
    )
}
 
export default PromiseTest6
 

 

 

 

 

 

 

 

 

7) PromiseTest7

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            resolve("World!")
        }, 2000)
    }
)
 
// response 사전적의미 : 대답, 응답, 회신, 답장.
promise.then(function (response) {
    console.log(response)
 
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("JavaScript Programming")
            resolve("~~!!~!")
        }, 1000)
    })
}).then(response =>
    console.log("Success")
).catch(function (error) {
    console.log(error)
}).finally(() => {
    console.log("PromiseTest7: 나는 무조건 실행된다!!!")
})
 
// 출력 :
// PromiseTest7 Satrt
// PromiseTest7 Fin
// Hello
// World!
// JavaScript Programing
// Success
// PromiseTest7: 나는 무조건 실행된다!!!
 
const PromiseTest7 = () => {
    console.log("PromiseTest7 Start")
 
    console.log("PromiseTest7 Fin")
 
    return (
        <div className="PromiseTest7">
            <p>PromiseTest7</p>
        </div>
    )
}
 
export default PromiseTest7
 

 

 

 

 

 

 

 

 

8) PromiseTest8

 

const promise = new Promise(
    function (resolve, reject) {
        setTimeout(function () {
            console.log("Hello ")
            resolve("World!")
        }, 2000)
    }
)
 
promise.then(function (response) {
    console.log(response)
 
    throw new Error("Error!!!")
}).then(response =>
    console.log("Success")
).catch(function (error) {
    console.log(error)
}).finally(() => {
    console.log("PromiseTest8: 나는 무조건 실행된다!!!")
})
 
// 출력 :
// PromiseTest8 Satrt
// PromiseTest8 Fin
// Hello
// World!
// Error : Error!!! at PromiseTest8.js:13
// PromiseTest8: 나는 무조건 실행된다!!!
 
const PromiseTest8 = () => {
    console.log("PromiseTest8 Start")
 
    console.log("PromiseTest8 Fin")
 
    return (
        <div className="PromiseTest8">
            <p>PromiseTest8</p>
        </div>
    )
}
 
export default PromiseTest8
 

 

 

 

 

 

 

 

 

9) PromiseParallelTest

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
plus(100, 200).then(function (response) {
    console.log("plus: " + response)
    return minus(100, 200)
}).then(function (response) {
    console.log("minus: " + response)
    return mult(100, 200)
}).then(function (response) {
    console.log("mult: " + response)
    return divide(100, 200)
}).then(function (response) {
    console.log("divide: " + response)
})
 
// 출력 :
// PromiseParallelTest Start
// PromiseParallelTest Fin
// 100 + 200 =
// plus: 300
// 100 - 200 =
// minus: -100
// 100 * 200 =
// mult: 20000
// 100 / 200 =
// dicid: 0.5
 
const PromiseParallelTest = () => {
    console.log("PromiseParallelTest Start")
 
    console.log("PromiseParallelTest Fin")
 
    return (
        <div className="PromiseParallelTest">
            <p>PromiseParallelTest</p>
        </div>
    )
}
 
export default PromiseParallelTest

 

 

 

 

 

 

 

 

10) PromiseParallelTest2

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
// all 은 전부 출력
Promise.all([
    plus(100, 200),
    minus(100, 200),
    mult(100, 200),
    divide(100, 200)
]).then(response => console.log(response))
 
// 출력 :
// PromiseParallelTest2 Start
// PromiseParallelTest2 Fin
// 100 / 200 =
// 100 * 200 =
// 100 - 200 =
// 100 + 200 =
// [300, -100, 20000, 0.5]
 
const PromiseParallelTest2 = () => {
    console.log("PromiseParallelTest2 Start")
 
    console.log("PromiseParallelTest2 Fin")
 
    return (
        <div className="PromiseParallelTest2">
            <p>PromiseParallelTest2</p>
        </div>
    )
}
 
export default PromiseParallelTest2
 

 

 

 

 

 

 

 

 

11) PromiseParallelTest3

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
// race 는 1개만 출
Promise.race([
    plus(100, 200),
    minus(100, 200),
    mult(100, 200),
    divide(100, 200)
]).then(response => console.log(response))
 
// 출력 :
// PromiseParallelTest3 Start
// PromiseParallelTest3 Fin
// 100 / 200 =
// 0.5
// 100 * 200 =
// 100 - 200 =
// 100 + 200 =
 
const PromiseParallelTest3 = () => {
    console.log("PromiseParallelTest3 Start")
 
    console.log("PromiseParallelTest3 Fin")
 
    return (
        <div className="PromiseParallelTest3">
            <p>PromiseParallelTest3</p>
        </div>
    )
}
 
export default PromiseParallelTest3
 
 

<

 

 

 

 

 

 

 

 

12) PromiseParallelTest4

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
async function asyncProcess() {
    // await는 async 함수 안에서만 동작합니다.
    // 자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될
    // 때까지 기다립니다. 결과는 그 이후 반환됩니다.
 
    // await('기다리다'라는 뜻)는 말 그대로 프라미스가 처리될 때까지 함수
    // 실행을 기다리게 만듭니다. 프라미스가 처리되면 그 결과와 함께 실행이
    // 재개됩니다. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일
    // (다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에,
    // CPU 리소스가 낭비되지 않습니다.
 
    // await 는 promise.then 보다 좀 더 세련된게 프라미스의 result 값을
    // 얻을 수 있도록 해주는 문법입니다. promise.then 보다 가독성 좋고
    // 쓰기도 쉽습니다. 즉, then 대신 사용하면 됩니다.
    const res1 = await plus(100, 200)
    console.log(res1)
   const res2 = await minus(100, 200)
    console.log(res2)
 
    const res3 = await mult(100, 200)
    console.log(res3)
 
    const res4 = await divide(100, 200)
    console.log(res4)
}
 
asyncProcess()
 
// 출력 :
// PromiseParallelTest4 Start
// PromiseParallelTest4 Fin
// 100 + 200 =
// 300
// 100 - 200 =
// -100
// 100 * 200 =
// 20000
// 100 / 200 =
// 0.5
 
const PromiseParallelTest4 = () => {
    console.log("PromiseParallelTest4 Start")
 
    console.log("PromiseParallelTest4 Fin")
 
    return (
        <div className="PromiseParallelTest4">
            <p>PromiseParallelTest4</p>
        </div>
    )
}
 
export default PromiseParallelTest4
 

 

 

 

 

 

 

 

 

13) PromiseParallelTest5

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
async function asyncProcess() {
    const p1 = plus(100, 200)
    const p2 = minus(100, 200)
    const p3 = mult(100, 200)
    const p4 = divide(100, 200)
 
    const res1 = await p1
    const res2 = await p2
    const res3 = await p3
    const res4 = await p4
 
    console.log(res1)
    console.log(res2)
    console.log(res3)
    console.log(res4)
}
 
asyncProcess()
// 출력부분에서 100 / 200 은 1초 ... 100 + 200 은 3초이기
// 때문에 밑에 순서처럼 출력이 됩니다. 비동기적으로 들어온 값들이
// 300 -100 20000 0.5 는 순차적으로 출력하게 만듬으로써
// 밑에 순서처럼 출력이 됩니다.
 
// 출력 :
// PromiseParallelTest5 Start
// PromiseParallelTest5 Fin
// 100 / 200 =
// 100 * 200 =
// 100 - 200 =
// 100 + 200 =
// 300
// -100
// 20000
// 0.5
 
const PromiseParallelTest5 = () => {
    console.log("PromiseParallelTest5 Start")
 
    console.log("PromiseParallelTest5 Fin")
 
    return (
        <div className="PromiseParallelTest5">
            <p>PromiseParallelTest5</p>
        </div>
    )
}
 
export default PromiseParallelTest5
 

 

 

 

 

 

 

 

 

14) PromiseParallelTest6

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
async function asyncProcess() {
    const [res1, res2, res3, res4] = await Promise.all(
        [
            plus(100, 200),
            minus(100, 200),
            mult(100, 200),
            divide(100, 200)
        ]
    )
 
    console.log(res1)
    console.log(res2)
    console.log(res3)
    console.log(res4)
}
 
asyncProcess()
 
// 출력 :
// PromiseParallelTest6 Start
// PromiseParallelTest6 Fin
// 100 / 200 =
// 100 * 200 =
// 100 - 200 =
// 100 + 200 =
// [300, -100, 20000, 0.5]
 
const PromiseParallelTest6 = () => {
    console.log("PromiseParallelTest6 Start")
 
    console.log("PromiseParallelTest6 Fin")
 
    return (
        <div className="PromiseParallelTest6">
            <p>PromiseParallelTest6</p>
        </div>
    )
}
 
export default PromiseParallelTest6
 

 

 

 

 

 

 

 

 

15) PromiseParallelTest7

 

function plus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 + num2
 
            console.log(num1 + " + " + num2 + " = ")
            resolve(res)
        }, 3000)
    })
}
 
function minus(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 - num2
 
            console.log(num1 + " - " + num2 + " = ")
            resolve(res)
        }, 2000)
    })
}
 
function mult(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 * num2
 
            console.log(num1 + " * " + num2 + " = ")
            resolve(res)
        }, 1500)
    })
}
 
function divide(num1, num2) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            var res = num1 / num2
 
            console.log(num1 + " / " + num2 + " = ")
            resolve(res)
        }, 1000)
    })
}
 
// function 앞에 async 를 붙이면 해당 함수는 항상 프라미스를 반환합니다.
// 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)
// 로 값을 감싸 이행된 프라미스가 반환되도록 합니다.
async function asyncProcess() {
    const res = await Promise.all(
        [
            plus(100, 200),
            minus(100, 200),
            mult(100, 200),
            divide(100, 200)
        ]
    )
 
    console.log(res)
}
 
asyncProcess()
 
// 출력 :
// PromiseParallelTest7 Start
// PromiseParallelTest7 Fin
// 100 / 200 =
// 100 * 200 =
// 100 - 200 =
// 100 + 200 =
// [300, -100, 20000, 0.5]
 
const PromiseParallelTest7 = () => {
    console.log("PromiseParallelTest7 Start")
 
    console.log("PromiseParallelTest7 Fin")
 
    return (
        <div className="PromiseParallelTest7">
            <p>PromiseParallelTest7</p>
        </div>
    )
}
 
export default PromiseParallelTest7
 

<

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어