debounce2 [React] 디바운스로 추천 검색 기능 구현하기 안녕하세요 :) 오늘 기능 테스트를 하다 이상한 문제를 발견했습니다. 문제 검색창에 관련 검색 추천리스트를 아래에 보여주도록 검색바 기능을 업그레이드했습니다. 근데 "디오"를 검색하면 "디"의 검색 결과가 나타나는 현상이 발생했습니다. 더군다나 키워드에 따라 추천 리스트가 제대로 나타나는 경우가 있고 아닌 경우가 있었습니다. 원인 자세히 살펴보니 이 문제는 한글의 문자표현 + 다른 리스폰스 시간에 따른 에러였습니다. 검색창에 입력되어 추천리스트 api 요청이 이루어지기 전에 어떤 키워드가 api 요청되는지 콘솔로 확인해 본 결과입니다. "디오"를 완성하기 위해 "딩"에서 "디오"로 넘어가기 전에 "디"라는 키워드가 api 요청되는 것을 확인할 수 있습니다. 왜 이런 문제가 발생하는 것일까요? 이는 한글에.. 2023. 11. 7. React Debounce개념 이전 포스팅에서 Throttle에 대해 알아보았는데, 이번에는 비슷하면서도 약간 다른 Debounce에 대해 알아보자. 구글에 Debounce에 대해 검색하면 아래와 같은 이미지가 나온다. Debounce란 개념은 전자공학에서 나온 개념인데, 예를 들어 리모콘 버튼을 누를 때, 사람 입장에서는 한번만 딸깍 하고 누르는 것 같지만, 내부적으로는 수많은 On / Off 신호들이 발생된다고 한다. 그래서 연속된 신호들이 이어져서 나타났을 때 마지막 신호만을 인정하고 나머지는 무시하는 것을 Debounce라고 한다. React에서도 마찬가지의 개념으로 쓰인다. 이 부분도 잘 정리된 블로그가 있어서, 번역하여 올려둔다. 원본은 아래와 같다. https://www.freecodecamp.org/news/javasc.. 2021. 11. 21. 이전 1 다음
