Tic Tac Toe는 간단하지만 프런트엔드 라운드에서 가장 많이 묻는 질문입니다! 왜 ?

저는 신입생으로서 특히 프론트엔드 역할에서 자주 면접 질문으로 Tic-Tac-Toe를 접했습니다. 데이터 구조와 알고리즘을 활용하여 지원자의 프론트엔드 개발 능력, 논리적 사고, 문제 해결 능력을 효과적으로 테스트하는 만능 문제입니다.

이해를 확고히 하기 위해 Tic-Tac-Toe를 직접 구현하기로 결정했습니다. 단순한 게임처럼 보일 수도 있지만 강력한 솔루션을 만들려면 여러 요소를 신중하게 고려해야 합니다.

제 코드를 공유하고 접근 방식을 설명해 드리겠습니다. 저는 지식을 공유하는 것이 성장에 중요하다고 믿으며, 해결책에 대한 논의는 귀중한 통찰력과 개선으로 이어질 수 있습니다.

App.jsx

import "./App.css"
import TicTacToe from "./components/TicTacToe"
const App = () => {
  return (
    <div >
        <TicTacToe />
    </div>
  )
}
export default App

TicTacToe.jsx

import useTicTacToe from "../hooks/useTicTacToe"

const TicTacToe = () => {

    const {board, handleClick, getStatusMessage, resetGame} = useTicTacToe();

    return (
        <div className="main">
            <div className="heading">
                <h1>
                    {
                    getStatusMessage()
                    }
                </h1>
                <button onClick={resetGame}>Reset Game</button>
            </div>
            <div className="board">
                {
                    board.map((player, i) => {
                        return <button key={i} onClick={() => handleClick(i)} disabled = {player !== null}>{player}</button>
                    })
                }
            </div>
        </div>
    )
}

export default TicTacToe

사용자 정의 React 후크

import { useState } from "react";
const intialGame = () => Array(9).fill(null);

const useTicTacToe = () => {
    const [board, setBoard] = useState(intialGame())
    const [isXNext, setIsXNext] = useState(true);
    const winning_patterns = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],

    ];
    const calculateWinner = (currentBoard) => {
        for(let i = 0 ; i < winning_patterns.length ; i++) {
            const [a, b, c] = winning_patterns[i];
            if(currentBoard[a] && currentBoard[a] === currentBoard[b] && currentBoard[a] === currentBoard[c]) {
                return currentBoard[a];
            }
        }
        return null;
    }
    const resetGame = () => {
        setBoard(intialGame());
    }
    const getStatusMessage = () => {
        const winner = calculateWinner(board);
        if(winner) return `Player ${winner} Won ?`
        if(!board.includes(null)) return `It's a Draw`
        return `Player ${isXNext === true ? "X" : "O"} Turn`
    }
    const handleClick = (index) => {
        const winner = calculateWinner(board);
        if(winner) return null;
        const newBoard = [...board];
        newBoard[index] = isXNext ? "X" : "O";
        setBoard(newBoard);
        setIsXNext(!isXNext);
    }

    return {board, calculateWinner, resetGame, getStatusMessage, handleClick}
}

export default useTicTacToe;

스타일링

.board {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.board button {
  font-size: 35px;
}

위 내용은 Tic Tac Toe는 간단하지만 프런트엔드 라운드에서 가장 많이 묻는 질문입니다! 왜 ?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!