범부 개발자 아등바등 살아남기

'Set'은 중복된 값을 허용하지 않는 자료 구조 입니다. Set 자료구조를 사용하면 배열 내에서 중복된 값을 빠르게 제거할 수 있습니다.

• Javascript에서 제공하는 내장 객체로, 중복된 값을 허용하지 않는 값들의 집합
• 중복된 값을 허용하지 않음
• 순서를 보장하지 않음(인덱스 없음)
• 고유 메서드 존재 (add, delete, has, clear 등의 메서드 사용)

• add : 값을 추가
  - 이미 해당 값이 있다면 무시

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // 이미 중복된 값이 있으므로 무시됨
console.log(mySet); // Set { 1, 2 }

• delete: 값을 삭제
  - 해당 요소가 없다면 무시

const mySet = new Set([1, 2, 3]);
mySet.delete(2); // 2를 제거
mySet.delete(4); // Set에 없으므로 아무런 작업도 하지 않음
console.log(mySet); // Set { 1, 3 }

• has: 해당 값이 있는지 확인
  - 있으면 true, 없으면 false 반환

const mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // true
console.log(mySet.has(4)); // false

• clear: 모든 요소 제거

const mySet = new Set([1, 2, 3]);
mySet.clear(); // Set을 비움
console.log(mySet); // Set {}

• 해당 배열 Set으로 변환
• 생성한 Set 다시 배열로 변경

const arr = [1, 2, 1, 4, 2];
const mySet = new Set(arr);
const result = [...mySet];
console.log(result); // [1, 2, 4]

debounce와 throttle은 연속된 사용자의 입력을 처리하는 기술 입니다. debounce는 특정 기간 내의 입력 중 가장 마지막 입력을 처리하고, throttle은 특정 기간 내에 입력이 한번 되면, 이후 받는 다른 입력들은 모두 무시합니다. 이를 통해 성능 최적화 혹은 연속 입력으로 인한 에러를 방지할 수 있습니다.

• 연속 이벤트 발생시, 일정한 시간 동안 이벤트가 연속으로 발생 할 시, 마지막 이벤트 발생에만 핸들러를 호출
• 주로 텍스트 입력, 스크롤 이벤트(새로운 데이터 호출)에 적용
• 불필요한 처리 혹은 네트워크 요청 방지
• ex) 사용자가 검색어를 입력할 때 검색 결과 업데이트

• 일정한 주기로 이벤트 핸들러를 호출
• 일정 시간 동안 이벤트가 연속 발생하더라도, 맨 처음 한번만 핸들러를 호출하고, 다음 주기에 다시 실행 가능해짐
• 스크롤 위치에 따라 이벤트를 발생할 경우 사용

• debounce 함수 작성
  - setTimeout 조작을 위한 변수생성
  - delay 시간 안에 새로운 입력이 들어오면 기존에 있던 setTimeout 실행 취소
  - 새로운 setTimeout  등록

/utils/debounce.js

const debounce = (func, delay) => {
  // setTimeout 조작을 위한 변수 생성
  let timerId;

  return (...args) => {
    // delay 시간 안에 새로운 입력이 들어오면 기존에 있던 setTimeout 실행 취소
    clearTimeout(timerId);

    // 새로운 setTimeout 등록하기
    timerId = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

export default debounce;

• throttle 함수 작성
  - setTimeout 조작을 위한 변수 추가
  - delay 시간 안에 새로운 입력이 들어오지 않았을 경우에만 실행, delay 기간 내일 경우 입력 무시
  - delay 시간 이후에 setTimeout 변수 초기화 시켜서 재실행 가능하게끔 처리

// utils/throttle.js

const throttle = (func, delay) => {
  // setTimeout 조작을 위한 변수 추가
  let timerId;

  return (...args) => {
    // delay 시간 안에 새로운 입력이 들어오지 않았을 경우에만 실행, delay 기간 내일 경우 입력 무시
    if (!timerId) {
      timerId = setTimeout(() => {
        func(...args);

        // delay 시간 이후에 setTimeout 변수 초기화 시켜서 재실행 가능하게끔 처리
        timerId = undefined;
      }, delay);
    }
  };
};

export default throttle;

• debounce, throttle 적용하기
  - 이벤트 핸들러 내부에서 debounce, throttle 사용 함수 정의하지 않도록 주의
  -  핸들러 내부에서 해당 함수를 정의할 경우, setTimeout 자체가 여러개 생겨 동작 오류가 남

import { useState } from "react";
import "./App.css";
import debounce from "./assets/utils/debounce";
import throttle from "./assets/utils/throttle";

function App() {
  const [search1, setSearch1] = useState("");
  const [search2, setSearch2] = useState("");

  // debounce 적용
  const debounceSearch = debounce((value) => setSearch1(value), 1000);

  // throttle 적용
  const throttleSearch = throttle((value) => setSearch2(value), 1000);

  // parameter 넣어주기
  const handleDebounce = (e) => {
    debounceSearch(e.target.value);
  };

  // parameter 넣어주기
  const handleThrottle = (e) => {
    throttleSearch(e.target.value);
  };

  return (
    <div className="App">
      <div className="title">{`< debounce 적용시켰을 때 (1초) >`}</div>

      {/* input에 이벤트 적용 */}
      <input onChange={handleDebounce}></input>
      <div>{`현재 입력된 값은 ${search1} 입니다.`}</div>
      <hr />
      <div className="title">{`< throttle 적용시켰을 때 (1초) >`}</div>

      {/* input에 이벤트 적용 */}
      <input onChange={handleThrottle}></input>
      <div>{`현재 입력된 값은 ${search2} 입니다.`}</div>
      <div className="throttle"></div>
    </div>
  );
}

export default App;