항해9915 [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-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. [TIL-27] 실전 프로젝트 - 로그인 기능 구현(Intercepter, ESLint 에러) Today목표 : 05/24일 실전 프로젝트 : 로그인 기능 구현(Intercepter, ESLint 에러) 프로젝트 셋팅을 마치고, 디자인이 나오기 전까지 우선적으로 기능 구현을 할 수 있는 부분 부터 작업하기로 하여 로그인 기능 구현을 시작했다. 로그인 처리 과정에서 공부한 부분과 이 기능을 사용한 이유, ESLint 설정으로 인한 에러에 대해 정리해 보았다. 알게된점, 1. 내가 instance와 intercepter를 적용한 이유 ✅ - instance를 사용한 이유 1) axios마다 base url, content-type , token과 같은 헤더값 등 동일한 값 등의 처리를 줄이기 위해 2) api 호출할 때마다 반복되는, 중복되는 axios 인스턴스를 생성을 줄이기 위해 axios cre.. 2023. 5. 25. [WIL-025] 토이 프로젝트 - WLW : WeLuvWine 와인 사이트 프로젝트 Week목표 : 05/05일~05/11일 토이프로젝트 WLW : WeLuvWine 와인 사이트 프로젝트 WLW : WeLuvWine 와인 사이트 프로젝트✅ 이번 주는 첫 협업 토이 프로젝트 주간이었다. 백엔드 Spring 4분과 프론트 React 2명, 총 6명이서 진행한 첫 프로젝트였으며 주제는 와인 사이트 정보를 크롤링 하여 만든 우리만의 와인 추천 및 리뷰 사이트이다. 결과물은 다음과 같다. - SA 보러 가기: https://www.notion.so/S-A-a3f56ee2319a4e50b8a78313e7511ff7 - Github : https://github.com/junvely/WeLuvWine-FE - Youtube 시연영상 : https://www.youtube.com/watch?v=dqB.. 2023. 5. 15. [TIL-017] JSON-Server / fetch와 axios 차이 / 면접 스터디 3회차 Today목표 : 4/28일 면접 스터디 3회차 JSON - Server ✅ 아주 간단한 DB와 API 서버를 생성해주는 패키지다. 사용 목적 : 백엔드와 협업 시에 백엔드의 DB구축과 API Server가 완성될 때 까지 프론트에서 개발에 임시적으로 사용할 mock data를 생성하기 위함 => json-server를 통해서 임시 API를 구축하고, 서버의 data를 mocking(흉내,모의) 할 수 있으며 이것을 통해 선제적으로 FE 개발을 진행할 수 있다. 사용 방법 1. json-server 설치 => json-server는 보통 4000번 port를 이용한다. yarn add json-server yarn json-server --watch db.json --port 4000 2. db.json.. 2023. 4. 29. 이전 1 2 3 다음
