배열 만들기

[[],[],[]] 배열 만들기

const data = [];
for(let i=0; i<3; i++) {
 data.push([]);
}

• 3 x 3 배열을 어떻게 만들 것인가?

→ 항상 java에서 3x3 배열을 만들고 2중 for문으로 값을 넣었다. 하지만, 이번 과제에서는 단순히 값을 넣는것 뿐 아니라 화면에 직접 모양을 띄워주야아 한다. 따라서, 2차원배열이 요소를 가진다.

const rows = [];

for(let i=0; i<3; i++) {
    const $tr = document.createElement('tr');
    const cells = [];
    for(let i=0; i<3; i++) {
      const $td = document.createElement('td');
      cells.push($td);
      $tr.append($td);
    }
    rows.push(cells);
    $table.append($tr);
  }

rows 안에는 그냥 빈 배열인 []가 담기는 것이 아닌, <tr></tr>과 자손으로 <td></td> 를 가진다. 따라서 해당 영역에 값을 넣어줄 때, 단순히 값을 대입하는 것이 아니라, textContent로 접근해야 한다. 기존에 java에서 단순히 배열에 항상 값을 대입하는 습관때문에 이해하는데 어려움이 있었다.

• 테이블의 html 구조

<table>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
</table>

[ td, td, td ],
[ td, td, td ],
[ td, td, td ]

• 네모 칸 클릭 시 X, O를 어떻게 넣을 것인가?

→ 네모 칸을 클릭한다면, 이벤트를 발생하는 것과 같다. 그렇다면, 이벤트를 통해서 어떻게 접근할 것인가? event.target으로 해당 요소를 확인할 수 있고 textContet로 값을 확인한다. 내가 X와 O 중 어느 표시를 해야하는지 확인이 필요하다.

이것까지는 잘 생각할 수 있었는데, 3x3 배열에서 내가 클릭한 칸이 어디 위치인지 좌표로 알 수 있는 방법에 대해서는 고민이 많았다. forEach 2번을 사용하여 해결 할 수 있다**. 핵심은 현재 배열의 위치와 event.target으로 선택된 것을 비교하는 것이다.**

forEach문 2번 돌아서 event.target 같은지 비교하기