1. HTML 세팅하기 (순수JS로만 생성)

• 2차원 배열 만들기

const $table = document.createElement('table');
    for (let i =0; i<3;i++) {
        const $tr = document.createElement('tr');
        for (let i=0; i<3; i++) {
          const $td = document.createElement('td');
          $tr.append($td);
       }
     $table.append($tr);
}
document.body.append($table);

2. 순서대로 O,X 표시하기

let turn = 'O';

$td.addEventListener('click', (event)=> {
   if(event.target.textContent) return;
      event.target.textContent = turn;
   if (turn === 'O'){
       turn = 'X';
   } else if (turn === 'X') {
       turn = 'O';
   }
 });

• removeEventListener보다는 조건을 사용해서 return하는 것을 추천한다.

3. 표 다시 그리기

소스코드 전체 확인하기

https://github.com/tae100k/VanillaJS-tictactoc

프로젝트 메모

const {body} = document;
const body = document.body;

• 구조분해할당 (destructuring) : 어떤 객체의 속성과 그 속성을 담는 변수명이 같을 때 사용한다.