리액트 틱택토 셋팅

해당 자료는 https://ko.reactjs.org/tutorial/tutorial.html 를 따라하는 과정을 기록한 것입니다.

우리는 틱택토를 만들어 볼 것이다. 일단 그러기 위해서는 초기 셋팅을 해야한다. 물론 링크 되어 있는 https://codepen.io/gaearon/pen/oWWQNa?editors=0010 에서 직접 만들어 볼 수도 있지만, 나는 내 깃허브에 코드들을 업로드하고, 보기를 원했고, 그러기 위해 직접 VSCODE를 이용해서 코드를 짜기로 했다.

먼저 리액트를 설치해야하는데 그건 상세히 다루지 않을 것이다, 일단 node와 npm을 설치하고 npm install --global yarn 글로벌 설치를 하여 yarn을 설치한다. yarn을 설치하였으면, yarn create react-app hello-react 로 react app을 만들고 그 폴더로 이동하여 yarn start를 하면 리액트가 실행된다.

먼저 https://codepen.io/gaearon/pen/oWWQNa?editors=0010 에서 코드를 복사해와서 만든다. js는 index.js로 css는 index.css로 만들면 된다, html 파일은 굳이 필요 없다, 랜더링하여 실항하면 이런 모습이 된다는 것을 나타낸다. 하지만 우리는 로컬 환경에서 실행할 것이기 때문에 몇몇 개를 수정해야한다.

일단 리액트 앱을 만들고 파일들을 다 지운 다음에 index.js를 만든다.

index.js

import React from "react";
import ReactDOM from 'react-dom/client';
import './index.css';

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

굵고 기울어진 글자들을 추가하면 된다, 먼저 리액트 앱이니 react를 추가하고, 제일 밑에 코드에 ReactDOM도 사용하니 ReactDOM도 추가한다, 그리고 css도 추가하면 js는 완료가 된다.

이제 css 파일을 추가할 차례이다.

index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

//.square:focus {
//  outline: none;
//}
.square:focus {
  outline: #000;
}
.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

css는 square:focus의 아웃라인을 none에서 #000으로 수정해야한다. 이거를 안하고 yarn start를 하니 예시 화면에서 보여주는 3*3의 이쁜 틱택토판이 아니라 뭔가 이상한 찌그러진 틱택토 판이 나왔다, 아마 리액트 구버전에서는 none으로 되어 있어도 되었을지도 모르겠다, 일단 사파리, 파이어폭스, 크롬에서 모두 확인해본 결과 제대로 된 결과가 나오지 않았고, 찾다보니 css 파일에서 이 부분을 수정하면 된다는 결론에 이르렀다.

이렇게 다 수정하고 저장한 뒤에 yarn start를 하면, https://codepen.io/gaearon/pen/oWWQNa?editors=0100 에서 나오는 아직 아무 기능이 없는 틱택토 판이 나오게 될 것이다.