[0423] 트러블 슈팅 : 자동 검색

오늘은 ES6 문법들과 일급 객체로서의 함수, 자료구조 Map과 Set에 대해 알아보았다.

그리고 개인 과제인 영화 검색 페이지를 조금 만들었다.
이전까지 구현해본 적 없었던 입력창을 만들고 싶었는데,
검색 버튼이 따로 없고, 1초동안 입력이 없을 때 자동으로 검색이 되도록 구현을 했다!

근데 로직을 짜는게 너무 어려웠다. 생각 자체가 나지 않았다.
그래서 결국 구글링을 했다...

let tm = null;

document.querySelector('#search-input').addEventListener('input', (e) => {
  clearTimeout(tm);
  tm = setTimeout(() => {
    const filteredMovies = findMovies(movies, e.target.value);
    document.querySelector('#movie-section').replaceChildren();
    filteredMovies.forEach((m) => appendCard(m));
  }, 1000);
});

tm 변수를 null로 지정해놨다가 timeoutId를 저장한다. 그리고 또 입력값이 들어와서 event가 실행되면 아까 저장해놨던 Id를 이용하여 이전 타임아웃은 clear 해주는 방법이다.

일단 구현은 했는데 UX가 참 별로인 것 같다~
카드를 전부 지웠다가 다시 append 해서 그런가보다....
이건 어떻게 고쳐야 할까... 오우뇨우~🥹🥹🥹🥹
잠깐 생각해봤는데 흠...
검색결과를 나머지를 다 display: none으로 만드는 게 괜찮은 방법 같구려...

코딩은 알고보면 쉬운데 알기가 차ㅏㅏㅏㅏㅏㅏㅏㅏ암 쉽지 않은 것 같다....