[DAY-16] VanillaJS를 통한 JS 기본 역량 강화(8)

notion-042

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
오늘은 수업을 따라 실습을 진행하며 중간 중간 몰랐던 쓰로틀링, 디바운싱, 이벤트 트리거에 대해 알아봤습니다.
Vanilla JS 강의가 끝났고, 이제 노션 프로젝트가 시작이네요.
소올..직히 저 약간 자신 업따구요..미래가 두려워요..
그래도 열심히 하는건 잘 하니까.. 노력해볼게요.. ㅠㅠ 노션이 아닌 졍션을 만들고 말테야

[1] UI 이벤트 제어 기법

쓰로틀링과 디바운싱은 UI 에서 발생하는 이벤트를 제어하는 기법입니다.

과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 부하방지를 위해 쓰이는 기법입니다.

예를 들어 인풋에 ‘keyup’올 계속해서 이벤트를 발생시키면

저만 해도 타자 속도가 500-600타정도 나오는데, 정말 짧은 시간 안에 엄청나게 많은 request를 보내게 되겠죠.

키보드 타이핑을 할 때 마다 서버 요청을 하면 서버 부하도 증가하고, 클라이언트 측에서도 통신을 하느라 UI가 많이 느려보일 수 있습니다.

또한 api 호출 횟수 제한이 있거나, 호출마다 비용이 든다면 서비스 운영에도 문제가 생기겠죠.

그렇기에 request를 줄여 속도를 개선하기 위해 쓰로틀링과 디바운싱 기법을 사용합니다.

Untitled

[1-1] 쓰로틀링 (throttling)

쓰로틀링 (throttling)은 사용자가 이벤트를 수행하는 동안 지정된 시간 간격으로 함수를 호출하는 방법입니다.

[1-2] 디바운싱 (debouncing)

디바운싱 (debouncing)은 사용자가 특정 시간 동안 이벤트를 수행하지 않았을 때, 함수를 호출하는 방법입니다.

//  실습 - main.js 코드 일부
let timer = null;

new Editor({
  $target,
  initialState: post,
  onEditing: (post) => {
    if (timer !== null) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      setItem(TEMP_POST_SAVE_KEY, {
        ...post,
        tempSaveDate: new Date(),
      });
    }, 1000);
  },
});

1초동안 작업이 없을 때만 setItem을 발생시키는 디바운싱 기법을 사용했습니다.

만약에 계속해서 작업이 들어올 때는 clearTimeout과 setTimeout으로 setItem을 계속해서 뒤로 밀겠죠.

Untitled 1

타자를 느리게 치거나 문장을 마쳤을 때, 1초동안 입력이 없으면 setItem이 발생하는 것을 볼 수 있습니다.

[2] 이벤트 트리거

브라우저마다 기본UI 스타일이 다른 엘리먼트가 존재합니다.

<input type=”file” /> 태그 같은 경우에도, 브라우저마다 스타일이 다 다릅니다.

Untitled 2

공통된 스타일의 제공을 위해, 해당 태그가 아닌 다른 버튼을 추가로 만들어

해당 버튼을 클릭 시, 클릭 이벤트를 원하는 태그에 연결해주는 방식을 이벤트 트리거라고 합니다.

쉽게 이해하자면, 트리거는 방아쇠입니다.

방아쇠를 당기면 총알이 나가는 것 처럼, 어떠한 행위(클릭 등)를 했을 때 이벤트를 선택할 수 있도록 할 수 있습니다.

<body>
  <input type="file" />
  <span class="file-button">파일 선택</span>
  <script src="./index.js"></script>
</body>

const fileButton = document.querySelector(".file-button");
const file = document.querySelector("input[type=file]");

fileButton.addEventListener("click", (e) => {
  const event = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  file.dispatchEvent(event);
});