1. 프로그램 제작에서 새로 배운 것들

---

1) documentFragment

• 화면에 태그를 추가할 때 생성하고 바로 추가하는 방법보다는 document.createDocumentFragment 메소드로 중간 단계를 만들고 거기에 태그를 추가한 후 fragment 태그를 화면에 보이는 태그에 추가하는 방법이 더 낫다.
• documentFragment는 메모리 안에서만 존재하는 가상의 태그이다.
• 태그를 생성하고 화면에 바로 추가하면 추후에 문제가 발생할 수도 있다.

2) 키보드 이벤트

• 대표적인 키보드 이벤트에는 키보드를 누를 때 호출되는 keydown과 키보드를 뗄 때 호출되는 keyup이 있다.
• 어떤 키를 눌렀는지는 event.key 속성에 나온다.
• 왼쪽은 ArrowLeft, 오른쪽은 ArrowRignt, 위쪽은 ArrowUp, 아래쪽은 ArrowDown이다.
• event.ctrlKey, event.altKey, event.shiftKey, event.metaKey 등의 속성을 제공하기 때문에 다른 키와 동시에 누르는 것도 알 수 있다.

3) 마우스 이벤트

• 대표적인 마우스 이벤트에는 마우스를 클릭할 때 호출되는 mousedown, 마우스를 클릭했다가 뗄 때 호출되는 mouseup, 마우스를 이동할 때 호출되는 mousemove가 있다.
• clientX, clientY는 현재 브라우저 페이지 내에서의 x, y 좌표를 가리킨다.(픽셀 단위)
• pageX와 pageY도 브라우저 페이지 내에서의 x, y 좌표를 가리키며, 스크롤이 있는 경우 스크롤한 픽셀 값까지 포함한다.
• offsetX와 offsetY는 이벤트를 연결한 대상을 기준으로 마우스의 x, y 좌표를 가져온다.
• screenX, screenY는 모니터를 기준으로 모니터의 왼쪽 모서리가 0이 된다.
• movementX와 movementY는 지난 mousemove 이벤트와 비교해 얼마나 마우스를 움직였는지 표시한다.

4) Math.abs

• 절댓값을 반환한다.

5) case에서 중괄호

• case 내부에서 const나 let을 사용할 때 중괄호를 사용하는 것이 좋다
• 블록스코프라서 블록 안에만 접근할 수 있으며, 블록을 사용하지 않는다면 다른 case에서 사용될 수 있다.

2. 복습코딩

---