4전 4전

카카오 지도 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..