프론트엔드 데브코스 TIL #DAY20

에구마·2023년 10월 16일

프론트엔드 데브코스 기록

목록 보기

17/47

23.10.16

📚 오늘 공부한 것

Editor 만들기

😲 새롭게 알게된 것

"keydown"이벤트와 "keyup"이벤트

단어 그대로 키를 누르면 발생하는게 keydown, 키보드에서 손을 떼는 순간 발생하는게 keyup !
키하나를 꾸욱 누르고 있으면 keydown이 계에속 찍히다가 떼는 순간 keyup이 한번 발생한다.

디바운스 Debounce

같은 이벤트를 반복시키고, 가장 마지막에 발생한 이벤트만 실행시키는 기법

실습코드에서, 인풋박스에 사용자가 입력을 하기 시작하면 입력값이 바뀔때마다 매번 로컬스토리지에 setItem을 해주었다.
이 입력값이 굉장히 길어지면? 로컬스토리지 작업 아니고 무거운API면?? 효율이 좋지않다. 그럴 때 사용할 수 있다!

let timer = null;

const debounce = (post) => {
  if (timer !== null) {//방어코드
    clearTimeout(timer);
  }
  
  clearTimeout(timer);
  timer = setTimeout(async () => {
    // <발생시킬 작업>
    });
  }, 1000)
}

post를 가지고 <작업>을 1초(1000)후에 하도록 설정한다
근데 1초가 지나기 전에 같은 호출이 또 생겼으면 이전 걸 지우고 새로 1초후를 건다
이것이 반복되다가 더이상 1초동안 같은 호출이 오지 않으면 그 1초가 지나며 <작업>업이 실행된다.

clearTimeout
: setTimeout 요청을 위에서처럼 timer변수에 담으면 어떤 숫자값이 담긴다. 이를 이용해서 clearTimeout을 걸 수 있다. setInterval, clearInterval도 마찬가지 원리

커스텀 이벤트

MDN-Custom Event

new CustomEvent(type, {
  detail:{
    키: 밸류
  }
})

type : 커스텀한 이벤트 이름

예시

window.addEventListener("route-change", (e) => {
  console.log(e.detail.text)
});

이렇게 커스텀이벤트를 세팅해두고

window.dispatchEvent(
  new CustomEvent("route-change", {
    detail: {
      text: 'HI~',
    },
  })
);

이렇게 호출할 수 있다. 결과는

HI~

근데 이걸 언제쓰지? 왜쓰지?
실습에서 이걸 사용한 경우는 특정 버튼을 눌렀을 때 인자로 받는 url에 그 컴포넌트의 history를 변경하는 것이었다.
이 이벤트가 필요한 모든 버튼에 .addEventListener("click", e=> {...})를 거는 것보다 효율적이다.
또한 state값을 컴포넌트따라 내려주는 등 depth 문제 없이 전역으로 사용할 수 있다!

🫨 느낀 점

큰 부모 컴포넌트에서부터 작은 조각조각 컴포넌트를 만들었던 지난 실습과 달리, 이번엔 작은 컴포넌트를 만들고 그 상위를 만들며 합쳐갔다. 나 혼자 했더라면 부모 하나를 합칠 때마다 전달 인자나 형식 일관성에 어려움을 겪었을 것 같다.. 나에겐 상위>하위 순서 개발이 더 낫다고 생각했다..
여전히 배워야 할 지식들이 넘친다. 근데 그 과정에서 너무 재밌었다!! 블로그를 쓸 때 '이전 수정중이던 글이 있습니다'와 같은 것에 임시 값 저장과 시간 비교가 쓰였겠구나! 중간중간 글을 임시 저장해주는 것도 디바운스의 역할이였구나! 등 여러 사이트를 통해 익숙했던 기능들의 구현단을 본거 같았다. ux의 끝은 어딘가,,

🤔 오늘 회고

Keep

강의를 듣다보면 강사님도 오류를 만나신다. 나완 다르게 몇초만에 그 원인을 찾아서는 고치신다. 그럼 나는 내 스스로 찾을 기회가 없다고 느꼈다. 그래서 같은 에러가 나는 걸 확인하곤 나혼자 찾아보곤 한다. 이유도 나혼자 찾아본다. 어떻게 해결을 하고 강의를 이어 보고선 내 해결방법이 택도 없이 허접했다고 느낄 때가 많지만 올바르게 찾아냈을 땐 너무 행복하당~~
오늘은 강의 중반부에 오류 하나를 찾았는데, 강사님께선 강의 후반부에서야 찾고 해결해주셨다. 후반부에 해결해주실 줄 모르고 혼자 끙끙 댔다. 비록 내가 찾아낸 방법은 쓰이지 못했지만 그 과정이 의미있게 느껴졌다.