개발항해일지 22년/6월/1주 :: 자바스크립트로 리액트처럼, Debounce, Throttle

일지 2022년 6월 1주차

 

 

이번주 할 일

저번주에 이어서 학습하는 주간이다.

이번주 키워드는 React, TypeScript, Solidity 등

 

1. 자바스크립트 및 프론트엔드 지식 강화 ✅

2. 리액트 + 타입스크립트 프로젝트(타입스크립트와 조금 친해지기) ✅

3.  Web3 2주차 Kudo 확인 & 3주차 엿보기

 

이번주도 한 주만큼 성장하자!

 

 

강의 정리

이번주는 3개월간 들은 강의를 마무리하며 배운 내용을 정리해봤다.

프로그래밍에 도움이 될 것 같아 선택한 이산수학의 중점을 정리했고,

세계와 음식이 좋아 선택한 세계의 음식, 음식의 세계도 정리했다.

 

 

자바스크립트로 리액트처럼

7일간 쌩자바스크립트(바닐라)를 마치 리액트처럼 작동하도록 구성했다.

 

리액트처럼 구성했다는 말은 리액트 라이브러리 설치없이,

• SPA고,
• 상태 변화는 setState 메서드를 이용해서 바뀌고,
• 바뀌면 자동으로 렌더링되고,
• 주소의 변화를 보여줄 라우터를 이용하고,
• 컴포넌트화
• ... 등 (기억나는 건 여기까지)

예전에 포스트한 프론트엔드 과제 필요기술 8개+를 참고하며 만들었다.

 

만든 프로젝트는

1. API로 데이터를 가져와서, 가공하고 레이아웃 구성해서 보여주고,
2. 클릭하면 해당 상세 페이지로 이동,
3. 검색창에 다른 API로 입력값에 대한 추천 검색어를 보여주고,
4. POST 요청으로 새로운 데이터를 추가하기도 하고,
5. 무한 스크롤을 구성하는 등

이것 저것 두루두루 만져봤다.

 

뭘 배웠을까?

자바스크립트 다음에 리액트를 배우고, 리액트로 프로젝트를 진행하며 자바스크립트에 대한 이해가 훨씬 생겼는데,

리액트를 하다가 자바스크립트로 돌아와서, 자바스크립트로만으로 리액트처럼 만드니까 리액트에 대한, 프레임워크에 대한 이해도가 향상된 느낌이 든다. { 강력 추천 합니다 }👍

 

 

Debounce와 Throttle

위의 프로젝트를 진행하며 Debounce와 Throttle을 사용했습니다.

사실 Throttle은 이번에 처음듣고, 처음 사용해봤습니다.

이번에도 느낀점은 용어에 지례 겁먹을 필요 없다는 것

 

⏱️ Debounce는 뭐지?

위 프로젝트에서 Debounce를 추천 검색어 API를 호출할 때 사용했습니다.

 

왜 사용했을까요?

검색창에 입력이 되면 검색어를 추천해줍니다. 한 글자, 한 글자 입력될 때 마다 API를 호출해버립니다.

그럼 API는 바쁘죠, 조금 덜 바쁘게 도와주는 것이 Debounce입니다.

 

Debounce를 적용하면 한 글자 입력시 한 0.3초(지정한대로) 뒤에 API 호출을 시킵니다.

하지만 이러면 그냥 각 글자 입력되고 0.3초 뒤에 우두두두 API 호출이 됩니다.

여기서 기술들어갑니다.

0.3초가 지나지 않았는데 글자가 입력되면 0.3초를 리셋해줘서 다시 0.3초를 세도록 시키는 겁니다.

그럼 타자가 빠른 우리가 입력 하고 있는 동안 API호출을 하지 않게 됩니다.

 

Debounce 코드 예시

export function debounce(func, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

 

⏱️ Throttle이 뭐지?

Throttle은 Debounce와 반대 개념이라고 생각됩니다.

Debounce는 실행 전에 0.3초 기다려 주는 거죠.

Throttle은 먼저 실행하고 다음 작업까지 0.3초 기다리게 합니다.

즉 Throttle을 적용해서 API를 호출하면, 다시 호출하려면 0.3초 기다려야 호출된다는 말입니다.

 

어디에 사용했을까?

스크롤 이벤트에 사용했습니다.

무한 스크롤은 보는 화면이 하단에 가면 자동으로 다음 컨텐츠를 보여주는 거죠.

밑에 도착하면 다음 데이터(컨텐츠)를 가져오기 위해 API 호출을 합니다

 

하단에 도착해서도 스크롤 이벤트가 일어나면 Debounce는 호출을 기다리게 할 텐데 도움이 안되죠.

여기서 필요한 것은 우선 호출을 하고 다음 호출을 기다리게 해주는 Throttle이 도와줄 수 있습니다.

사실 Throttle이 빛을 발하는 부분은 스크롤 이벤트입니다.

스크롤 이벤트에 적용하면 항상 실행이 되는 것이 아닌, 0.5초(지정시간) 뒤에나 스크롤 이벤트가 실행됩니다. 이렇게 스크롤 이벤트를 더 적게 부를 수 있게 된거죠.

 

다음으로 하단에 도착하면, 다음 컨텐츠를 부르는 API를 호출하고 기본적으로 0.5초를 기다립니다.

하지만 API 호출이 0.5초보다 더 걸릴 수도 있죠. 그래서 확실히 하기 위해 호출중인지 확인을 합니다.

API 호출중인지 확인하는 isFetching 같은 변수로 진행중인지 확인하면 다음 데이터가 도착하기 전에는 API 호출이 이뤄지지 않습니다.

 

Throttle 예시

export function throttle(func, delay = 500) {
  let timer;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        func.apply(this, args);
      }, delay);
    }
  };
}

 

Throttle을 적용한 스크롤 예시

onScroll: async () => {
  if (!isFetching) {
    $app.append(loader);
    isFetching = true;
    const data = await fetch(
    	// 생략...
    );

    this.setState(
    	// 생략...
    );
    isFetching = false;
    loader.remove();
  }
},

 

 

타입스크립트 복습 시작!

사실 비교적 작은 프로젝트를 자바스클비트로 진행하며, 타입스크립트의 필요성을 느낀적은 없었다.

하지만 언제까지 작은 프로젝트만 할 것도 아니고, 이제는 복습의 시간

전에 부트캠프를 진행하며 한 번 배워놔서 다행이다~

 

작게 작게 시작해서 타입스크립트와 친해지자

타입스크립트 디자인 패턴 책으로 한 걸음

 

 

참고링크

Debounce

=> https://www.freecodecamp.org/news/javascript-debounce-example/

=> https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

=> https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript

 

타입스크립트 디자인 패턴(책)

=> http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788960779914

 

 

sailing by Matthieu Da Cruz @unsplash