분류 전체보기141 [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. [WIL-031] 클론 프로젝트 - Out Stagram 인스타그램 클론코딩 Week목표 : 05/13일~05/18일 클론 프로젝트 Out Stagram : 인스타그램 클론 코딩 Out Stagram : 인스타그램 클론 프로젝트✅ 오늘은 클론 프로젝트 주간에 정신이 없어서 작성하지 못했던 부분들을 다시 정리해보려고 한다. 클론 코딩 프로젝트 백엔드 Spring 4분과 프론트 React 2명, 총 6명이서 진행하였고 인스타그램 PC버을 클론 코딩하였다. 결과물은 다음과 같다. - SA 보러 가기: https://www.notion.so/S-A-13db4f79c12e4f94a6eee28669fec243 - Github : https://github.com/17-outstagram/frontend GitHub - 17-outstagram/frontend Contribute to 17-.. 2023. 5. 28. [TIL-30] 실전 프로젝트 - 카카오 지도 API 기능 구현 Today목표 : 05/27일 실전 프로젝트 : 카카오 지도 API 기능 구현 오늘은 카카오 Map API를 이용해 지도 기능을 구현했다. 어제 까지는 Nave map api를 사용해서 지도를 띄워보았는데, 몇 가지 이유로 Kakao Map API로 변경하기로 결정 했다. 1. Naver에 비해 Kakao가 api 사용법이 굉장히 친절하고 공식 문서가 잘 되어 있었다. 2. Naver에 비해 Kakao 지도의 UI가 더 선명한 느낌이 들었다. 3. 우리 프로젝트에서는 주소를 우선 검색 하고, 주소 리스트를 띄운 후, 주소에 대한 지도를 띄워 주고자 했었다. Naver에서는 해당 기능을 api 공식 문서에서 찾기가 힘들었다. 이에 비해 Kakao에서는 이 기능을 지원하는 것으로 확인하였고, Kakao의 공.. 2023. 5. 28. [TIL-29] 실전 프로젝트 - 카카오 로그인 기능 구현(불필요한 데이터 통신, ESLint 구문 에러들) Today목표 : 05/26일 실전 프로젝트 : 카카오 로그인 기능 구현 (useQuery 사용 미숙 에러들, ESLint 에러) 오늘은 카카오 로그인 기능 구현을 완료했다. 구현하는 와중에 useQuery 사용에 미숙하여 발생한 에러들을 기록해 보았다. 알게된점, ❗카카오 로그인 요청 useQuery에서, api에 인자를 보내며 호출하는데 3번의 데이터 통신 발생 문제상황 useQuery에서 code인자를 보내며 한 번 api를 호출했는데, 3번의 데이터 통신이 발생했다. 콜백으로 호출할 때 비동기 통신 처리를 안해서 그런 것으로 판단됐다. const { data, isError, isLoading } = useQuery('kakaoAuth', () => { authKakaoLogin(redirectC.. 2023. 5. 26. 이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음 728x90 반응형
