๋ฐ˜๋ณต๋ฌธ์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜๊ธฐ (for, map, async, await)

๋ฌด๋”์šด ์—ฌ๋ฆ„(?)์—” ์ŠคํŒŒํด๋ง ์™€์ธ๊ณผ ๊ฐœ๋ฐœ์„...

๋ฐ˜๋ณต๋ฌธ์—์„œ ๋น„๋™๊ธฐ๋ฅผโ€ฆ

์ตœ๊ทผ ๊ฐœ๋ฐœ ์ผ์ • ๋ฐ ๊ฐœ์ธ ์‚ฌ์ •์œผ๋กœ ์ธํ•ด ํฌ์ŠคํŒ…์„ ์ „ํ˜€ ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค.
๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ๋Š” ์ผ์ƒ์ด๋‚˜ ๊ฐ€๋ฒผ์šด ์†Œ์žฌ๋ผ์„œ ๋ง‰ ์“ธ์ˆ˜ ์žˆ์ง€๋งŒ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋Š”โ€ฆ

์•„๋ฌด๋ ‡๊ฒŒ๋‚˜ ๋ง‰ ์‹ธ์ง€๋ฅด๋Š” ๊ณต๊ฐ„๋„ ์•„๋‹ˆ๊ณ , ๋‹ค๋ฅธ ์˜ˆ์ œ ๋ณต๋ถ™ํ•˜๋Š”๊ฑฐ๋Š” ์ •๋ง ์‹ซ์–ดํ•ด์„œโ€ฆ
๊ทธ๋ž˜์„œ ๋” ๋ฏธ๋ฃจ์ง€ ์•Š์•˜๋‚˜ ์‹ถ๋‹ค. ใ…Žใ…Ž

ํ‘์šฐ์ง‘ํ•ฉ์†Œ ํŒจ์น˜ ๋‚ด์—ญ์ด๋‚˜ ๊ฐœ๋ฐœํ•œ ๊ฑธ TIL ์ชฝ์— ์˜ฌ๋ฆฌ๋ ค๋‹ค๊ฐ€ ์ด์ œ๋Š” ๋”ฐ๋กœ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋นผ์•ผ ํ•  ๋“ฏ ์‹ถ๋‹ค.
์ด๊ฒƒ๋„ ๋งŽ์ด ๋ฐ€๋ ธ๋Š”๋ฐ ์–ธ์ œ ์ ๋Š”์ง€โ€ฆ

๋ฌดํŠผโ€ฆ
ํ‰ํ™”๋กญ๊ฒŒ(?) ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๊ฐ€ ๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜๋‹ค๊ฐ€ ์กฐ๊ธˆ ๋ง‰ํžŒ ๋ถ€๋ถ„์ด ์žˆ์—ˆ๋‹ค.
์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ทธ ๋ฌธ์ œ, ๊ทธ๋ฆฌ๊ณ  ์กฐ์‚ฌ, ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์„ ๊ณต์œ ํ•˜๊ณ ์ž ํฌ์ŠคํŒ…์„ ๋‚จ๊ฒจ๋ณธ๋‹ค.

๋ฐ˜๋ณต๋ฌธ์—์„œ ๋น„๋™๊ธฐ๋ฅผ ์“ธ ๋•Œ

์ผ๋ฐ˜์ ์œผ๋กœ ๋ฐ˜๋ณต๋ฌธ ๋‚ด์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๋“œ๋ฌผ๊ฒŒ ์žˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ํŠน์ • ํŒŒ๋ผ๋ฉ”ํ„ฐ๋ฅผ ๊ฐ€์ง€๋Š” url์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํฌ๋กค๋งํ•˜๊ฑฐ๋‚˜,
๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ฝ‘์•„์˜ค๋Š”๋“ฑโ€ฆ ๋ช‡ ๊ฐ€์ง€ ์ผ€์ด์Šค๊ฐ€ ์žˆ๋‹ค.

๊ทผ๋ฐ while์ด๋‚˜ for ๋“ฑ๊ณผ ๊ฐ™์€ ๊ณ ์ „ํŒŒ ๋ฐฉ์‹์ธ ๋ฐ˜๋ณต ์ˆœํšŒ์—์„œ๋Š” ๋น„๋™๊ธฐ๊ฐ€ ์ž˜ ๋™์ž‘ํ•œ๋‹ค.
ํ•˜์ง€๋งŒ ๊ณ ์ฐจํ•จ์ˆ˜(้ซ˜ๆฌกๅ‡ฝๆ•ธ)์˜ map, filter, foreach๋“ฑ์—์„œ๋Š” ์ด ๋น„๋™๊ธฐ๊ฐ€ ์ƒ๊ฐํ•œ ๋Œ€๋กœ ํ˜๋Ÿฌ๊ฐ€์ง€ ์•Š๋Š”๋‹ค.

์™œ ๊ทธ๋Ÿฐ๊ฑธ๊นŒ?


๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ถ€ํ„ฐ ์‹œ์ž‘

๊ทธ๋ƒฅ ๊ธ‰์กฐํ•œ ์˜ˆ์ œ ์ฝ”๋“œ๋‹คโ€ฆ
์™€์ธ์˜ ์žฌ๊ณ ๋ฅผ ์ฐพ๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•ด๋ณด์ž.
(์—ฌ๋‹ด์ธ๋ฐ ๋–ผ๋•…์ ธโ€ฆ 6๋งŒ์› ๋ฐ–์— ์•ˆํ•˜๋Š”๋ฐ ์ •๋ง ๋ง›์žˆ๋‹ค.)

๊ทธ๋ฆฌ๊ณ  ์•„๋ž˜ ์ฝ”๋“œ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ”Œ๋ ˆ์ด๊ทธ๋ผ์šด๋“œ์—์„œ ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋‹ค.
๋งŒ์•ฝ ์ง์ ‘ typescript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค๋ฉด ์ผ๋ถ€ ์ฝ”๋“œ์— awaitํ‚ค์›Œ๋“œ๋ฅผ ๋ถ™์—ฌ์•ผ ํ•œ๋‹ค.

async function Run() {
  //์™€์ธ ์ˆ˜๋Ÿ‰ ์ €์žฅ ์Šคํ† ์–ด
  const wineStore: { [key: string]: number } = {
    taittinger: 10, //๋–ผ๋•…์ ธ๋Š” 10๊ฐœ
    piper_heidsieck: 12, //ํŒŒ์ดํผ ํ•˜์ด์ง์€ 12๊ฐœ
    andre_clouet: 21, //์•™๋“œ๋ ˆ ๋Œ๋ฃจ์—๋Š” 21๊ฐœ
    opus_one: 5, //์˜คํผ์Šค์›์€ 5๊ฐœ
    pounamu: 31, //ํ‘ธ๋‚˜๋ฌด๋Š” 31๊ฐœ
  }

  //์ฐพ๋Š” ์‹œ๊ฐ„
  const findTime = (ms: number) => {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  //์™€์ธ ๊ฒ€์‚ฌ
  const checkWineCnt = async (wineName: string): Promise<number> => {
    const ms = Math.floor(Math.random() * (3 - 1 + 1) + 1) * 1000
    console.log('find start... during ms = ', ms)
    const cnt = await findTime(ms).then(v => wineStore[wineName])
    console.log('[' + wineName + '] count = ' + cnt)
    console.log('find end... ')
    return cnt
  }

  checkWineCnt('opus_one')
}

Run()

findTime ํ•จ์ˆ˜๋Š” 1~3์ดˆ ๋žœ๋ค์œผ๋กœ ์ฐพ๋Š” ์‹œ๊ฐ„์„ ๋ฐ€๋ฆฌ์„ธ์ปจ์œผ๋กœ ์ƒ์„ฑํ•œ๋‹ค.
checkWineCnt ํ•จ์ˆ˜๋Š” ์ „๋‹ฌ๋ฐ›์€ ์™€์ธ ์ด๋ฆ„์œผ๋กœ ๋ช‡๊ฐœ๊ฐ€ ์žˆ๋Š”์ง€ ์กฐํšŒ๋ฅผ ํ•œ๋‹ค.

ํ˜„์‹ค์€ ๊ทธ๋ƒฅ ์™€์ธ์…€๋Ÿฌ ์—ด๊ณ  ๊บผ๋‚ด๋ฉด ๋˜์ง€๋งŒ -_-;;
๋ญ ๊ทธ๋ƒฅ ์ƒ˜ํ”Œ ์˜ˆ์ œ๋‹ˆ๊นŒโ€ฆ๋„˜ ์–ต๊นŒ๋ผ ํ•ด๋„ ์–‘ํ•ด ๋ฐ”๋ž€๋‹ค.

๋ฌดํŠผ ์ด๋ ‡๊ฒŒ ๋ฐ˜๋ณต๋ฌธ์„ ์•ˆ์“ฐ๋Š” ์˜ˆ์ œ์—์„œ ์‹œ์ž‘ํ•ด๋ณด๊ฒ ๋‹ค.
๋งŒ์•ฝ ์Šคํ† ์–ด์— ์žˆ๋Š” ๋ชจ๋“  ์™€์ธ์„ ์กฐํšŒํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ํ•˜๋‹จ์— ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

async function Run() {
  const wineList: string[] = Object.keys(wineStore)

  const runFunc = async () => {
    for (let i = 0; i < wineList.length; i++) {
      await checkWineCnt(wineList[i])
    }
  }

  searchAllFunc()
}

Run()

์ด๋ ‡๊ฒŒ ํ•  ๊ฒฝ์šฐ ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•œ ๋Œ€๋กœ ๋™์ž‘์„ ํ•œ๋‹ค.


ForEach

๊ทผ๋ฐ for๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•œ ๋Œ€๋กœ ์ž˜ ๋™์ž‘ํ•˜์ง€๋งŒ, ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ์ž‘์—…์„ ํ•˜๋ฉด ๋‹ค๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ๋œ๋‹ค.
์œ„์™€ ๊ฐ™์€ ์ž‘์—…์„ ๊ณ ์ฐจํ•จ์ˆ˜์ธ foreach๋กœ ๋ฐ”๊พธ๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

async function Run() {
  const wineList: string[] = Object.keys(wineStore)

  wineList.forEach(async (item: string) => await checkWineCnt(item))
}

Run()

์ด๋ ‡๊ฒŒ ํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

์ „ํ˜€ ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.
์ด์œ ๋Š” ๊ฐ„๋‹จํ•˜๋‹ค.

๊ณ ์ฐจํ•จ์ˆ˜์ธ ForEach๋Š” ๋น„๋™๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๋Š”๋‹ค.
์ข€ ๋” ์ •ํ™•ํžˆ ์ด์•ผ๊ธฐ ํ•˜๋ฉด ForEach๋Š” Promise๋ฅผ ์ธ์ง€ํ•˜์ง€ ๋ชปํ•œ๋‹ค.


How to solve?

๋ญ ๊ฐ„๋‹จํ•˜๋‹ค.

  1. For loop๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
  2. For of๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

1๋ฒˆ์€ ๋งจ ์ฒ˜์Œ ์˜ˆ์ œ์—์„œ ์‚ฌ์šฉํ•œ ๋ฐฉ์‹์ด๊ณ , 2๋ฒˆ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

async function Run() {
  const forOfLoop = async () => {
    for (const [value] of wineList) {
      await checkWineCnt(value)
    }
  }
  forOfLoop()
}

Run()

๋ญ ์ข€ ์–ต์ง€์Šค๋Ÿฝ๊ธด ํ•œ ์ฝ”๋“œ์ธ๋ฐ, ์ดํ•ด๋ฅผ ๋•๋Š” ์ฝ”๋“œ์ด๋‹ˆ ๋„˜์–ด๊ฐ€์ž.
์‚ฌ์‹ค ์ œ์ผ ์ข‹์€ ๊ฑด 1๋ฒˆ์ธ ๊ฒƒ ๊ฐ™๋‹ค.

๊ตณ์ด ๋น„๋™๊ธฐ ๋ฃจํ”„ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋กœ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ , ๊ทธ๋ƒฅ ๊ทธ ์ž๋ฆฌ์—์„œ For๋ฅผ ์‹œ์ „ํ•˜๋ฉด ๋˜๋‹ˆ๊นŒ?
์ทจํ–ฅ๊ป ์“ฐ์ž.


Map

์ด๋ฒˆ์—” ์™€์ธ์˜ ์ด๋ฆ„๊ณผ ์ˆ˜๋Ÿ‰์„ ๋ฌธ์ž์—ด๋กœ ํ•ฉ์ณ์„œ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž.
๊ฒฐ๊ณผ๋ฌผ์„ ๋ฐฐ์—ด์ด๊ณ , ์•ˆ์—๋Š” ์™€์ธ๋ช…-์ˆ˜๋Ÿ‰ ์ด๋ผ๋Š” ํ˜•ํƒœ๋กœ ๊ฐ„๋‹ค๊ณ  ํ•˜์ž.

์˜ˆ๋ฅผ ๋“ค๋ฉด [taittinger-10, โ€œpiper_heidsieck-12โ€โ€ฆ] ์ด๋ ‡๊ฒŒ ๋ง์ด๋‹ค.

๊ทธ๋Ÿผ ๊ณ ์ฐจํ•จ์ˆ˜์ธ Map์„ ํ™œ์šฉํ•ด์„œ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์ž.

async function Run() {
  const wineList: string[] = Object.keys(wineStore)

  const result = wineList.map(async (item: string, idx: number) => {
    const cnt = await checkWineCnt(wineList[idx])
    return item + '-' + cnt
  })

  console.log('result = ', result)
}

Run()

์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋Š” ์•„๋งˆ checkWineCntํ•จ์ˆ˜๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ฉด์„œ find start end ๋งจํŠธ๊ฐ€ ๊ฐ๊ฐ ๋œจ๊ณ ,
๊ทธ ๋‹ค์Œ ๋งˆ์ง€๋ง‰์œผ๋กœ result์˜ ์ฝ˜์†” ๊ฒฐ๊ณผ๊ฐ€ ์ถœ๋ ฅ๋˜๊ธธ ์›ํ•  ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ ๊ฒฐ๊ณผ๋Š”โ€ฆ


๊ทธ๋ฆฌ๊ณ  ์ค‘๊ฐ„์— ๋กœ๊ทธ๋ฅผ ๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

"result = ",  [Promise: {}, Promise: {}, Promise: {}, Promise: {}]

๊ทธ๋ ‡๋‹ค.
์ „๋ถ€ Promiseํ˜•ํƒœ๋กœ ๋œ ๋ฐฐ์—ด์ด ์žˆ๋‹ค.
์ฆ‰ Map๋„ ๋น„๋™๊ธฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜์ง€ ๋ชปํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.

๋ฌผ๋ก  ์–˜๋Š” Promise๊ฐ€ ์™”์œผ๋‹ˆ ํ•ด๊ฒฐํ•  ๋ฐฉ๋ฒ•์€ ์žˆ๋‹ค.


How to solve?

async function Run() {
  const wineStore: { [key: string]: number } = {
    taittinger: 10,
    piper_heidsieck: 12,
    andre_clouet: 21,
    opus_one: 5,
  }

  const findTime = (ms: number) => {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  const checkWineCnt = async (wineName: string): Promise<number> => {
    const ms = Math.floor(Math.random() * (3 - 1 + 1) + 1) * 1000
    console.log('find start... during ms = ', ms)
    const cnt = await findTime(ms).then(v => wineStore[wineName])
    console.log('[' + wineName + '] count = ' + cnt)
    console.log('find end... ')
    return cnt
  }

  const wineList: string[] = Object.keys(wineStore)

  const mapResult = wineList.map(async (item: string, idx: number) => {
    const cnt = await checkWineCnt(wineList[idx])
    return item + '-' + cnt
  })

  const callPromiseAll = async () => {
    const data = await Promise.all(mapResult)
    console.log('data = ', data)
    return data
  }

  callPromiseAll()
}

Run()

์œ„ ์ฝ”๋“œ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ณด๋ฉด checkWineCntํ•จ์ˆ˜์˜ ์‹คํ–‰์€ ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์ง€๋งŒ, ๊ฒฐ๊ณผ๋Š” ์ œ๋Œ€๋กœ ๋‚˜์˜จ๋‹ค.


Filter

์ด๋ฒˆ์—” ์ˆ˜๋Ÿ‰์ด 20๊ฐœ ์ด์ƒ์ธ ์™€์ธ๋งŒ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

async function Run() {
  const wineStore: { [key: string]: number } = {
    taittinger: 10,
    piper_heidsieck: 12,
    andre_clouet: 21,
    opus_one: 5,
  }

  const findTime = (ms: number) => {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  const checkWineCnt = async (wineName: string): Promise<number> => {
    const ms = Math.floor(Math.random() * (3 - 1 + 1) + 1) * 1000
    console.log('find start... during ms = ', ms)
    const cnt = await findTime(ms).then(v => wineStore[wineName])
    console.log('[' + wineName + '] count = ' + cnt)
    console.log('find end... ')
    return cnt
  }

  const wineList: string[] = Object.keys(wineStore)

  const filterResult = wineList.filter(async (item: string, index: number) => {
    const cnt = await checkWineCnt(wineList[index])
    return cnt >= 20
  })

  console.log('filterResult = ', filterResult)
}
Run()

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•™๋“œ๋ ˆ ๋Œ๋ฃจ์—๋งŒ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋˜์–ด์•ผ ํ•œ๋‹ค.
๊ทผ๋ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์ „์ฒด ๋‹ค ๋ฐ˜ํ™˜๋œ๋‹ค.

 "filterResult = ",  ["taittinger", "piper_heidsieck", "andre_clouet", "opus_one"]

์ด์œ ๋Š” ์ด๊ฒƒ๋„ Map๊ณผ ๋น„์Šทํ•œ๋ฐfilter์˜ ์ฝœ๋ฐฑ์€ Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ์ด๋Š” ์–ธ์ œ๋‚˜ true๋กœ ์ธ์ •๋œ๋‹ค.
๊ทธ๋ž˜์„œ ์ „์ฒด ๋‹ค ๋ฐ˜ํ™˜๋˜๋Š” ๊ฒƒ์ด๋‹ค.

์–˜๋Š” ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์•ฝ๊ฐ„ ์ฝ”๋“œ๊ฐ€ ๋„ˆ์ €๋ถ„ํ•ด์ง€๋Š”๋ฐ map์„ ์‚ฌ์šฉํ•ด์„œ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.


How to solve?

์•„๋ž˜๋Š” ํ•ด๊ฒฐ ์ฝ”๋“œ๋‹ค.

async function Run() {
  const wineStore: { [key: string]: number } = {
    taittinger: 10,
    piper_heidsieck: 12,
    andre_clouet: 21,
    opus_one: 5,
  }

  const findTime = (ms: number) => {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  const checkWineCnt = async (wineName: string): Promise<number> => {
    const ms = Math.floor(Math.random() * (3 - 1 + 1) + 1) * 1000
    console.log('find start... during ms = ', ms)
    const cnt = await findTime(ms).then(v => wineStore[wineName])
    console.log('[' + wineName + '] count = ' + cnt)
    console.log('find end... ')
    return cnt
  }

  const wineList: string[] = Object.keys(wineStore)

  const promiseWineList = wineList.map(
    async (item: string, index: number) => await checkWineCnt(wineList[index])
  )
  const cntWineList = await Promise.all(promiseWineList) //[10, 12, 21, 5]

  const filterResult = wineList.filter((item: string, index: number) => {
    const cnt = cntWineList[index]
    return cnt >= 20
  })

  console.log('filterResult = ', filterResult)
}

Run()

๊ทธ๋Ÿผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ถœ๋ ฅ๋œ๋‹ค.

์ฝ”๋“œ๊ฐ€ ์•ฝ๊ฐ„ ์ง€์ €๋ถ„ํ•ด์ง€๋Š”๋ฐ ์ฒ˜๋ฆฌ๋Š” ๋œ๋‹ค.


reduce

์ด๋ฒˆ์—” ์ € ์™€์ธ๋“ค์˜ ์ˆ˜๋Ÿ‰์„ ๋ชจ๋‘ ํ•ฉ์น˜๋Š” ๊ฒƒ์„ ํ•ด๋ณด๋ ค ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž.
๋ญ ๊ทธ๋ƒฅ for๋ฌธ ์‚ฌ์šฉํ•ด์„œ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ณ ์ฐจํ•จ์ˆ˜ ์ค‘ reduce๋ผ๋Š” ๊ฒƒ์„ ์“ฐ๋ฉด ๋” ํŽธํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.
์•„๋ž˜๋Š” ์™€์ธ ์ดํ•ฉ์„ ๊ตฌํ•˜๋Š” reduce๋ฅผ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋‹ค.

const sum0 = await wineList.reduce(async (sum: number, item: string) => {
  const cnt = await checkWineCnt(item)
  return (await sum) + cnt
}, 0)

๊ทผ๋ฐ ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๋ฉด typescript ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒƒ์ด๋‹ค.

thumbnail


๋ญ”๊ฐ€ ์žฅํ™ฉํ•œ ์—๋Ÿฌ๊ฐ€ ์žˆ๋Š”๋ฐ ๊ทธ๋ƒฅ ์‰ฝ๊ฒŒ ์ƒ๊ฐํ•˜๋ฉด sum : number๋ผ๋Š” ๊ฒƒ์— ์žˆ๋‹ค.
async ํ•จ์ˆ˜๊ฐ€ ๋˜๋Š” ์ˆœ๊ฐ„ ๋ฐ˜ํ™˜์€ Promise๊ฐ’์œผ๋กœ ์˜จ๋‹ค.

์ €๊ธฐ reduce ํ•จ์ˆ˜์˜ ์ฒซ ์ธ์ž๋Š” ๋ฐ˜ํ™˜ ๊ฐ’์ธ๋ฐ ๋ณด๋ฉด ์Ž™์œผ๋กœ number๋กœ ๋˜์–ด ์žˆ๋‹ค.
๋˜ํ•œ ์ดˆ๊ธฐ ๊ฐ’๋„ Promise๊ฐ€ ์•„๋‹Œ 0์œผ๋กœ ๋˜์–ด ์žˆ๋‹ค.
๊ทธ๋ž˜์„œ ์ € ๋ถ€๋ถ„์„ ๊ณ ์น˜๋ฉดโ€ฆ

const sum = await wineList.reduce(
  async (sum: Promise<number>, item: string) => {
    const cnt = await checkWineCnt(item)
    return (await sum) + cnt
  },
  Promise.resolve(0)
)

์ด๋ ‡๊ฒŒ ๋ฐ”๊พธ๋ฉด ์ด์ œ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ์ด ๋œ๋‹ค.

์œ„ ์ฝ”๋“œ๊ฐ€ typescript๋ผ์„œ ๋ฏธ์—ฐ์— ๋ฐฉ์ง€๊ฐ€ ๋œ๊ฑฐ๋‹ค.
๋งŒ์•ฝ javascript๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋”๋ผ๋ฉด ์ด์ƒํ•œ Promise๋ž‘ ๊ฒน์ณค์„ ๊ฒƒ์ด๋‹ค.

์ •๋ฆฌ

์ง€๊ธˆ๊นŒ์ง€ ๊ณ ์ฐจํ•จ์ˆ˜์˜ ์ผ๋ถ€์—์„œ ๋น„๋™๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฌธ์ œ์ ๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ดค๋‹ค.
์•ฝ๊ฐ„ ์–ต๊นŒ ์˜ˆ์ œ๊ฐ€ ์ข€ ์žˆ์—ˆ์ง€๋งŒโ€ฆ ๋ฌธ์ œ์˜ ๋ณธ์งˆ๊ณผ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ์ถฉ๋ถ„ํžˆ ์ „๋‹ฌ๋˜์—ˆ์„๊ฑฐ๋ผ ๋ฏฟ๋Š”๋‹ค.

๋‹ค์‹œํ•œ๋ฒˆ ์ •๋ฆฌํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. foreach๋Š” ๋น„๋™๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์—†๊ธฐ์— ๋‹ค๋ฅธ ๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•˜์ž.
  2. map์€ Promise ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๊ธฐ์— Promise.all()์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฒ˜๋ฆฌํ•˜์ž.
  3. filter๋Š” map ๋“ฑ์œผ๋กœ ์ฒ˜๋ฆฌ ํ›„ Promise.all()๋กœ ๊ฐ’์„ ๋ณ€ํ™˜ํ•œ ํ›„ ์‚ฌ์šฉํ•˜์ž.
  4. reduce๋Š” typescript ์‚ฌ์šฉ์œผ๋กœ ๋ฏธ์—ฐ์— ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ฐ˜ํ™˜ ๊ฐ’์˜ Promise๋ฅผ ์ž˜ ์‚ฌ์šฉํ•˜์ž.

์ด์ •๋„๋กœ๋งŒ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ์ž˜ ์“ธ์ˆ˜ ์žˆ๋‹ค.
๊ทผ๋ฐ ๋ชจ๋ฅด๋ฉด ๊ทธ๋ƒฅ GPTํ•œํ…Œ ์˜ˆ์ œ๋ฅผ ๋ณด์—ฌ๋‹ฌ๋ผ๊ณ  ํ•˜์ž.
๊ทธ๋ ‡๋‹ค๊ณ  ์šด์˜์ฝ”๋“œ๋ฅผ ์˜ฌ๋ฆฌ์ง„ ๋ง๊ณ โ€ฆ


Written by@MHLab
๋กœ๋˜๋Š” ํ‘์šฐ์ง‘ํ•ฉ์†Œ ๐ŸŽฒ
์™€์ธ๊ด€๋ฆฌ, ์‹œ์Œ๋…ธํŠธ, ์…€๋Ÿฌ๊ด€๋ฆฌ๋Š” ๋งˆ์™€์…€ ๐Ÿฅ‚

๐Ÿซฅ My Service| ย ๐Ÿ“œ Contact| ย ๐Ÿ’ป GitHub