TIL

documentFragment

documentFragment는 document.createDocumentFragment() 메서드로 생성되는 빈 객체이다.
가상의 태그로 메모리 안에만 존재하고, 화면에는 그려지지 않는다.
실무에서 화면에 태그를 추가하는 작업이 빈번할 때✨ 자주 쓰이는 방식 중 하나이다.

// table -> (fragment) -> tr -> td
function whatFragment() {
  const table = document.querySelector('table');
  const fragment = document.createDocumentFragment(); // 빈 DocumentFragment 객체
  let data = [1, 2, 3, 4];
  
  data.forEach(function () {
    const tr = document.createElement('tr');
	data.forEach(function () {
      const td = document.createElement('td');
      tr.appendChild(td);
    });
    fragment.appendChild(tr);
  });
  table.appendChild(fragment); // 태그들이 한번에 추가(append)
}

메모리 안에 가상의 부모 태그를 만들고, 그 태그 아래 화면에 그려지는 자식 태그를 추가한다.
이 때는 자식 태그도 화면에 그려지지 않고 메모리에만 추가된다.
마지막에 가상의 부모 태그가 상위 태그에 추가(append)되면, 가상의 태그가 사라지고 그 안에 추가했던 자식 태그들이 한번에 화면에 그려진다.

가상의 태그 없이 추가(append)할 때마다 그때그때 화면에 새로 그리게 되면 성능에 문제가 생길 수 있다.
documentFragment의 가상의 태그를 추가한 이유는 성능이 좋아지기 때문이다.👍

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

이벤트 종류만 확인하는 정도로 암기할 필요는 없으며, 필요할 때 mdn에서 검색할 수 있도록 키워드를 알아보자.
event 객체를 통해 확인할 수 있고, 마우스와 키보드 각각 대표적인 이벤트들만 정리해 보았다.

window.addEventListener('keyup', (event) => {
  console.log('keyup', event);
});
window.addEventListener('mousemove', (event) => {
  console.log('mousemove', event);
});

마우스 이벤트	기능	키보드 이벤트	기능
mousedown	마우스를 클릭할 때	keydown	키를 눌렀을 때
mouseup	마우스를 클릭했다 뗄 때	keyup	키를 눌렀다 놓았을 때
mousemove	마우스를 움직일 때	keypress	키를 누르고 있을 때

보통 window에 addEventListener를 추가한다.
개별 태그에 추가하기보다 브라우저 바깥에서 돌아갈 수 있으므로 넓은 범위의 window와 document에 추가하는 경우가 많다.