๊ธ€ ์ž‘์„ฑ์ž: ํƒ์‹œ ์šด์ „์‚ฌ
๋ฐ˜์‘ํ˜•

๐Ÿถ ๋ฆฌ์•กํŠธ(React)๋ฅผ ์ด์šฉํ•ด ์ด๋ชจ์ง€ ๋น™๊ณ ๊ฒŒ์ž„ ๋งŒ๋“ค๊ธฐ ๐Ÿถ

๋…ธ๋งˆ๋“œ ์ฝ”๋” ์Šฌ๋ž™์„ ๋‘˜๋Ÿฌ๋ณด๋˜ ์ค‘, ๋น™๊ณ  ๊ฒŒ์ž„์„ ๊ณผ์ œ๋กœ ๋งŒ๋“œ์‹œ๋˜ ๋ถ„์ด ๋น™๊ณ  ๊ฒ€์ฆ์— ๋Œ€ํ•œ ๊ตฌํ˜„์„ ์งˆ๋ฌธํ•˜์…จ๋‹ค. ์ฒ˜์Œ์—๋Š” Codesandbox์— ๋Œ์•„๊ฐ€๋Š” ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ณด์—ฌ๋“œ๋ฆฌ๋ฉด ์–ด๋–จ๊นŒ ์ƒ๊ฐํ•˜๋‹ค๊ฐ€, "๋‚ด ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋กœ ์ข‹์„ ๊ฒƒ ๊ฐ™์€๋ฐ?"๋ผ๋Š” ์ƒ๊ฐ์— ๋ฐ”๋กœ ๋‹น์ผ ๋น™๊ณ ๊ฒŒ์ž„ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ๋‹ค.

์ปดํฌํ„ดํŠธ(Component)ํ™”

์‹œ์ž‘ํ•˜๊ธฐ์— ์•ž์„œ ์ƒ๊ฐ๋‚ฌ๋˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ฐ”๋กœ ๋ฆฌ์•กํŠธ ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์ œ๊ณตํ•˜๋Š” ํŠœํ† ๋ฆฌ์–ผ์ธ ํ‹ฑํƒํ†  ๊ฒŒ์ž„์ด์—ˆ๋‹ค. Board์™€ Squrare๋กœ ์ปดํฌ๋„ŒํŠธํ™” ๋˜์–ด์žˆ๋˜๊ฒŒ ๋น™๊ณ ์— ์ ์šฉํ•˜๊ธฐ ๋”ฑ์ด์˜€๊ณ , ๋˜‘๊ฐ™์ด Board์™€ Square๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ง„ํ–‰ํ–ˆ๋‹ค.

ํ•จ์ˆ˜๊ตฌํ˜„

๋น™๊ณ ์—์„œ ๊ตฌํ˜„ํ•ด์•ผํ•  ํ•จ์ˆ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

1. ํŠน์ • ์นธ ํด๋ฆญ์‹œ ํ•ด๋‹น ์นธ์˜ ์ƒํƒœ๊ฐ€ ๋ณ€ํ•˜๋Š” ํ•จ์ˆ˜
2. ์ „์ฒด ํŒ์„ ํ™•์ธํ•˜์—ฌ ๋น™๊ณ ์˜ ๊ฐฏ์ˆ˜๋ฅผ ์ฒดํฌํ•˜๋Š” ํ•จ์ˆ˜

๊ทธ๋ฆฌ๊ณ  ๋‚˜๋Š” ๋งค ์‹œํ–‰๋งˆ๋‹ค ํŒ์˜ ๊ตฌ์„ฑ์ด ๋ณ€ํ•˜๊ธฐ๋ฅผ ์›ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํŒ์— ๋“ค์–ด๊ฐ€๋Š” ์š”์†Œ๋“ค์„ ์„ž๋Š” ์…”ํ”Œ ํ•จ์ˆ˜๊นŒ์ง€ ๊ตฌํ˜„ํ–ˆ๋‹ค.

1. ํŠน์ • ์นธ ํด๋ฆญ์‹œ ํ•ด๋‹น ์นธ์˜ ์ƒํƒœ ๋ณ€ํ™” ํ•จ์ˆ˜ / handleOnClickSquare

handleOnClickSquare = (row: number, col: number) => {
  // ํ˜„์žฌ matrix์˜ ๋ฐ์ดํ„ฐ ๊ฐ€๊ณตํ•˜๊ธฐ
  const prevMatrix = this.state.matrix;
  prevMatrix[row].splice(col, 1, {
    ...prevMatrix[row][col],
    check: !prevMatrix[row][col].check
  });
  this.setState({ matrix: prevMatrix });
};

์˜์™ธ๋กœ ์ดˆ๋ฐ˜๋ถ€ํ„ฐ ์• ๋ฅผ ๋จน์—ˆ๋˜ ๋ถ€๋ถ„์ด๋‹ค. prevMatrix[row][col].check = !prevMatrix[row][col].check์ด๋Ÿฐ์‹์œผ๋กœ ๋  ์ค„ ์•Œ์•˜์ง€๋งŒ, ์ „ํ˜€ ์•„๋‹ˆ์˜€๋‹ค. ๋ฐฐ์—ด ์•ˆ์—์„œ์˜ ๋ฐ์ดํ„ฐ ์กฐ์ž‘์€ ๋ฐ˜๋“œ์‹œ splice๋ฅผ ์ด์šฉํ•ด์•ผํ•œ๋‹ค. splice์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ๋ฐฐ์—ด์˜ ๋ณ€๊ฒฝ์„ ์‹œ์ž‘ํ•˜๋Š” ์ธ๋ฑ์Šค์ธ start, ์ œ๊ฑฐํ•  ์š”์†Œ์˜ ์ˆ˜๋ฅผ ๊ฒฐ์ •์ง“๋Š” deleteCount, ๋Œ€์ฒดํ•  ์š”์†Œ์— ํ•ด๋‹น๋˜๋Š” item์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

2. ์ „์ฒด ํŒ์„ ํ™•์ธํ•˜์—ฌ ๋น™๊ณ ์˜ ๊ฐฏ์ˆ˜๋ฅผ ์ฒดํฌํ•˜๋Š” ํ•จ์ˆ˜ / checkBingo

checkBingo = () => {
    const { size } = this.props;
    const { matrix } = this.state;
    let totalBingo = 0;
    // row
    for (let i = 0; i < size; i++) {
      if (matrix[i].reduce((bingo, square) => bingo && square.check, true)) totalBingo++;
    }
    // column
    for (let i = 0; i < size; i++) {
        let bingo = true;
        for (let j = 0; j < size; j++) {
            bingo = bingo && matrix[j][i].check;
        }
        if (bingo) totalBingo++;
    }
    // diagnal
    let diagnalBingoOne = true;
    let diagnalBingoTwo = true;
    for (let i = 0; i < size; i++) {
        diagnalBingoOne = diagnalBingoOne && matrix[i][size - i - 1].check;
        diagnalBingoTwo = diagnalBingoTwo && matrix[i][i].check;
    }
    if (diagnalBingoOne) totalBingo++;
    if (diagnalBingoTwo) totalBingo++;
    return totalBingo;
};

๋น™๊ณ ๋Š” 3๊ฐ€์ง€ ๋ฐฉํ–ฅ์œผ๋กœ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋‹ค. ๊ฐ€๋กœ, ์„ธ๋กœ, ๊ทธ๋ฆฌ๊ณ  ๋Œ€๊ฐ์„ . ํ•ด๋‹น ํ•จ์ˆ˜์—์„œ๋Š” ๊ฐ๊ฐ์„ ํ™•์ธํ•˜์—ฌ ๊ฐฏ์ˆ˜๋ฅผ ํŒŒ์•…ํ•œ๋‹ค. ๊ฐ€๋กœ ๋ฐ์ดํ„ฐ์˜ ๋น™๊ณ  ์—ฌ๋ถ€์˜ ํ™•์ธ์„ ์œ„ํ•ด์„œ๋Š” ๋ฐฐ์—ด์˜ ๋ฉ”์†Œ๋“œ์ธ reduce๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. reduce๋Š” ๋ฐฐ์—ด์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ›‘์œผ๋ฉด์„œ ๊ฐ ๋ฐ์ดํ„ฐ๋“ค์„ ์ด์šฉํ•ด ์ ์ง„์  ์—ฐ์‚ฐ์„ ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ด๋‹ค. ์—ฌ๊ธฐ์—์„  ๊ฐ€๋กœ ํ•œ ์ค„์—์„œ ์นธ๋งˆ๋‹ค์˜ check ๊ฐ’์„ and ์—ฐ์‚ฐํ•ด๊ฐ€๋ฉด์„œ, ์ตœ์ข… ๊ฐ’์ด true์ผ ์‹œ ๋น™๊ณ  ๊ฐฏ์ˆ˜๋ฅผ ๋Š˜๋ฆฌ๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ–ˆ๋‹ค. ์„ธ๋กœ ๋ฐ์ดํ„ฐ์˜ ๋น™๊ณ ์—ฌ๋ถ€๋Š”, ์ข€ ๋” ๋ณต์žกํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜์ ์ธ for-loop๋ฅผ ๋‘ ๋ฒˆ ์จ์„œ ๊ตฌํ˜„ํ–ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด ํ•ด๋‹น ํ–‰๋ ฌ์„ 90๋„ ํšŒ์ „ํ•œ ํ–‰๋ ฌ์„ ๊ตฌํ•ด์„œ ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๊ฒ ์ง€๋งŒ, ์‹œ๊ฐ„๋„ ๋” ๋งŽ์ด ๊ฑธ๋ฆฌ๊ณ  ๊ทธ๋‹ค์ง€ ๋งˆ์Œ์— ๋“ค์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์ด๋ผ ๊ธฐ์กด ๋ฐฉ์‹๋Œ€๋กœ ์งฐ๋‹ค. ๋Œ€๊ฐ์„ ์€ ๋น™๊ณ ํŒ์—์„œ 2๊ฐ€์ง€๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ์— ๋Œ€ํ•œ ํ•จ์ˆ˜๋„ ๊ตฌํ˜„ํ–ˆ๋‹ค.

3. ์…”ํ”Œ ํ•จ์ˆ˜ / shuffle

์…”ํ”Œ ํ•จ์ˆ˜๋Š” ๊ณผ๊ฑฐ <๋” ๋งŽ์ด ๋” ์ ๊ฒŒ>์˜ ํ‚ค์›Œ๋“œ๋ฅผ ์…”ํ”Œํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์žฌ์‚ฌ์šฉํ–ˆ๋‹ค.

shuffle = (a: any) => {
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() \* (i + 1));
      \[a\[i\], a\[j\]\] = \[a\[j\], a\[i\]\];
    }
    return a;
};

๊ทธ๋‹ค์ง€ ์–ด๋ ต์ง€ ์•Š๊ฒŒ, ๊ต‰์žฅํžˆ ์งง๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ถœ์ฒ˜: https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array

๊ทธ๋ฆฌ๊ณ ... ์ด๋ชจ์ง€๐Ÿ˜Ž

์ˆซ์ž๋Š” ๋„ˆ๋ฌด ์‹์ƒํ•˜๊ณ , ์นธ ๋‚ด๋ถ€ ๋‚ด์šฉ์„ ์‚ฌ์šฉ์ž๊ฐ€ ์ž์œ ๋กญ๊ฒŒ ์ž‘์„ฑ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋ คํ–ˆ๋Š”๋ฐ ๊ตฌํ˜„ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๊ธธ๊ธฐ๋„ ํ•˜๊ณ  ์™„์„ฑ๋ฌผ์ด ์ด์˜์ง€๋„ ์•Š์„ ๊ฒƒ ๊ฐ™์•„์„œ ๊ฐ„๋‹จํ•˜๊ณ  ์ด์œ ๊ฒŒ ๋ญ๊ฐ€ ์žˆ์„๊นŒ ์ƒ๊ฐํ•˜๋‹ค๊ฐ€ ์ด๋ชจ์ง€๋ฅผ ๋„ฃ์–ด๋ดค๋‹ค! ๊ฒฐ๊ณผ๋Š” ๋Œ€๋งŒ์กฑ, ๋ฐฉ๋ฒ•์€ ์ข€ ๋ฌด์‹ํ•˜๋‹ค. ์ด๋ชจ์ง€ ์‚ฌ์ดํŠธ์—์„œ ๋งˆ์Œ์— ๋“œ๋Š” ์ด๋ชจ์ง€๋“ค์„ ํ•œ ๋ฐฐ์—ด์— ์ €์žฅํ•˜์—ฌ, ์…”ํ”Œ ํ›„ ๋ฟŒ๋ ค์ฃผ๋Š” ๋ฐฉ์‹์ด๋‹ค. ํ•˜์ง€๋งŒ ์ž˜ ๋Œ์•„๊ฐ€๋‹ˆ ์ƒ๊ด€์—†๋‹ค ๐Ÿคฃ

cf. ์ด๋ชจ์ง€์˜ ๊ฒฝ์šฐ OS ๋ณ„๋กœ OS๊ฐ€ ๊ฐ™์•„๋„ ๋ฒ„์ „๋ณ„๋กœ ๋ณด์ด๋Š” ๋ฐฉ์‹์ด ์ฒœ์ฐจ๋งŒ๋ณ„์ด๋‹ค. ์–ด๋””์„  ๋ณด์ด๋˜๊ฒŒ ์–ด๋””์„  ์•ˆ ๋ณด์ด๊ณ , PC์—์„  ์ด๋ปค๋Š” ๋ฐ, ๋ชจ๋ฐ”์ผ๋กœ ๋ณด๋‹ˆ ์ด์ƒํ•ด์ง€๊ณ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์ด๋ชจ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๊ฒฝ์šฐ ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ด๋‹ค.

๊ทธ๋ž˜์„œ ๋งŒ๋“ค์–ด์ง„ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ฐ”๋กœ ์ด๋ชจ์ง€ ๋น™๊ณ (Emoji Bingo)์ด๋‹ค. ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ€์ˆ˜๋กœ ๋‘ฌ์„œ ์ด๋ชจ์ง€์˜ ์ตœ๋Œ€ ๊ฐฏ์ˆ˜์— ๋งž์ถฐ 12X12 ํฌ๊ธฐ๊นŒ์ง€ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ ๊ตฌํ˜„์‹œ ์•ฝ๊ฐ„์˜ ๊ผผ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ๋ชจ๋“  ๋ฐ์ดํ„ฐ ๋ฐฐ์—ด ๊ณผ์ •์ด Board์˜ constructor์—์„œ ํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋ƒฅ ์‚ฌ์ด์ฆˆ๋งŒ ๋ณ€ํ™˜ํ•˜๊ฒŒ๋˜๋ฉด, ์‚ฌ์ด์ฆˆ๋Š” ๋ฐ”๋€Œ์ง€๋งŒ ๊ทธ ์•ˆ์˜ ๋ฐ์ดํ„ฐ๋Š” ๋ณ€ํ•˜์ง€ ์•Š๊ฒŒ ๋œ๋‹ค. ์ด๋ฅผ ํƒ€ํŒŒํ•˜๊ธฐ ์œ„ํ•ด Board์— key = size + hash ์œผ๋กœ ํ•ด์„œ size๊ฐ€ ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค, ๊ทธ๋ฆฌ๊ณ  ์…”ํ”Œ์„ ๋ˆ„๋ฅด๋ฉด ์ƒˆ๋กœ์šด ํ•ด์‰ฌ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ํ•˜์—ฌ ์…”ํ”Œํ–ˆ์„ ๋•Œ์—๋„ ์ƒˆ๋กœ์šด key ๊ฐ’์— ์˜ํ•ด constructor๊ฐ€ ๋‹ค์‹œ ์‹คํ–‰ํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค.

์ด๋ชจ์ง€ ๋น™๊ณ  GitHub ์ฃผ์†Œ

๋ฐ˜์‘ํ˜•