_.memoize
[JS] Lodash _.memoize 소스 코드 톺아보기
[JS] Lodash _.memoize 소스 코드 톺아보기
2024.04.30_.memoize 소스코드Lodash 라이브러리의 Memoize 메서드를 사용하면 이전에 진행했던 연산 결과를 재사용할 수 있다. 실시간 검색창을 구현할 때 입력한 키워드에 대한 API 호출을 시도하는데, 이미 검색했던 키워드는 결과를 캐싱해놓고 재사용하면 API 중복 호출을 방지할 수 있다. 이때 Lodash의 Memoize를 활용할 수 있다(물론 키워드에 대한 결과값이 자주 변한다면 캐싱 기능을 사용할 필요 없다) 실시간 검색창에 활용한 Memoizeimport _ from 'lodash';export const requestQuotes = _.memoize(async (title) => { const res = await fetch( `https://animechan.vercel.app/ap..
[React] 리액트로 실시간 검색창 구현하기
[React] 리액트로 실시간 검색창 구현하기
2024.04.30글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Debounce는 이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리하는 것을 말하며, Memoize는 이전 연산 결과를 재사용하는 것을 말한다. Debounce와 Memoize를 활용해 불필요한 API 요청을 방지할 수 있다. Animichan은 일본 애니메이션에 등장한 인용문(Quotes)을 제공하는 OpenAPI다. title 매개변수에 애니메이션 제목을 쿼리스트링 보내서 요청하면, 해당 애니메이션의 인용문 세트를 받아올 수 있다. 이 API를 이용해 간단한 검색 어플리케이션을 구현할 수 있다. // Request'https://animechan.vercel.app/api/quotes/anime?title=naruto'..