본문 바로가기

검색2

React Debounce 검색 기능 요즘 검색 기능을 보면 대부분의 사이트에서 글자 입력마다 결과가 바로바로 보이는 것을 확인할 수 있습니다. 해당 기능을 단순히 input의 onChange마다 API 콜을 하게된다면 비효율적으로 많은 API 콜이 발생하게 됩니다. 특히 API 요청 수의 제한이 있거나 수에 따라 결제가 이루어진다면 해당 방식은 문제가 발생하게 됩니다. 아래는 코엑스를 입력했을 때, 글자 하나하나 API 요청을 하고 있는 모습입니다. Debounce 이를 해결하기 위해선 debounce라는 개념을 알아야합니다! debounce는 연속해서 함수를 호출 했을 때, 마지막 함수만 호출하도록 하는 방법입니다. // 검색어 입력을 받는 state const [searchAddress, setSearchAddress] = .. 2022. 1. 26.
Node.js 검색기능 구현하기 유사검색 검색어를 완전히 똑같게 입력하지 않아도 일부 내용이 같으면 검색하는 것을 말합니다. SQL 문법에 like 문법이 있어 Sequelize Docs에서 해당 문법을 확인할 수 있었습니다. sequelize의 where 부분에 아래와 같이 Op.like를 이용하면 됩니다. const { Op } = require("sequelize"); { where: { { brand: { [Op.like]: `%${searchText}%` } }, }, } 진행중인 프로젝트에서 상품 검색을 위한 검색 기능이라, 브랜드나 상품명을 검색했을 때 검색결과가 나오길 바랬습니다. Sequelize에선 or 문법도 Op에서 제공하고 있더군요. 아래와 같이 [Op.or] 을 이용해주었습니다. { where: { [Op.or.. 2021. 4. 23.