240819 TIL_ 최종 프로젝트

오늘의 기가 막힌 트러블 슈팅

뭔가뭔가 이상한 친구가 오늘 앞길을 막았다.

바로바로

    else if (event.key === 'ArrowDown') {
      event.preventDefault();
      setActiveIndex((prev) => (prev >= response.length - 1 ? prev : prev + 1));
    }

키보드 아래로 내려갔을 때 이 친구였다.

문제는 맨 처음 화살표 다운을 누르면 두 번 함수가 실행 되어 두 번 내려간다는 것.

근데 진짜 웃긴 건 해결한 지금까지도 이유가 명확하지 않다...^^ 좀 더 탐구해야 함

의혹 1) 인풋에서 div로 내려갈 때 리랜더링이 발생해서
의혹 2) onChange 랑 onKeyDown 이랑 같이 써서

---

의문1) 영어일 땐 안그럼
의문2) 마우스 커서 위치를 바꾸면 됨

왜인지는 진짜 모르겠는데 일단 마우스 커서 위치를 바꾸면 된다는 것을 착안해서 해결 완료했다.

해결방법

setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.blur();
          inputRef.current.focus();
        }
      }, 100);

나는 지금 디바운스 걸어놓고 -> 서버에서 데이터 찾은 다음(response 있을 경우) -> 그것을 화살표 아래 방향으로 내려가는 중이니까, 서버에서 데이터를 담았을 때 이걸 실행시켜줬다.

ref에 담은 포커스를 없애면... 이상하게 된다.... ㅋㅋㅋㅋㅋㅋㅋ 진짜 이걸로 하루종일 괴로워한 듯 하다.

그 외에도 뽀시락뽀시락 알럿 div 제작, 약간의 리팩토링,

헤더 트러블 슈팅

디테일 페이지에서도 헤더의 색을 변하게 하기 위해서

    const targetNavIndex = HeaderNavPaths.findIndex((item) => {
      if (item === '/') {
        return pathName === '/';
      } else {
        return pathName.startsWith(item);
      }
    });

    setCurrentIndex(targetNavIndex);
    setActiveIndex(targetNavIndex);

셋 엑티브 인덱스를 스타트위드 값을 줘서 먹여놨는데,
문제는 하단

if (index === currentIndex) return;

인덱스 === currentㅑㅜㅇㄷㅌ 일 떄 return을 시켜놔서 안타깝게도 디테일 페이지에서 전체 보드로 못 넘어가는 사태 발 ... .. 생 .... ...

if 식 안에 또 다른 조건문을 주기로 했다. 이건 쉽게쉽게 라우터 푸쉬로 처리.