Today I Learned
- Javascript
* debounce
🚩Where they are..
- in private gitHub
Today Review
- 움짤 검색기
- 키워드를 검색하면 키워드의 api를 불러와 검색된 단어의 움짤을 보여준다.
- 검색한 단어들은 히스토리 내역에 쌓이게 되고 히스토리 내역에 있는 아이템을 검색하면 다시 이동할 수 있다.
추가기능 및 개선사항
- 중복 키워드는 히스토리에 쌓이지 않게함/
if(){}의{}블록 스코프 때문에 고민을 많이했다. 검색어가 패치되는 부분과 히스토리 내역이 쌓이는 부분이 함께 있었는데 if문 조건은 히스토리 내역이 쌓이는 부분만 적용하고 싶었기 때문. 그러면 if문 안의 변수 접근이 되지 않기 때문에 애를 먹었지만 결국 함수화해서return해서 사용했다.
- 히스토리 아이템 삭제 기능을 구현/
filter()을 사용해서imutable하게 구현 - 버그 개선/
input의 이벤트를keyup으로 받아서 키워드를 api fetch 해주고 있었는데 영어일 경우 문제는 없지만 한글일 경우에는 문제가 생긴다. 다음 키워드를 쉽게 받기 위해서e.target.value=''처리를 해놓았는데 이 이후에도 한글 버퍼링 때문에 이전 단어의 마지막 글자가 남아있는것 .. 결국 이벤트를submit으로 바꿔서 해결했다. 이 경우debounce()가 필요없긴 할것 같다. 엔터키로 키워드를 보내주기 때문..!
Frontend be Fullstack