항해99 썸네일형 리스트형 [TIL-37] 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 1. react-query 도입 이유 성능 개선 방법들에는 네트워크 요청 및 응답 시간을 줄이기 위해 최적화된 서버 설정, 캐싱 기법, 데이터 압축 등을 고려할 수 있을 것 같다. 그 중 데이터 압축은 이미지 최적화를 진행할 때 하도록 하고, 무한 스크롤을 최적화하기 위해, 즉 스크롤 시 마다 요청되는 서버와의 데이터 통신 횟수와 속도를 개선 하기 위해서는 무엇 보다도 캐싱 기능을 고려하지 않을 수 없었다. 때문에 자동으로 캐싱 기능을 제공하는 react-query를 사용하였다. 2. react-query useInfiniteQuery를 도입한 이유 지금까지는 usequery 와 refetch, 그리고 Intersecti.. 더보기 [TIL-36] 무한 스크롤 기능 구현 - Intersection Observer API 무한 스크롤의 도입 장점 페이지네이션은 사용자가 다음페이지로 넘어갈 때 마다 번호를 눌러줘야한다는 단점이 있다. 버튼을 눌렀을 때 페이지가 바뀌는 피로감과 눌러야하는 노동력이 들 수 있다. 무한 스크롤은 이런 단점을 극복할 수 있고, 사용자들이 덜 기다리고, 더 편리하게 웹서핑 할 수 있게 한다. 무한 스크롤의 단점 1. 사용자가 현재의 위치를 알기 힘들다. 2. 원하는 위치에 있는 자료를 찾기 힘들다. 3. 웹페이지의 푸터 부분을 볼 수 없다. 4. 글을 읽고난 후 뒤로가기를 했을 때 원래 위치로 돌아가기 힘들다. 무한 스크롤의 도입 이유 우리 프로젝트의 경우, 특정 오피스 정보를 찾을 수 있도록 검색 서비스가 구현되어 있고, 그 외에 아무래도 여러가지 오피스 정보를 계속해서 둘러볼 수 있도록 하기 위.. 더보기 [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 = .. 더보기 [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.. 더보기 [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.. 더보기 [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.. 더보기 [WIL-002] 자바스크립트 기초 언어 주간 🦄 WIL : 자바스크립트 기초 언어 복습 + 알고리즘 ✨진행 날짜 : 4/2 ~ 4/8일 이번 주는 자바스크립트 기초 언어 주간이다. 온보딩 스터디에서 학습했던 내용들을 바탕으로 한 번 더 복습한다는 생각으로 진행했다. 마지막 이틀정도는 알고리즘 주간으로 넘어가 프로그래머스 알고리즘 문제를 풀었다. 이번 주 회고를 작성해보려고 한다. 이번주 목표, 달성 여부 1. Git을 통해 협업하는 기본적인 방법 - fork와 full requests, 협업 테스트 해보기 ✅(완료) 2. 자바스크립트 기초 강의 1~5주차 🟡(진행중) 3. 알고리즘 풀이 총 26문제 풀이✅(완료) 무엇을 공부했나? 이번주에 공부한 것들은 다음과 같다. 1. Git을 통해 협업하는 기본적인 방법 - fork와 full requests.. 더보기 [WIL-001] 토이 프로젝트 - 펫스타그램(Petstagram) 🦄 토이 프로젝트 19조 - 펫스타그램(Petstagram) ✨진행 날짜 : 3/28 ~ 3/31일(3~4일) 토이프로젝트 주간동안 3명의 팀원과 함께 펫스타그램(Petstagram)이라는 웹 사이트를 개발했다. 팀원들과 함께 3일동안 프로젝트를 진행하면서 느낀 부분들을 작성해 보려고 한다. 무엇을 고민했나? 일단 프로젝트 기간이 매우 짧았다. 원래 월~목요일까지 였으나, 우리는 첫 프로젝트 주제를 한 번 뒤엎고 새 주제로 변경하여 하루 ~ 이틀정도의 시간을 버렸기 때문에 시간이 많이 부족했다.. 처음 구상한 프로젝트 주제는 한강 정보 웹사이트 만들기였다. 한강의 여러 공원들(망원, 여의나루 등등...)의 지역들로 나누어 그 지역들의 명소에 대한 순위를 제공하고, 해당 장소에 대한 정보, 리뷰, 댓글 등.. 더보기 이전 1 2 다음
