๐Ÿ‘จ๐Ÿปโ€๐Ÿš’Asynchronous JavaScript(2) - Callback

๐ŸŽ๋น„๋™๊ธฐ์˜ ์ˆœ์„œ๋ฅผ ์ œ์–ดํ•˜๋Š” Callback

๋ธŒ๋ผ์šฐ์ €์˜ ๋Œ€ํ‘œ์  ๋น„๋™๊ธฐ 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 ์ˆœ์„œ๋กœ) ์ œ์–ดํ•˜๊ณ  ์‹ถ๋‹ค.

๐ŸฅฐCallback : A way to handle Asynchronous

๋๋‚˜๋ฉด ๋‚˜์—๊ฒŒ ์ „ํ™”ํ•ด์ค˜!

๋ฌด์Šจ ์ผ์ด ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆด์ง€ ๋ชจ๋ฅด์ง€๋งŒ ์–ด์ฐŒ๋๋˜ ๊ทธ๊ฑฐ ๋๋‚˜๋ฉด ์ด๊ฑฐ ์‹คํ–‰ํ•ด์ค˜ ๊ฐ€ ์ฝœ๋ฐฑ ์˜ ์˜๋ฏธ๋ผ ํ•œ๋‹ค.

์œ„์™€ ๋‹ค๋ฅด๊ฒŒ 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 ํ•จ์ˆ˜์˜ ์ˆœ์„œ๋ฅผ ์ง€ํ‚ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

๐Ÿš€Callback error handling Design

์ฝœ๋ฐฑ์˜ ์—๋Ÿฌ ํ•ธ๋“ค๋ง์€ 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
})

๋ฐฉ๊ธˆ์˜ ์œ ์–ดํด๋ž˜์Šค ์ฝ”๋“œ๊ฐ€ ์Šคํ”„๋ฆฐํŠธ ๋ฌธ์ œ ํ•ด๊ฒฐ์— ํฌ๊ฒŒ ๋„์›€์ด ๋˜์—ˆ๋‹ค.

๐Ÿ‘บ๋‹จ์  : Callback HELL

์ฝ”๋“œ ๊ฐ€๋…์„ฑ์ด ์•ˆ์ข‹์•„์ง€๊ณ  ๊ด€๋ฆฌ๊ฐ€ ์•ˆ์ข‹์•„์ง„๋‹ค.

๊ทธ๋ž˜์„œ ๋˜ Promise ๋ผ๋Š” ๊ฒŒ ์žˆ๋‹ค.


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook