배웠던 것

Debounce

• 항상 키 입력을 할 때마다 이벤트를 발생시켜 localStorage에 저장하거나, API를 호출할 경우 불필요한 자원 낭비가 생길 수 있다.
• 이벤트가 연속으로 일어나면 발생을 지연시켰다가, 이벤트가 일정 시간 동안 일어나지 않으면 지연된 이벤트를 처리한다.
• 이벤트 발생 횟수를 줄일 수 있다. 성능과 최적화 관점에서도 좋다.
• clearTimeout와 setTimeout으로 구현할 수 있다.

자세한 예제 디바운스와 쓰로틀링
비슷한 개념으로 쓰로틀링도 있다. 쓰로틀링은 일정 시간 내에 이벤트가 한 번씩만 실행되도록 제한하는 것이다.

CustomEvent

• 사용자가 정의한 이벤트를 이벤트 핸들러로 등록해서 사용할 수 있다.
• 사용 용도
  • 상위 컴포넌트의 기능을 하위 컴포넌트에 내려주고 싶은데, depth가 깊어지고, 해당 기능이 범용적으로 사용된다면 CustomEvent를 이용하여 처리할 수 있다. (ex. 라우팅)
  • 단, 남용 시 에러 디버깅 등이 힘들어질 수 있으므로 적절하게 사용해야 한다.
• 구현

// 상위 컴포넌트
$parentElement.addEventListener('custom-event', (e) => {
  const { info } = e;
  
  // 전달된 데이터를 통해 이벤트 핸들링
  doSomthing(info);
})


// 하위 컴포넌트
$childElement.addEventListener("click", (e) => {
  window.dispatchEvent(new CustomEvent('custom-event'), {info: "전달 할 데이터"}); // 이벤트를 발생시킨다
})

• window.dispatchEvent를 이용하면 발생하지 않은 이벤트도 발생 시킬 수 있다.

🚀 코딩 시 고려하면 좋을 것들

• 추후에 변경이 가능하여 동작을 바꿀 수 있는 것들은 상수로 선언해놓아야 한다.
  • 이벤트명, API end point 등등
• 똑같은 패턴, 로직이 생기면 중복해서 쓰지말고 파일로 따로 빼자.
• initialState, setState와 같이 state를 할당해주는 부분에는 방어코드를 잘 넣자.
• 개발을 편하게 해주는 라이브러리를 뜯어보거나, 인터페이스를 따라서 만들어 보는 것도 큰 도움이 된다.

어려웠던 것

중간중간 멈춰놓고 혼자 먼저 코드를 작성해보기도 했는데, 아직까지는 존재하는 로직을 호출하기만 하면 되는데 중복해서 작성하고 있는 경우가 많았다. 흐름을 따라가지 못 했던 것 같다. 계속 복습하면서 패턴에 익숙해지도록 해야겠다.

더 공부해야 할 것

textarea -> contenteditable div가 되니 caret(|, 커서)가 계속해서 가장 앞으로 이동하는 현상이 발생했다. 자연스럽게 발생하는 현상인듯 한데, 해결 방법이 간단하지 않은 것 같아서 일단 열심히 구글링해서 해결해야겠다. 한시간 반 정도 쏟아봤는데 아직 해결이 안 됐다.😂