1주동안의 기획과 문서작업이 얼추 끝나자, 프론트엔드를 맡은 나와 재완님은 함께 게임 개발에 착수했다. 2주차의 가장 큰 목표는 어느 정도 플레이가 가능한 게임 프로토타입을 만드는 것이었는데, 다행이 이틀 정도만에 목표는 달성할 수 있었다.

리액트를 이용해서 위와 같이 블록팡 프로토타입을 만들었다. 타이머, 점수 등 다른 게임 컴포넌트는 아직 하나도 없다. 오로지 블록과 여러개의 블록을 갖고 있는 블록 리스트만 있다. 그리고 중요한 건 블록 파괴/생성 이벤트인데, 가장 아래칸 블록은 ‘a’키를 누르면 파괴할 수 있고 그 직후 새로운 블록이 가장 위칸에 쌓인다.

게임을 구성하는 가장 기초 요소인 블록은 key-value를 담고 있는 object이고 블록 리스트는 블록 오브젝트를 담고있는 array에 불과하다.

  const block = {
    color: 'red',
    key: 'a'
  };

  const blockList = [
    { color: 'red', key: 'a' },
    { color: 'blue', key: 'd' },
    { color: 'green', key: 's' }
  ];

그리고 유저가 가장 아래(처음) 블록의 키를 정확히 누르면 먼저 다음과 같이 가장 처음 블록이 삭제되고 새로운 블록이 blockList 끝에 추가된다.

  blockList.shift();
  blockList.push({ color: 'blue', key: 'd' });

블록이 추가되면 blockList array는 다음과 같이 구성된다.

  const blockList = [
    { color: 'blue', key: 'd' },
    { color: 'green', key: 's' },
    { color: 'blue', key: 'd' } // new block
  ];

그리고 리액트는 상태 변화와 그에 따른 렌더링에 최적화되어 있기 때문에 blockList를 상태로써 관리해주면 된다. 그럼 유저 인풋에 따라 blockList에 변화가 있을 때마다 blockList 컴포넌트는 자동으로 re-rendering 된다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      blockList
    };
  }
  // do the rest ..
}

사실 어이없을 정도로 블록팡은 이게 전부다. 이후 스타일링에 좀 더 시간을 쏟고 타이머, 점수, 스테이지 정보 등 중요 컴포넌트를 만들어서 블록팡을 좀 더 게임답게 만들었다.

블록팡을 게임이라는 관점으로만 보면 굉장히 단순하고 특별할 것이라곤 없는 게임이라는 건 사실이다. 하지만 블록팡을 내가 처음 해보는 리액트 프로젝트라고 생각하면 좀 더 다른 의미를 갖는다.

리액트를 처음 접하고 state와 props의 개념 그리고 각각의 사용방법에 대해 이해가 잘 안되었었다. jQuery로만 DOM을 찾고 조작하는 방법에만 익숙했기 때문이다. 하지만 블록팡에서 blockList array를 state로 관리하기 시작하면서 블록의 변화에 따라 blockList가 변하고 그에 따라 컴포넌트도 re-render되는 것을 경험하고 나니 리액트로 프론트엔드 개발이 정말 직관적이고 쉬워질 수 있겠다, 라는 점을 진하게 경험했다. 왜냐하면 리액트라는게 뭐 별건가, 결국 state 변화에 따른 컴포넌트 렌더링이 핵심 아닌가.

routes 관리와 authentication/authorization 등과 같이 좀 더 이해와 경험이 필요한 부분이 많이 남긴 했지만 리액트의 기본을 다질 수 있는 아주 좋은, 알맞은 프로젝트였다.