[JavaScript] zerocho 자바스크립트 강의 13, 14강

 function startGame() {
    const $fragment = document.createDocumentFragment();
    [1, 2, 3, 4].forEach(function () {
      const rowData = [];
      data.push(rowData);
      const $tr = document.createElement('tr');
      [1, 2, 3, 4].forEach(() => {
        rowData.push(0);
        const $td = document.createElement('td');
        $tr.appendChild($td);
      });
      $fragment.appendChild($tr);
    });
    $table.appendChild($fragment);
    put2ToRandomCell();
    draw();

documentFragment

실무에서는 화면에 태그를 추가할 때 createElement로 만들어서 실제 태그에 바로 추가 (append) 하는 방식을 잘 사용하지 않는다. 그 대신 document.createDocumentFragment method로 메모리 안에서만 존재하는 fragment를 만든다.

위와 같은 코드에서 fragment를 사용한 이유는 성능때문에 사용하였다. 

메모리에 fragment라는 가상요태그를 만들고 그 아래에 tr을 만들면 수많은 tr, td가 메모리에만 추가가 된다.

그 이후에 table에 fragment를 추가하면 그때가 되서야 사라지면서 내부에 있는 tr이 한번에 그려지게 된다.

 

2차원 배열은 항상 forEach가 두번나온다.

 

키보드와 마우스 이벤트 종류

키보드 키를 눌렀을 때 발생하는 keydown, 키보드 키를 눌렀다 놓았을 때 발생하는 keyup

마우스를 클릭할 때 발생하는 mousedown, 클릭했다가 땔 때 발생하는 mouseup,

마우스를 움직일 때 발생하는 mousemove 이벤트가 존재함.

 

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN