문제 상황현재 BottomSheet를 활용하여 장소 정보를 표시하는 기능이 있습니다.그러나, 장소 리스트를 제공하는 API가 페이지네이션을 지원하지 않고, 한 번에 모든 데이터를 응답하는 구조입니. 이로 인해 DOM을 확인해보면 모든 장소 리스트가 한 번에 렌더링되는 문제가 발생합니다. 현재 데이터베이스에는 약 800개의 장소 정보가 저장되어 있으며, 최악의 경우 800개의 장소 컴포넌트가 모두 DOM에 추가될 수 있습니다.  이러한 문제는 다음과 같은 성능 저하를 초래할 수 있습니다.  1. 렌더링 성능 문제: DOM 노드가 과도하게 많아져 브라우저의 렌더링 성능이 저하됨. 2. 메모리 사용 증가: 불필요한 컴포넌트가 많아지면서 메모리 사용량이 급격히 증가함. 3. UX 저하: 스크롤이 버벅거리거나, ..

지난 글 [React] 리액트를 사용하는 이유 (컴포넌트 분리가 왜 중요할까 ?) 에 이어 제가컴포넌트 분리 기준을 여러 방식으로 했던 경험을 공유하고, 현재는 어떠한 방식으로 컴포넌트를 분리하는 지 작성해보도록 하겠습니다. 컴포넌트란 ?컴포넌트는 React의 핵심 개념 중 하나입니다. 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기반이 되므로 React 여정을 시작하기에 완벽한 곳입니다!- 리액트 공식문서-   리액트는 컴포넌트들의 조합으로 UI를 구축합니다. 위 사진처럼 컴포넌트는 트리 구조로 형성되어 있으며, 복잡한 사용자 인터페이스를 작고 관리 가능한 단위로 나누는데 중요한 역할을 합니다. 왜 컴포넌트를 분리해야 할까 ?지금부터 컴포넌트 분리의 중요성을 컴포넌트 분리라는 것을 모르던 시절의 저..

문제 상황 위 이미지처럼 죄측 사이드바의 자주 찾는 메뉴를 눌렀을 때, 리렌더링이 필요하지 않은 컴포넌트들(헤더, 유저 정보 등)까지 리렌더링 되는 것을 볼 수 있습니다.  원인MyPage 컴포넌트에서 전역 스토어 selectedComponent를 구독하고 있었고, 사이드 바 메뉴를 클릭하면 selectedComponent 값이 변경되기 때문에 Mypage 컴포넌트가 리렌더링 되는 것이었습니다.const Mypage = () => { const { selectedComponent } = useControllSidebarStore(); return ( {match(selectedCompone..

개발 환경웹앱을 개발하는 과정에서 현 위치 정보를 조회해야 했습니다. 따라서 React + Geolocation 조합으로 현 위치 정보를 가져오려했습니다. 문제 상황아무래도 PC에서 현 위치를 조회하는 것이다보니 모바일 기기에서 GPS를 조회하는 것보다 오차가 클 수 밖에 없었습니다. Geolocation API를 사용하는 경우 인근 Wi-Fi 네트워크의 SSID와 신호 세기를 사용하여 위치 정보를 파악합니다. 따라서 위치가 실시간으로 이동 중일 경우에는 잘못된 정보를 받아올 확률이 높아질 수 밖에 없었습니다.  실제로 테스트 결과 서울시 강남구에 있음에도 중랑구의 위치 정보를 받아오는 경우도 있었습니다. 차량을 탑승한 채 위치 이동 중에 측정되는 비정상 데이터의 비율은 15%에 가까웠습니다. 따라서 위..