lodash

Lodash 모듈을 import할 때 import { cloneDeep } from 'lodash' 이렇게 작성 하면 풀버전 모듈을 가져온다. 몇몇 함수를 사용하기 위해 불필요한 import를 하는 셈이 된다. 참고로 Lodash는 웹팩의 프로덕션 빌드로 번들링하면 25kb 정도 차지한다고 한다. 30kb 정도의 React DOM, Vue.js와 비교해도 꽤 무거운편이다.import { cloneDeep } from 'lodash' // 73.15 kB (gzip: 25.42 kB) import 구문을 아래처럼 작성하면 필요한 함수만 불러올 수 있다. 하지만 여러 Lodash 함수를 연속적으로 사용하는 chaining 할 수 없는 단점이 있다. 따라서 아래 방법은 단일 함수를 사용할 때 적합하다.impo..

_.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..