<aside> 📁 목차

  1. 단디 소개
  2. 구현 과정에서의 기술적 경험 </aside>

단디 소개

기획 의도

[단디] 배너.png

꾸준히 일기를 작성하고 싶은 사람을 위한 일기 작성 플랫폼

핵심 기능

🌱 https://dandi-ary.site

구현 과정에서의 기술적 경험

프론트엔드

Input에 글을 입력해봅시다

무제.mov

어떻게 개선할 수 있을까?

1️⃣ Throttling (쓰로틀링)

마지막 함수가 호출된 후 일정 시간 동안 함수가 호출되지 않게 하는 방법

화면 기록 2023-12-07 오전 4.39.47.mov

function App() {
  const [textList, setTextList] = useState<string[]>([]);
  const [throttle, setThrottle] = useState(false);

  const throttling = (e) => {
    if (throttle) return;
    setThrottle(true);
    setTimeout(() => {
      setTextList([...textList, e.target.value]);
      setThrottle(false);
    }, 500);
  };

  return (
    <>
      <div className="App">
        <div className="inputDiv">
          <label htmlFor="testInput">아무 말이나 입력하세요!</label>
          <input name="testInput" type="text" onChange={throttling} />
        </div>
        {textList.map((text, index) => (
          <p key={index}>{text}</p>
        ))}
      </div>
    </>
  );
}