[Final Project] 8/23 (월)

오늘 작업 내용

• 검색창 기능 및 css 개선

---

keyDown 이 두번 실행되는 문제

검색창에 방향키로 검색결과를 선택하기, enter키 로 검색결과 보기, 한글 자음도 인식하기 기능을 추가했다.

방향키 기능을 만들다가 최초로 키를 눌렀을 때 keyDown 함수가 두번 호출되는 문제가 발생했다. 이벤트 버블링관련 문제인가 싶어 event.stopPropagation 도 해보았지만 변화가 없었다.

그래서 delta 상태변수를 만들어 0.01 초 안에 다시 keyDown 함수가 호출되면 종료하는 식으로 해결했다.

const isDoubleKeyDown = () => {
  setDelta(Date.now());
  let now = Date.now();
  if (now - delta < 10){
    console.log("Prevent double keydown!")
    return true;
  }
  return false;
}

---

한글 문자열 검색

한글 검색은 korean-regex 패키지를 이용했다. 직접 만들어볼까 하다가 시간이 너무 많이 걸릴 것 같아서 패키지를 사용했다.

처음에는 weekly downloads 가 더 많은 hangul-js 패키지를 이용했는데 검색하고자 하는 문자열이 대상 중간에 포함되어 있는 경우 검색이 안되어서 바꾸었다. 예를 들어 '드'를 입력하면 '헤드윅'이 검색이 안된다.

한글 검색 관련 참고 자료

• https://taegon.kim/archives/9919 (원리에 대한 글)
• https://bluewings.github.io/unobstructed-hangul-regular-expression/ (패키지 만드신분 블로그)

나도 언젠간 좋은 package 를 만들어서 배포해보고 싶다는 생각이 들었다.

---

같은 페이지에서 history.push() 할 경우 state 가 update 되지 않는 문제

같은 페이지에서 history.push() 를 할 경우 state 가 update 되지 않아 useEffect 가 실행이 안된다.

문제를 해결하기 위해 URL 객체로 host 주소를 받아온 뒤 window.location.assign 을 사용하여 페이지를 로딩하였다.

---

내일 작업

CSS 는 시간이 부족해서 못했다. 내일 할 예정.