December 21, 2020
๋ธ๋ผ์ฐ์ ์ ๋ํ์ ๋น๋๊ธฐ API ์ธ setTimeout ์ ํตํด ์์๋ณด์.
const printString = string => {
setTimeout(() => {
console.log(string)
}, Math.floor(Math.random() * 100) + 1)
}
const printAll = () => {
printString('A')
printString('B')
printString('C')
}
printAll() // what do you expect?
a, b, c ๋ฅผ ์์ฐจ์ ์ผ๋ก ์คํํ๋ค๊ณ ํด์ ๋์ค์ a, b, c ๊ฐ ๋๋๋ ์์ ์ด ๋ค๋ฅผ ์ ์๋ค๋ ์ ์ด ๋น๋๊ธฐ์ ํน์ง์ด๊ธฐ์ ๊ฒฐ๊ณผ๋ฅผ ์์ธกํ ์ ์๋ค.
a - b - c ๋ก ๋์ฌ ์ ๋ ์์ง๋ง b - c - a ๋ฑ ๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ์ผ๋ง๋ ์ง ๋์ฌ ์ ์๋ค๋ ๊ฑฐ๋ค.
์ฆ ์ฝ๋ฐฑ ํ์ ์์๋๋ก ๋ค์ด์ค์ง ์์ ์ ์๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค.
๊ทธ๋ฐ๋ฐ ๋๋ ์์ฐจ์ ์ผ๋ก (abc ์์๋ก) ์ ์ดํ๊ณ ์ถ๋ค.
๋๋๋ฉด ๋์๊ฒ ์ ํํด์ค!
๋ฌด์จ ์ผ์ด ์ผ๋ง๋ ๊ฑธ๋ฆด์ง ๋ชจ๋ฅด์ง๋ง ์ด์ฐ๋๋ ๊ทธ๊ฑฐ ๋๋๋ฉด ์ด๊ฑฐ ์คํํด์ค ๊ฐ ์ฝ๋ฐฑ ์ ์๋ฏธ๋ผ ํ๋ค.
์์ ๋ค๋ฅด๊ฒ printString ์์ ๋๋ฒ์งธ ์ธ์๋ก callback ์ ๋ฐ๋๋ค.
const printString = (string, callback) => {
setTimeout(() => {
console.log(string)
callback()
}, Math.floor(Math.random() * 100) + 1)
}
const printAll = () => {
printString('A', () => {
printString('B', () => {
printString('C', () => {})
})
})
}
printAll() // now what do you expect?
์ด์ ๋ ์๋ฌด๋ฆฌ ์ณ๋ด๋ a-b-c ๊ฐ ์์๋๋ก ๋์จ๋ค.
์ฝ๋ฐฑ์ผ๋ก ๋ด๊ฐ ์ํ๋ ๋น๋๊ธฐ ํ์คํฌ์ธ printString ํจ์์ ์์๋ฅผ ์งํฌ ์ ์๊ฒ ๋๋ค.
์ฝ๋ฐฑ์ ์๋ฌ ํธ๋ค๋ง์ general ํ๊ฒ๋ ์ธ์ ๋งจ ์์๋ error ๋ฅผ ์ฃผ๊ณ ,
๋ค์ ์ธ์๋ก๋ data ๋ฅผ ๋ฃ๋ ํํ์ด๋ค.
// Callback error handling Design
const somethingGonnaHappen = callback => {
waitingUntilSomethingHappens()
if (isSomethingGood) {
callback(null, data)
}
if (isSomethingBad) {
callback(error, null)
}
}
// Usage
somethingGonnaHappen((err, data) => {
if (err) {
console.log('ERR!!')
return
}
return data
})
๋ฐฉ๊ธ์ ์ ์ดํด๋์ค ์ฝ๋๊ฐ ์คํ๋ฆฐํธ ๋ฌธ์ ํด๊ฒฐ์ ํฌ๊ฒ ๋์์ด ๋์๋ค.
์ฝ๋ ๊ฐ๋ ์ฑ์ด ์์ข์์ง๊ณ ๊ด๋ฆฌ๊ฐ ์์ข์์ง๋ค.
๊ทธ๋์ ๋ Promise ๋ผ๋ ๊ฒ ์๋ค.