⚛️ 리액트 개발 환경 세팅: CRA vs Vite

쇼핑몰 검색창에 '자전거'를 검색하려고 'ㅈ...ㅏ...ㅈ...'를 입력할 때마다 화면이 깜빡거리거나, 구매 버튼을 실수로 다다닥 눌렀는데 결제가 두 번 된 경험, 있으신가요?
우리는 무심코 키보드와 마우스를 빠르게 조작하지만, 컴퓨터 입장에서는 0.1초마다 쏟아지는 명령을 전부 처리하느라 '과부하'가 걸리곤 합니다.

💡 핵심 문제:
"사용자가 1초에 10번 클릭한다고, 서버에도 10번 요청을 보내야 할까요?"
이 비효율을 막기 위해 개발자들은 디바운스(Debounce)와 스로틀(Throttle)이라는 교통정리 기술을 사용합니다.

오늘은 이 두 가지 기술이 어떻게 우리의 웹 서핑 속도를 지켜주는지, 그리고 개발자들은 이를 어떻게 구현하는지(React/Vue) 아주 쉽게 알아보겠습니다.

---

🚪 1. 엘리베이터의 지혜: 디바운스 (Debounce)

디바운스(Debounce)는 "마지막 행동이 끝날 때까지 기다려주는 기술"입니다.
가장 쉬운 예로 엘리베이터 문을 생각해보세요.

• 🏃 상황: 엘리베이터 문이 닫히려고 하는데 저 멀리서 사람이 달려옵니다.
• 🔘 행동: '열림' 버튼을 누르면 문이 다시 열리고 닫히는 시간이 초기화됩니다.
• ⏳ 결과: 마지막으로 탑승한 사람이 들어오고 나서, 일정 시간이 지나야 비로소 문이 닫히고 출발합니다.

웹사이트의 검색창이 바로 이 원리입니다.
여러분이 '자전거'를 칠 때 'ㅈ', '자', '잩'.. 입력할 때마다 검색하는 게 아니라, 입력이 딱 멈추는 순간(마지막 타자)에 한 번만 검색을 수행합니다.
덕분에 데이터 낭비를 막을 수 있죠.

💻 개발자는 이렇게 만들어요 (React Hook 예시)

// 사용자의 입력이 멈추면 delay 시간 뒤에 값을 바꿔주는 마법 상자
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // 타이머 설정: delay 시간이 지나면 값 변경
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 만약 시간이 되기 전에 또 입력하면? 기존 타이머 취소! (핵심)
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

---

🚇 2. 정해진 시간에만 출발: 스로틀 (Throttle)

스로틀(Throttle)은 "아무리 요청이 많아도 정해진 시간 간격으로만 실행하는 기술"입니다.
이번에는 지하철을 떠올려보세요.

승객이 아무리 많이 몰려와도, 지하철은 정해진 시간표(예: 5분 간격)에 맞춰서만 출발합니다.
중간에 승객이 더 탄다고 해서 바로 출발하지도, 늦게 출발하지도 않죠.
이 기술은 스크롤 기능에 주로 쓰입니다. 스크롤을 1초에 100번 내려도, 컴퓨터는 0.1초에 한 번씩만 화면 위치를 계산해서 버벅거림을 방지합니다.

💻 개발자는 이렇게 만들어요 (React Hook 예시)

// 아무리 호출해도 interval 시간 간격으로만 실행되는 마법 상자
function useThrottle(value, interval) {
  const [throttledValue, setThrottledValue] = useState(value);
  const lastRan = useRef(Date.now());

  useEffect(() => {
    const handler = setTimeout(() => {
      if (Date.now() - lastRan.current >= interval) {
        setThrottledValue(value);
        lastRan.current = Date.now();
      }
    }, interval - (Date.now() - lastRan.current));

    return () => clearTimeout(handler);
  }, [value, interval]);

  return throttledValue;
}

---

⚖️ 3. 한눈에 보는 차이점

두 기술 모두 "컴퓨터를 쉬게 해준다"는 점은 같지만, 사용 목적이 조금 다릅니다.
헷갈리신다면 아래 표만 기억하시면 됩니다.

구분	디바운스 (Debounce)	스로틀 (Throttle)
비유	엘리베이터 (기다림)	지하철 (시간표 준수)
핵심 원리	마지막 행동 후 실행	일정 시간마다 실행
주 사용처	검색어 입력, 창 크기 조절 끝	스크롤 내리기, 마우스 이동

💡 Vue 사용자라면?
위의 예시는 React의 'Hook'이라는 기능을 사용했습니다.
Vue.js를 사용하신다면 'Composables'라는 비슷한 방식을 통해, 똑같은 로직(setTimeout 활용)으로 구현할 수 있습니다.
도구의 이름만 다를 뿐, 성능을 최적화하는 원리는 만국 공통이랍니다.

---

✨보이지 않는 곳의 배려

우리가 매일 쓰는 웹사이트나 앱이 부드럽게 느껴지는 이유는, 단순히 인터넷이 빨라서가 아닙니다.
보이지 않는 곳에서 디바운스와 스로틀 같은 기술들이 끊임없이 교통정리를 해주며 데이터를 아껴주고 있기 때문입니다.

혹시 나중에 어떤 사이트에서 검색어를 막 입력했는데도 렉이 걸리지 않는다면,
"아, 여기 개발자가 디바운스 처리를 잘 해놨구나!" 하고 생각해보시는 건 어떨까요?
작은 기술의 차이가 명품 서비스를 만듭니다.