지선생 코딩딩 지선생 코딩딩

개발을 하다보면 구글에 검색을 할때가 많다. 웹사이트에 들어가면 브라우저 안에서 무슨일이 벌어지는걸까? 한번 알아보았다. 1. 데이터를 받아오는 과정 사용자가 브라우저로 웹사이트에 접속하면 브라우저는 DNS서버(도메인 이름과 IP 주소를 서로 변환하는 서버) 에게 ip주소를 받아온다. 브라우저는 이 ip주소를 가지고 해당하는 서버를 찾아가서 웹사이트의 데이터를 요청한다 (이때 요청하는 데이터는 html, css, 스크립트 파일등 웹사이트를 구성하는 데이터들이다. HTTP Request 라고도 함) 서버는 데이터를 그냥 주지 않는다. 양쪽 모두 데이터를 주고 받을 준비가 되었는지 확인하는 3way handshaking를 진행하고 성공을 한다면 데이터를 보내게 된다. (HTTP Response) 2. 트리 ..

지금까지는 react-query로 Read만 진행해 보았는데 CUD를 해결할 수 있는 useMutation 을 알아보겠습니다. 1. 설명 공식문서를 퍼온것인데요 useQuery 와 동일하게 data, error, isError 등의 데이터들을 제공해 주는걸 알 수 있고 mutate 라는 데이터가 CUD 역할을 하는 함수 입니다 다른점은 queryKey 값을 받지 않고 api,option 만 받고 작동합니다. 코드로 설명하겠습니다 Api 부터 작성합니다 const addSuperHero = async (hero: Hero) => { const response = await axios.post("http://localhost:4000/superheroes", hero); return response.data..

1. InfiniteScroll 이란? 전에 포스트에도 써놓긴 하였으나 1억 개의 데이터를 모두 가져오면 서버 부하가 생기기 때문에 데이터를 조금씩 나눠 받는 방법이며 pagenation과 다르게 스크롤을 내리거나 다음 데이터를 불러오는 버튼을 클릭할 때 데이터를 추가적으로 불러오는 방법입니다. 백엔드는 구현되어있다는 가정하에 진행하겠습니다. 2. useInfinityQuery 설명 지금까지는 useQuery를 사용하였으나 무한 스크롤은 useInfinityQuery라는 다른 함수를 사용합니다. 공식문서를 가져온 것인데요, 인수로 (키값, fetch api, options)는 동일하게 들어가나 options에 getNextPageParam이라는 옵션을 넣어 사용합니다. getNextPageParam의 인..

1. PagenatedQueries, InfintieQueries 란? 영어라서 복잡하게 들리지만 알아듣기 쉽게 말하면 페이지 네이션, 무한 스크롤입니다. 이걸 왜 쓰는가 하면 예를 들어 데이터가 1억 개가 있는 홈페이지가 있습니다. 페이지가 데이터를 불러올 때 1억 개의 데이터를 몽땅 가져오면 속도도 느릴뿐더러 서버 부하도 걸리기 때문에 데이터를 필요한 만큼만 불러오면 자원을 아낄 수 있죠. 페이지 네이션과 무한 스크롤이 이 역할을 합니다 백엔드와 프론트엔드 둘 다 설정을 해야 되지만 프론트엔드 측면에서 알아보겠습니다. 2. PagenatedQueries 백엔드는 완성이 되어있다고 가정합니다 받아오고 싶은 Data는 color입니다 한 페이지에 두 개의 데이터를 띄우고 싶습니다. 백엔드에 요청을 보낼 ..

1. 동적 쿼리 DynamicQueries 코딩을 하다보면 특정 게시물을 찾을 때, pagenation을 할 때 등등 API를 호출할때 살짝 다른 url로 보내야 할 때가 있습니다. (엄청 많습니다) 그럴 때 사용하는 방법인데요 간단하게 말해서 queryKey와 queryFn을 동적으로 주는 방법입니다. const DynamicQueryPage = ({ heroIds }) => { const queryResults = useQueries( heroIds.map((id, index) => { return { queryKey: ["super-hero", id], //queryKey를 배열로 두고 id값을 map으로 돌려 계속해서 다른 queryKey값을 만듭니다. queryFn: () => fetchSupe..

1. 설치 npm i react-query 2. 세팅 root component를 QueryClientProvider로 감싸줍니다. function App() { const queryClient = new QueryClient(); return ( ... // ReactQueryDevtools는 현재 react-query의 상태를 볼 수 있는 도구 ); } 여기까지 했으면 준비는 끝 3. 적용 기본 사용법은 사용할 컴포넌트에서 useQuery를 선언하고 인자로 queryKey, API 호출 함수, 옵션을 넣습니다. 객체 분할하여 사용할 값을 사용합니다. 주저리 주저리 설명하는 것보다 코드로 보는 게 이해가 빠를 거 같네요 바로 useQuery를 사용해 데이터를 불러와 보겠습니다. 불러오는 데이터는 sup..