react로 바둑판 프로그램 만들기

이 글은 Livesense Advent Calendar 2017-학-16일입니다.
저는 졸업생 첫해의 엔지니어@asadaman입니다.
나는 최근에 react를 배우기 시작했기 때문에 그것에 관한 것을 쓰고 싶다.
react tutorial은 동그란 벌칙 게임이기 때문에 9x9의 바둑판 프로그램을 만들기 위해 조금 확대하기로 했습니다.
먼저 심각한 코드를 수정하면서 완성에 가까운 과정을 쓴다.

할 일

9x9의 바둑판

블랙스톤과 백석을 번갈아 치기

create react app와 react tutorial을 기반으로 제작

포기한 일

승패의 판단

(상대의 돌을 포위한 경우) 돌을 뽑기

typescript(당초 typescript로 제작할 예정이었으나 모형을 어떻게 만들어야 할지 몰라 포기했다)

해본 일

1.create react app로 형태 만들기

create-react-app Quick Overview에 설명된 대로 다음 명령을 사용하여 초기 형태를 만듭니다.

$ npm install -g create-react-app

$ create-react-app react-go-game

2. react tutorial 전선을 직접 가져온다

먼저 패러디한 부분부터 자신이 하고 싶은 것과 가장 가까운 상태react tutorial의 코드(번갈아 칠 수 있는 설치가 완성된 곳)를 그대로 가져왔다.

3. 9 x 9로 확장

9×9 바둑판을 만들고 싶어서 위치를 변경합니다.
3×3 합계 9개 Arry 9×9 합계 81개.
before

squares: Array(9).fill(null),

after

squares: Array(81).fill(null),

다음은 렌더를 수정하는 곳입니다.
before

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

    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>
    );
  }

after

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

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

81개. 너무 힘들어.(보통 81개 못 써요. 따라하지 마세요.)
이후 원환과 포크에서 흑환과 백환으로 변경됐다.
before

const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

after

const status = 'Next player: ' + (this.state.xIsNext ? '●' : '○');

4. 어셈블리화

renderSquare 81줄로 늘어선 아쉬운 코드를 보고 슬퍼하며 같은 팀에서 친절한 선배의 조언을 받았다.
선배: "react의 기본 개념은 구성 요소를 만들고 조립해서 보기를 만드는 거예요."
(정확히 까먹었다)
마침내 강좌에서도 그런 일을 썼다는 것을 깨달은 나는 머리로react와 비슷한 코드를 잘 쓰기로 결정했다.
9개의 사각형renderBoardRow을 그렸는데 그 중에서 renderSquare라고 하고 9줄의 사각형renderBoard()을 더 그렸는데 그 중에서 renderBoardRow라고 한다.그럼 엄청 긴 렌더가 있는 데서 유창하게 했네요.

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Go App</h2>
        </div>
        <div className="background">
      {this.renderBoard()}
        </div>
      </div>
    );
  }

5. CSS 수정

이렇게 하면 9×9의 칸에 검은색과 흰색의 원이 배열되기 때문에 그림을 바둑판과 바둑돌 모양으로 만든다.

6. 만든 것

왠지 그런 느낌이 든다.

마지막 js 인코딩도 미리 붙입니다.
https://github.com/asadaman/react-go-game/blob/master/src/App.js

앞으로 하고 싶은 거.

이번에 포기

기보기록·재생

나는 먼저 typescript로 정형화하는 것부터 시작하고 싶다.