📚TIL

Day 17

디바운싱(Debouncing)

• 연속적으로 발생하는 이벤트를 하나의 그룹으로 묶어서 마지막 이벤트만 발생시킴
• 일반적으로 CPU에 무리를 주지 않기 위해 사용

커스텀 이벤트 디스패치

• 원하는 이벤트를 직접 제작할 수 있음
• Event 객체 생성 : type - 이벤트 이름, init - detail을 통해 이벤트 세부사항 설정

const event = new CustomEvent(type, init)

• 이벤트 생성 후 호출해보기

<button class ="btn"></button>
<script>
  const $btn = document.querySelector('.btn')
  const EVENT_NAME = 'custom-click-event'
  
  const clickEvent = new CustomEvent(EVENT_NAME, {
  	detail : {
  		content : 'hello world!'
  	}
  })
  
  window.addEventListener(EVENT_NAME, (e) => {
  	const { detail } = e
  	alert(detail.content)
  })
  
  $btn.addEventListener('click', e=> {
  	dispatchEvent(clickEvent)
  })
</script>

• addEventListener()를

html - Content Editable

• 표준 HTML5 요소들을 편집 가능한 상태로 만들어 줌
• 테그 안에 contenteditable = "true" 속성 추가시 발생

자동 저장 편집기 실습

🌊하루를 마치며

오늘 드디어 밀린 강의를 다 듣고 프로젝트에 들어갔다! 프로젝트에 들어갔지만 api에 대한 공부가 완벽하지 않기 때문에 계속해서 강의를 다시 들어가면서 프로젝트를 진행할 생각이다. 오늘 가장 인상 깊었던 부분은 커스텀 이벤트이다. 컴포넌트를 사용하면서, 특히 프로젝트를 진행하면서 depth가 깊어질 수록 이벤트를 계속해서 상위로 전달하여 실행시키는 것이 굉장히 비효율적이라고 생각했는데 이 문제를 해결해 줄 수 있기 때문에 프로젝트에 사용해야겠다고 생각했다. 이벤트 디바운싱은 내가 알고있는 함수를 사용해서 생각하지 못한 방식으로 CPU를 적게 사용하는 것에 머리가 띵! 했다. 이 부분을 잘 사용하여 프로젝트를 더 효율적으로 코딩하도록 시도해볼 생각이다.
오늘 시작했지만 아직 안한거나 마찬가지인 수준의 구현밖에 하지 못했다 🤣시간이 많이 없지만 금요일까지 최선을 다해서 완성할 생각이다! 얍!