8/9주차 - 나루/이유진 워크북 과제 제출

[YuJin020303]

✅ 8주차 워크북 완료 🎉

워크북을 완료한 챌린저분들, 수고 많으셨습니다!
이곳에 학습 진행 중 트러블슈팅(문제 해결 경험), 커밋별 설명, 그리고 소감을 자유롭게 남겨주세요.
서로의 경험을 공유하며 성장해봐요! 🚀

---

🛠️ 트러블슈팅 (Troubleshooting)

- 학습 중 겪었던 문제와 해결 과정을 기록해주세요!
- 다른 챌린저들에게 도움을 줄 수 있도록 해결 방법도 함께 남겨주시면 좋아요.
- 아래에 본인이 수정해서 작성하시면 됩니다. 없으면 안적어주셔도 됩니다 ~ 

문제

useEffect에 close, open 함수를 넣으니 Sidebar가 닫히지 않는 문제가 발생함

원인 분석

이벤트 리스너가 등록될 때, open과 close가 매 렌더링마다 새로 생성되면 이미 등록된 리스너와 반환되는 cleanup이 참조가 달라서 정상적으로 해제되지 않거나, 닫히지 않는 현상이 발생  

해결 방법

toggle, open, close를 useCallback으로 감싸서 매 렌더링마다 새 함수가 생성되지 않고 항상 같은 참조를 유지  

---

📌 커밋별 설명 (Commit Log)

• 진행한 작업을 커밋 단위로 간략하게 정리해주세요!
• 어떤 기능을 추가했는지, 어떤 수정을 했는지 한눈에 확인할 수 있도록 작성하면 좋아요.

[커밋 이름](커밋 주소) : 설명 적기 ~~
+ 이미지도 첨부해주시면 좋아요 ~

[kmk0207]

버튼 코드부분을 따로 만드셔서 읽고 알아보기 편해서 좋았습니다

[onebone]

8주차 워크북 고생 많으셨습니다! 쓰로틀링과 디바운싱을 잘 이해하신 것 같아요. 한 가지 걸리는 점은 useThrottle이 false -> true에서 바뀌는 건 쓰로틀이 걸리는데 반대 경우는 바로 설정되게 되어 있는 것 같네요! 제가 예상한 동작은 무슨 값이든 간에 쓰로틀이 걸리는 구조였어서 조금 코드를 읽는 데 시간이 걸린 것 같아요. 워크북을 보시면 스크롤에 쓰로틀을 사용하는 케이스도 적혀있어서, 지금처럼 inView를 처리하기 위한 특수 로직이 아니라 일반적인 상황에도 대응할 수 있게 하면 더 좋을 것 같네요!

8주차 워크북 고생 많으셨고 앞으로 얼마 안 남은 워크북 모두 화이팅입니다 💪

[YuJin020303]

inView를 처리 하기 위한 특수로직이 아닌 일반적인 상황에도 대응할 수 있도록 코드를 수정하였습니다.

function useThrottle<T>(value: T, delay: number): T {
  const [throttledValue, setThrottledValue] = useState(value);
  const lastExecuted = useRef(Date.now());
  const timer = useRef<number | null>(null);

  useEffect(() => {
    const now = Date.now();
    const remaining = delay - (now - lastExecuted.current);

    // 기존 타이머 제거
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
    }

    if (remaining <= 0) {
      // delay 지나면 즉시 실행
      lastExecuted.current = now;
      setThrottledValue(value);
    } else {
      // 남은 시간만큼 타이머
      timer.current = window.setTimeout(() => {
        lastExecuted.current = Date.now();
        setThrottledValue(value);
        timer.current = null;
      }, remaining);
    }

    return () => {
      if (timer.current) {
        clearTimeout(timer.current);
        timer.current = null;
      }
    };
  }, [value, delay]);

  return throttledValue;
}