항해99/프로젝트19 [TIL-37] 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 1. react-query 도입 이유 성능 개선 방법들에는 네트워크 요청 및 응답 시간을 줄이기 위해 최적화된 서버 설정, 캐싱 기법, 데이터 압축 등을 고려할 수 있을 것 같다. 그 중 데이터 압축은 이미지 최적화를 진행할 때 하도록 하고, 무한 스크롤을 최적화하기 위해, 즉 스크롤 시 마다 요청되는 서버와의 데이터 통신 횟수와 속도를 개선 하기 위해서는 무엇 보다도 캐싱 기능을 고려하지 않을 수 없었다. 때문에 자동으로 캐싱 기능을 제공하는 react-query를 사용하였다. 2. react-query useInfiniteQuery를 도입한 이유 지금까지는 usequery 와 refetch, 그리고 Intersecti.. 2023. 6. 20. [TIL-36] 무한 스크롤 기능 구현 - Intersection Observer API 무한 스크롤의 도입 장점 페이지네이션은 사용자가 다음페이지로 넘어갈 때 마다 번호를 눌러줘야한다는 단점이 있다. 버튼을 눌렀을 때 페이지가 바뀌는 피로감과 눌러야하는 노동력이 들 수 있다. 무한 스크롤은 이런 단점을 극복할 수 있고, 사용자들이 덜 기다리고, 더 편리하게 웹서핑 할 수 있게 한다. 무한 스크롤의 단점 1. 사용자가 현재의 위치를 알기 힘들다. 2. 원하는 위치에 있는 자료를 찾기 힘들다. 3. 웹페이지의 푸터 부분을 볼 수 없다. 4. 글을 읽고난 후 뒤로가기를 했을 때 원래 위치로 돌아가기 힘들다. 무한 스크롤의 도입 이유 우리 프로젝트의 경우, 특정 오피스 정보를 찾을 수 있도록 검색 서비스가 구현되어 있고, 그 외에 아무래도 여러가지 오피스 정보를 계속해서 둘러볼 수 있도록 하기 위.. 2023. 6. 19. [TIL-35] react-query와 검색 기능에서의 캐싱 처리 Today목표 : 06/15일 react-query와 검색 기능에서의 캐싱 처리 요즘 실전 프로젝트로 인해 너무 바쁘다... 이제 겨우 리팩토링을 진행하면서 저번 중간 발표회 때 받은 react-query에 대한 질문과, 검색 기능을 이용할 때 react-query를 사용했을 때의 문제점 등을 정리해 보고자 한다. 질문 받은 점, 1. 리액트 쿼리의 장점에 대한 답변 중 꼬리 질문 => 리액트 쿼리에서 refetch를 사용하면 서버의 데이터 변경을 알 수 있는 것인가? refetch를 사용하면? 서버의 데이터가 변경됐을 때 refetch로 변경된 데이터를 가져올 수 있다는 걸로 들린다. => 공부한 내용 : refetch는 서버의 데이터 변경 여부를 실시간으로 감지하는 기능은 아니며, refetch를 호.. 2023. 6. 15. [TIL-34] 성능 개선 / 렌더링 최적화 - QueryClient - defaultOptions : refetchOnWindowFocus Today목표 : 06/14일 성능 개선 / 렌더링 최적화 - QueryClient - defaultOptions : refetchOnWindowFocus 이번 주 부터는 기능구현이 어느정도 완성되었기 때문에 성능 개선 및 렌더링 최적화를 슬슬 진행해보고자 한다. 먼저 react-query 사용 시 발생하는 불필요한 데이터 통신 옵션을 꺼주었다. 문제 상황, react-query 사용 시 윈도우에 포커스 할 때 마다 계속해서 데이터 통신이 refetch되는 현상 발생 해결 방법, index.js 에서 queryClient의 defaultOption으로 'refetchOnWindowFocus'를 false로 설정해 준다. // index.js 에서 queryClient const queryClient = .. 2023. 6. 14. [WIL-33] 실전 프로젝트 중간 발표 - 결과 / 회고록 Today목표 : 05/19 ~ 06/11일 실전 프로젝트 중간 발표 - 결과 / 회고록 실전 프로젝트를 시작한지 거의 3주가 다되었다. 오늘은 9일날 진행한 중간 발표 결과와 피드백에 대한 회고를 정리하고자 한다. 알게된점, 1. 현재까지 전반적인 진행상황 먼저 MVP로 구상했던 기능들은 채팅 기능을 제외하고는 모두 구현까지는 진행했다. 기본적인 CRUD, 검색 기능, 카카오 Map api를 이용한 위치 검색, 전역상태 useContext로 관리해보기, 간단한 예약 기능, 배포까지 완성된 상태다. 2. 중간 발표 후 피드백 중간 발표 결과는 너무나도 아쉬웠다. 1. 코드 가독성과 컨벤션적으로 만족하지 못한 점수가 나왔다. 사실 전체 팀 점수라서 백엔드가 문제인지 프론트가 문제인지는 아직 알지 못하나 나.. 2023. 6. 12. [TIL-32] 실전 프로젝트 - 검색 기능 구현(useContext로 전역 상태, 검색 쿼리 관리하기) Today목표 : 06/04일 실전 프로젝트 : 검색 기능 구현 - useContext로 전역 상태(검색 쿼리) 관리 하기 오늘은 내가 맡은 스코프 중 메인 페이지의 검색 기능을 구현하며 사용한 useContext의 기본적인 사용 방법과 리팩토링 과정을 정리해 보려고 한다. 우선 검색 기능 플로우를 살펴보자. 사용자가 header의 검색 아이콘을 클릭하면 토글이 내려와 검색어를 입력하도록 한다. 검색된 결과물은 메인 페이지에 보여져야 한다. 메인 페이지와 header는 Layout 컴포넌트 하위에 위치하고 있다. 각각 별개의 컴포넌트에서 검색 쿼리에 대한 데이터를 주고 받아야 하기 때문에, 전역적으로 상태를 관리해야 할 필요성이 있다고 생각했다. 이에 지금까지는 클라이언트 전역 상태를 redux를 사용해.. 2023. 6. 5. 이전 1 2 3 4 다음
