728x90 SSR3 React-Query 를 사용하는 이유 (+ 개념, 컨셉, SSR Hydration, Redux ...) 📌 React Query 를 사용하는 이유 ? " 비동기 데이터 관리를 위해 사용한다. " 여기서 비동기 데이터란 Server state (= 서버의 상태) 를 의미한다. 즉, API 로 클라이언트에게 제공될 수 있는 서버의 데이터와 API 로 추가/수정/삭제가 될 수 있는 서버의 데이터를 의미한다. 나의 경우 Redux 를 사용하여 비동기 데이터를 관리하곤 했다. 그러나 Redux 는 API 통신 및 비동기 데이터 관리를 위한 라이브러리가 아니기 때문에, (*Redux 는 전역 상태 관리를 위한 라이브러리) API 요청을 통해 받아온 데이터를 관리하는 코드나 API 상태를 관리하는 코드 등을 직접 작성해야 했다. 반면 React Query 는 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업.. 2023. 10. 9. [Next.js] React-Query로 무한 스와이퍼 구현하기 (ft. useInfiniteQuery, getServerSideProps, react swiper) 📌 기존 코드의 문제점 영화 추천 프로젝트 리팩토링 과정에서 메인 페이지에서 카테고리 별 영화 리스트를 불러올 때 SSR을 적용하였다. (적용한 이유는 위 링크의 게시글에 기록해두었다) 기존 코드 처음 페이지 진입 시, Server-Side에서 불러온 데이터를 뿌려주고 사용자가 swiper를 넘기면 Client-Side에서 page=2, page=3..의 데이터들을 불러오게 된다. 불러온 데이터들은 state에 spread operator(스프레드 연산자)로 추가해주는 방식으로 동작했다. 그러나 이렇게 되면 다른 페이지에 있다가 돌아왔을 때 이전에 불렀던 데이터들이 리셋되어 다시 요청해야 하기 때문에 데이터 사용량이 늘어나게 되는 단점이 존재한다. // 메인 페이지 import type { InferGe.. 2023. 8. 14. [Next.js] next build 시 window is not defined 에러 해결하기 컴포넌트에서 window 객체를 사용하지 않는 경우 리뷰를 등록하고 수정하는 역할을 하는 라는 컴포넌트에서는 window 객체를 사용하지 않는데 Error occurred prerendering page "/detail/components/ModalReviewAdd". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: window is not defined 이런 build 에러가 발생했다. 도저히 어디서 잘못된 건지 감이 잡히지 않아 한참을 헤맸던 것 같다... 결국 여러 번의 시도 끝에 해결한 코드는 다음과 같다. import React, {useEffect, useState} from "react" interface.. 2023. 5. 21. 이전 1 다음 728x90
