December 21, 2020
๋น๋๊ธฐ์ ์์๋ฅผ ์ ์ดํ๋ Callback + ์ฝ๋ฐฑ ์ง์ฅ ๋ฒ์ด๋๊ธฐ ๋ฅผ ์์ ํ๊ธฐ ์ํ ํ ํฌ๋์ด ์๋ค.
๋ฐ๋ก โ์ฝ์โ ์ด๋ค.
์ฌ์ค ์ด์ ์ ๋๋ฆ ๋ถ๊พธ๋ฝ์ง๋ง ๋ธ๋ก๊น ํ ๋งํฌ๋ฅผ ๋ค์ ์ฌํํด ๋ณด์.
https://dev-seolleung2.netlify.app/development/Promise-Part-1/
https://dev-seolleung2.netlify.app/development/Promise-Part-2/
5ํธ๊น์ง ์ผ๋๋ฐ.. ์ผ์..
์๊น์ฒ๋ผ ์ฝ๋ฐฑ์ ์ธ์๋ฅผ ๋ฐ์ง ์๊ณ new Promise๋ฅผ ๋ฆฌํดํ๋๋ฐ ์๋ ์๋ง์ ์ฝ๋ฐฑ์ ๋ฐ๋๋ฐ,
resolve, reject ๋ผ๋ ์ธ์๋ฅผ ๋ฐ์ ๋ฃ๋๋ค.
callback ์ promise ๋ก ๋ฐ๊พผ ์ฝ๋๋ฅผ ๊ฐ์ ธ์๋ค.
const printString = string => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(string)
resolve()
}, Math.floor(Math.random() * 100) + 1)
})
}
const printAll = () => {
printString('A')
.then(() => {
return printString('B')
})
.then(() => {
return printString('C')
})
}
printAll()
printAll ํจ์์์ .then ์ผ๋ก ์ด์ด๊ฐ ์ ์๋ค.
์ฆ a ๊ฐ ํ๋ฆฐํธ๋์ด ๋์ค๋ฉด ๊ทธ๋ค์ .then ์ผ๋ก ๋ค์ task ๋ฅผ ์คํํ๋ค.
callback ์ ํตํ ๋น๋๊ธฐ ์ฒ๋ฆฌ์์๋ ์ฝ๋ฐฑ์ ์คํํ ๋๋ง๋ค ์๋ฌ ํธ๋ค๋ง์ ํด์ค์ผ ํ๋๋ฐ,
Promise ๋ฅผ ํตํ ๋น๋๊ธฐ ์ฒ๋ฆฌ์์๋ consumer ํจ์ (๋น๋๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ํจ์) ์์ ์ ์ผ ๋ง์ง๋ง ๋ถ๋ถ์๋ค .catch ๋ฅผ ํตํด ํ ๋ฒ๋ง ์ฒ๋ฆฌ๋ฅผ ํด ์ฃผ๋ฉด ์๋ฌ๋ฅผ ํธ๋ค๋ง ํ ์ ์๋ค.
return ์ฒ๋ฆฌ๋ฅผ ์ ํด์ฃผ์ง ์์์ ๋ ์๋์ ๊ฐ์ ํ๋ก๋ฏธ์ค ํฌ์ ๋ง๋ ์ ์๋ค.
ํฌ์ ๋ญ๋ค? ์ฝ๋ ๊ฐ๋ ์ฑ ํฌ์ด๋ค.
function gotoCodestates() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1. go to codestates')
}, Math.floor(Math.random() * 100) + 1)
})
}
function sitAndCode() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('2. sit and code')
}, Math.floor(Math.random() * 100) + 1)
})
}
function eatLunch() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('3. eat lunch')
}, Math.floor(Math.random() * 100) + 1)
})
}
function goToBed() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('4. goToBed')
}, Math.floor(Math.random() * 100) + 1)
})
}
gotoCodestates().then(data => {
console.log(data)
sitAndCode().then(data => {
console.log(data)
eatLunch().then(data => {
console.log(data)
goToBed().then(data => {
console.log(data)
})
})
})
})
return ์ฒ๋ฆฌ๋ฅผ ์ ํด์ฃผ๋ฉด ์ฝ๋๋ ์๋์ ๊ฐ์์ง๋ค.
function gotoCodestates() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1. go to codestates')
}, Math.floor(Math.random() * 100) + 1)
})
}
function sitAndCode() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('2. sit and code')
}, Math.floor(Math.random() * 100) + 1)
})
}
function eatLunch() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('3. eat lunch')
}, Math.floor(Math.random() * 100) + 1)
})
}
function goToBed() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('4. goToBed')
}, Math.floor(Math.random() * 100) + 1)
})
}
gotoCodestates()
.then(data => {
console.log(data)
return sitAndCode()
})
.then(data => {
console.log(data)
return eatLunch()
})
.then(data => {
console.log(data)
return goToBed()
})
.then(data => {
console.log(data)
})
๊ทธ๋๋ง ์ง์ฅ์์ ๋ฒ์ด ๋ฌ๋ค.
์ด๋ฐ Promise ์ ํ๊ณ(?)๋ฅผ ๋ณด์ํ syntactic sugar ๊ฐ ์๋๋ฐ,
๊ทธ๊ฒ ๋ฐ๋ก async ์ await ์ด๋ค.
async ์ await ๋น๋๊ธฐ ์ฒ๋ฆฌ์ด์ง๋ง ๋๊ธฐ์ ์ธ ์ฒ๋ฆฌ์ฒ๋ผ ๋ณด์ด๊ฒ ํ๋ค.
ํํ ์์ฒด๋ฅผ ๋๊ธฐ์ ์ผ๋ก ์ธ ์ ์์ด์ ์ฝ๋ ๊ฐ๋ ์ฑ์ด ์ข์์ง๋ค.
function gotoCodestates() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1. go to codestates')
}, Math.floor(Math.random() * 100) + 1)
})
}
function sitAndCode() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('2. sit and code')
}, Math.floor(Math.random() * 100) + 1)
})
}
function eatLunch() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('3. eat lunch')
}, Math.floor(Math.random() * 100) + 1)
})
}
function goToBed() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('4. goToBed')
}, Math.floor(Math.random() * 100) + 1)
})
}
const result = async () => {
const one = await gotoCodestates()
console.log(one)
const two = await sitAndCode()
console.log(two)
const three = await eatLunch()
console.log(three)
const four = await goToBed()
console.log(four)
}
result()
https://dev-seolleung2.netlify.app/development/Promise-Part-5/
์ ์ธ์ ๋ ๋ธ๋ก๊ทธ๋ฅผ ์์ฑํ๋ด..(?!)
์ฐธ๊ต์ก ๋นํ์ง ์๊ฒ ์ด์ฌํ ์ ๊ณต๋ถํ์.