useMemo

포트폴리오 앱 성능최적화 작업기 1편

0. Intro 기존에는 Three.js를 사용해서 외부 소스의 gltf 모델링 파일을 컴포넌트로 변환하여 웹에서 3d를 구현했었다. 하지만 이번에 꼭 사용해보고 싶은 게 있어 3d 모델링 툴인 Spline을 사용해서 구현한 3d 모델링 파일을 코드로 export 하여 포트폴리오 앱에서 받아와 사용했다. 이 과정에서 모델링 파일을 받아오는 방식이 빌드 파일 내에 저장된 걸 사용하는 게 아니라 네트워크를 사용해서 받아오게끔 되어있어, 모바일에서는 정상적인 열람이 힘들 정도의 심각한 성능 저하가 발생하였다. 구글 라이트하우스를 돌려보면 데스크탑 환경에서 해당 3d 파일을 불러오는 코드만 삭제해도 퍼포먼스 점수가 28점에서 64점이 될 정도이다. 이를 해결하려면 모델링 파일 자체를 더 적은 폴리곤을 사용하거나..

useMemo

https://youtu.be/e-CnI8Q5RY4 (상기 영상과 코드스테이츠 유어클래스 내용을 참고하여 공부 내용을 정리합니다.) 1. useMemo 개념 설명 리액트 컴포넌트의 성능 최적화를 위해 사용되는 대표적인 hook들인 useMemo와 useCallback에 대해 알아보자. (useCallback은 별도 문서에 정리) Memoization useMemo의 memo는 memoization을 뜻한다. 메모이제이션이란 어떠한 커다란 문제를 풀 경우에 문제를 중복되는 하위 문제가 있고, 이 하위 문제의 결과를 저장해서 상위의 문제를 해결할 수 있는 경우에 하위 문제의 결괏값을 저장해두어 상위문제를 풀 때 연산횟수를 줄일 수 있는 방법을 말한다. 자세한 내용은 이전에 작성한 동적 프로그래밍 정리 내용을..