react-query3

• 

  [Next JS] React-Query로 UseInfinityQuery이용하여 무한 스크롤 구현하기 with express.js 1. 무엇을 하려하는가? - 프론트엔드 개발을 진행하면서 좀 더 사용자 친화적인 ux에 대해 고민하게 되었다. 프론트엔드는 백엔드에서 가공된 데이터들을 어떻게 사용자들이 받아들이기 쉽게 보여주는가?에 대한 고민이 필수라고 생각한다. 그러던 와중 모든 콘텐츠 항목들을 보여주는 페이지와 같은 경우 옛날에는 페이지네이션을 통해 각 페이지마다 다른 데이터들을 보여주고 페이지를 넘길 때 화면이 깜빡거리면서 새로운 api호출과 함께 페이지가 reload되는 것이 일반적이었다. 하지만 요즘 sns나 네이버와 같은 대형 플랫폼은 트렌드를 변화하고 있다. 이제 일반적으로 보이던 페이지네이션 바와 같은 ui는 그 자리를 잃어가고 있다. 데이터가 넘쳐나고 그 넘쳐나는 데이터들 사이에서 자신이 원하는 정보를 빠르게 찾아냉하는.. front-end/Nextjs 2022. 8. 11.

• 

  [NextJS] React-Query useMutation()사용하기 1. 무엇을 하려하는가? 블로그를 열심히 만들어가던 와중 한 가지 개선하고 싶은 상황이 생겼다. 댓글을 작성하거나 삭제하고 난 후 나는 nextjs의 router를 이용해서 router.reload()를 이용해서 페이지를 새로고침해서 작성된 댓글이 다시 화면에 보이게 하거나 댓글이 삭제된 것을 화면에 다시 보여주고 싶었다. 하지만 매번 댓글을 작성하거나 삭제 할 때마다 페이지를 새로고침하는 것은 사용자 경험적인 측면에서 매우 안좋을 것 같았다. 따라서 찾은 것이 react-query의 useMutation() 훅이다. 2. React-query hook의 종류 useQuery -> 단순히 데이터를 가져오는 역할을 한다. 물론 query key가 제공되므로 queryClient를 만들어 캐시를 저장하거나 .. front-end/Nextjs 2022. 8. 1.

• 

  [NextJs] React-Query로 ServrSide Rendering 구현하기 1. 무엇을 하려하는가? NextJS가 강력한 이유 중 하나는 SSR(server-side-Rendering)을 제공하기 때문이다. 서버 단에서 미리 데이터를 포함한 html파일을 렌더링한 후 프론트 쪽으로 보내주기 때문에 한 번 사이트가 로딩 된 후에는 거의 로딩시간이 걸리지 않는다는 장점이 있고 검색엔진이 사이트들을 방문할 때 많은 데이터가 이미 렌더링 된 html에 포함되어 있으므로 검색 엔진 최적화에도 유리하다는 장점이 있다. 나는 이 ServerSide Rendering을 React-Query라이브러리를 사용하여 구현해보고자 한다. 2. 구현 1. _app.tsx import Footer from "components/Layout/Footer"; import Header from "compone.. front-end/Nextjs 2022. 7. 30.