4전 4전

자바스크립트 애프리케이션에서는 사용자가 웹페이지와 상호작용하는 동안 발생하는 다양한 이벤트들을 다루게 됩니다.특히, scroll, resize, input, mousemove와 같은 이벤트들은 매우 짧은 시간 간격으로 연속해서 발생하는데, 이런 식으로 이벤트 핸들러가 과도하게 호출되면 성능 저하나 불필요한 서버 요청이 발생할 수 있습니다. 이런 문제를 해결하기 위해 디바운스(Debounce)와 쓰로틀(Throttle)이라는 기법을 사용해 볼 수 있습니다.이 두 기법은 연속해서 발생하는 이벤트를 효율적으로 제어하여 성능을 최적화하는 데 도움을 줍니다. 이번 글에서 디바운스와 쓰로틀에의 활용 방법에 대해 간단하게 한번 알아보겠습니다.| 디바운스디바운스는 연속된 이벤트 호출을 그룹화하여 마지막에 한 번만 실행..

카카오 지도 API를 활용한 프로젝트를 진행하던 중,백엔드 서버에서 받아온 여러 위치 데이터를 바탕으로지도에 마커를 표시하는 기능을 구현해야 할 일이 있었습니다. 이 과정에서 다수의 마커를 효율적으로 관리하고,지도를 최적화하는 방법에 대해 고민하게 되었습니다. 이번 글에서 어떠한 과정으로 고민하고 문제를 해결했는지 작성해보려 합니다. -> 참고: 프로젝트는 Next.js, tailwind css, typescript를 사용하였습니다.| 지도 생성우선 카카오 지도 API를 사용하기 위해다음과 같이 next.js의 Script 태그를 사용해 스크립트를 포함시켜 줍니다.const KakaoMap = () => { return ( );};export default Kaka..

최근에 대한민국 철봉 지도라는 프로젝트를 진행하면서 사용자가 지도에 철봉 위치를 등록하면서 주변 사진을 이미지로 업로드하고, 업로드한 이미지를 다른 사용자들이 확인할 수 있는 기능을 구현하였습니다. 이때 저희 서비스 특성상 고화질 이미지를 제공할 필요성이 크지 않고, 거리뷰를 통해 확인할 수 있는 기능을 제공함으로써 서버의 부담을 줄이고, 로딩 속도를 올리기 위해 이미지를 리사이징 하여 용량을 줄이기로 결정하였습니다. | react-image-file-resizer 먼저 이미지를 리사이징 react-image-file-resizer라는 라이브러리를 활용해 보기로 했습니다. https://www.npmjs.com/package/react-image-file-resizer react-image-file-re..

useCallback()은 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 해 함수형 컴포넌트에서 반복되는 함수를 메모이제이션하여 재사용하도록 해줘 | useCallback() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 함수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 함수도 초기화되는 거라고 할 수 있습니다. function App() { // 렌더링 될때마다 초기화 const 오래걸리는함수 = (num) => { return num + 10; }; return 값: {오래걸리는함수(5)}; } useCallback()을 사용하면 메모이제이션한 함수를 제사용 하기 때문에 함수가 초기화되는 것을 막을 수 있습니..

useMemo()는 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 합니다. 메모이제이션을 하는데 이는 함수형 컴포넌트에서 반복되는 계산 값을 캐싱하여 재사용하도록 해줍니다. | useMemo() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 변수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 값도 초기화되는 거라고 할 수 있습니다. function App() { // 대충 오래걸리는 함수 const 오래걸리는함수 = () => { console.log('렌더링 됨'); return 10; }; const value = 오래걸리는함수(); // 렌더링 될때마다 초기화 return 값: {value}; } useMem..