전 시간에 어떻게 만들 것인지 구상을 적당히 마친 것 같으니 이제 본격적으로 프로젝트를 생성해 보겠다.

깃허브에 프로젝트를 하나 생성해 준다.

그 후 리액트 프로젝트를 하나 생성했다.

원래 생성되는 코드를 지우고 적당히 테스트 코드를 띄워본다.

잘 작동한다.

그 외에도 개발에 딱히 필요 없는 기본 파일들을 다 지워주겠다.

그리고 gameData.json을 생성해 적당히 문제에 대한 예시를 넣어준다.

import gameData from "./gameData";

function App() {
  console.log(gameData);
  return (
    <div>
      <h1>Test React</h1>
    </div>
  );
}

export default App;

gameData를 불러온 뒤 간단히 로그를 찍어 잘 나오는지 확인한다.

이제 이 answer 배열을 사용자가 문제를 풀 수 있게 변환 할 것이다. 아이디어는 다음과 같다.

  1. 배열을 전체 탐색 하면서 1이 이어져 있으면 count를 계속 더한다.
  2. 그러다 0이 나오면 증감을 멈추고 배열에 push

다만, 이 작업은 가로에 대해서만 탐색하기 때문에 세로에 대한 정보를 얻기 위해선 반복문의 변수를 조작하는 것 보다 배열을 옆으로 뒤집는 함수를 하나 만들어 가로와 세로에 대한 정보를 뽑는 식으로 짰다.

function CreateGrid_X(arr) {
  var grid = [];
  for (var i = 0; i < arr.length; i++) {
    var counts = [];
    var count = 0;
    for (var j = 0; j < arr[i].length; j++) {
      if (arr[i][j] == 1) {
        count++;
        if (j == arr[i].length - 1) {
          counts.push(count);
        }
      } else if (count != 0) {
        counts.push(count);
        count = 0;
      }
    }
    grid.push(counts);
  }
  return grid;
}

2차원 배열인 arr을 넣으면 가로에 대한 정보를 반환하는 코드이다. 그리고 이어서 세로의 정보를 얻기 위해 배열을 뒤집는 코드를 짰다.


function transpose(arr) {
  var grid = [];
  for (var i = 0; i < arr[0].length; i++) {
    var a = [];
    for (var j = 0; j < arr.length; j++) {
      a.push(arr[j][i]);
    }
    grid.push(a);
  }
  return grid;
}


function CreateGrid_Y(arr) {
  var grid = [];
  arr = transpose(arr);
  for (var i = 0; i < arr.length; i++) {
    var counts = [];
    var count = 0;
    for (var j = 0; j < arr[i].length; j++) {
      if (arr[i][j] == 1) {
        count++;
        if (j == arr[i].length - 1) {
          counts.push(count);
        }
      } else if (count != 0) {
        counts.push(count);
        count = 0;
      }
    }
    grid.push(counts);
  }
  return grid;
}

그리고 세로의 정보를 만들기전에 transpose를 실행해 좌우를 반전시킨 뒤 필요한 정보를 뽑는다.

원하는 정보를 얻었다. 이제 이 배열을 위와 왼쪽에 보여지게끔 만들면 된다.