MemoProject) lodash를 사용해 성능최적화시켜보기

iamokian·2022년 7월 25일
0

메모프로젝트를 클론코딩하며 이런저런 배움이 있었는데 그중에서도 성능최적화부분이 기억에 남았다. 이 부분은 많은 영역에서 필히 사용될것이고 이전에도 랜딩페이지를 제작해보며 배웠던 영역이라 필기를 해본다.

메모 타이틀이나 컨테이너를 입력하면 해당 데이터가 로컬스토리지에 저장이 된다.

하지만 입력될때마다 onChange가 발동해 입력값을 실시간으로 감지하며 데이터를 바로바로 욱여넣으면 그것은 성능에 큰 지장을 준다.(이것은 아주 작은 프로젝트이지만 큰 규모라면 이런 작은영역이 쌓이고 쌓여 엄청나게 무거운 프로젝트가 되겠지)

그리하여 그것을 딜레이 시켜 정해진 시간이 도달하면 데이터가 저장되도록 lodash의 debounce를 사용했다.

https://lodash.com/ lodash 라이브러리를 알고싶다면 옆 링크로!

기본적으로 들어가는 매개변수는 아래와 같다.

debounce(콜백함수, 밀리세컨드)

해당프로젝트해서는 setItem 이라는 함수를 만들어

debounce(setItem, 5000);

5초뒤에 저장이 되도록 설정을 했다. 작지만 성능을 최적화시키는 방법중 하나를 배울 수 있었다.

profile
필기하고 기록하고

0개의 댓글