Ch_4_JS(5)

Class

• Static Method > Class
• Prototype Method > Instance

가져오기 / 내보내기

• node.js는 common.js을 지원
• (기본 내보내기 없음!)

Call Stack & Event Loop

Keyword

• heap, call stack, webAPI, event loop, callback queue, macro/micro task
• 브라우저마다 macro, micro, animation 순서가 조금씩 다르다
• 콜스택이 비워져야 콜백큐에 있는 이벤트가 들어갈 수 있다

DOM(Document Object Model) API

• node.js는 js가 나의 컴퓨터를 제어하기 위한 환경
• Element VS Node
  querySelector와 querySelectorAll의 차이 > 트리 구조에서 확인 가능
• NodeList는 배열이 아니라 유사 배열 (객체 아니고 개체?)
• 클래스 추가(add), 제거(remove), 확인(contains)
  divEl.classList.add('heropy')
divEl.classList.remove('heropy')
divEl.classList.contains('heropy')
• 부모 요소 검색
  divEl.parentNode
• 이전, 다음 형제 검색
  divEl.previousElementSibling
divEl.nextElementSibling
• HTML 구조 출력
  divEl.innerHTML
• 요소의 컨텐트 검색
  divEl.textContent
• innerHTML과 textContent는 getter이자 setter로 사용할 수 있다
  (값을 얻어내는 것과 동시에 지정 가능)
• textContent는 글자 그대로 출력, innerHTML은 HTML로 해석해서 결과 출력
• HTML요소 삽입
  divEl.append('<h2>Hi</h2>') // 뒤에 삽입
  divEl.prepend('<h2>Hi</h2>') // 앞에 삽입
  그런데 위와 같이 삽입하면 HTML로 해석되지 않고 텍스트 그대로 출력 된다
  HTML로 해석된 코드를 삽입하려면 createElement로 변수에 담아서 사용
  const h2El = document.createElement('h2')
• Attributes 확인
  divEl.getAttribute('title')
divEl.setAttribute('title', 'abcd')
• dataset
  console.log(divEl.dataset.user)
• 요소 크기 확인
  console.log(divEl.clientWidth)
console.log(divEl.clientHeight)
• 요소 렌더링 정보 확인
  console.log(divEl.getBoundingClientRect()) // rectangle 직사각형
  getter가 아니라 함수이므로 호출하면 그때 크기를 계산한다. 최신 정보를 얻을 수 있지만 사용에 유의
• 이벤트 핸들러 (event 객체 중요!)

divEl.addEventListener('click', event => {
  console.log(event)
})

// keydown/up에서 한글 2번 입력 이슈 해결법
inpuEl.addEventListener('keydown', event => {
  if (event.isComposing) return
  console.log(event.target.value)
})