NextJs5 Redux - Pagnigation(with redux-toolkit and nextjs) 많은 양의 데이터가 있으면 페이지를 나누어서 데이터를 보여주면 된다. 이런 페이지 이동을 할 수 있도록 page list를 page + navigation이 합쳐서 Pagnigation 이라고 부른다. # object - 페이지 리스트 만들기 - 뒤로가기 했을때, 이전 페이지 상태유지 페이지를 이동할 때 마다 backend로 query를 같이 보내서 어떤 페이지인지 몇개의 데이터를 원하는지 보내야한다. 이렇게 query로 보내고 난 후 Url도 같이 이동해주면 이전에 어떤 페이지 항목을 보고 있었지알 수 있다. ex) * page_no는 현재 몇페이지를 보여줄지 * offset은 몇개의 데이터를 받기를 원하는지 http://localhost:3000/api/node/page_no=1&offset=10 #.. 2023. 2. 9. Redux - Redux toolkit(with next js) react 상태를 한곳에서 관리를 하기 위해서 redux, mobx, recoil과 같은 라이브러리를 사용하면 한곳에서 상태를 관리 할 수 있다. 하지만 redux 라이브러리를 사용하기 위해서는 store, reducer, action을 셋팅을 해서 사용을 해야한다. 그래서 오리려 작은 어플리케이션 같은 경우는 셋팅하는 공수가 더 큰 번거로움이 있다. 이를 보완하기 위해 redux-toolkit이 나왔고, 이전에 했던 redux 셋팅에 비해 간소해졌다. 최근 회사에서 redux를 사용하게 되면서 redux를 설치했더니, redux 에서 redux-toolkit을 권유하게 되었고 기존 셋팅에 비해 간소화 된 걸 확인 할 수 있었다. redux를 사용하면 redux-thunk, redux-sage 아니면 r.. 2022. 12. 17. React - Next.js API Routes next js의 장점은 SSR(server side rendering)이다. getServerSideProps와 getStaticProps 라는 함수를 통해서 page가 로딩될때, 함수들이 실행되어 data fetching을 미리하는 장점이 있다. 이후에 client의 api 통신은 client에서 직접사용을 했었지만, API Routes를 알게된 이후로 client의 api호출을 SSR로 통신이 가능한 것을 알게되었다. API Routes를 사용하면 API server의 도메인 값을 알 수 없어서 보안적으로 매우 좋다고 생각을 한다. #object - API Routes - API Routes와 getServerSideProps 차이 - API CORS ## API Routes - API Routes는.. 2022. 9. 5. React - Hydration failed because the initial UI does not match what was rendered on the server(nextjs-MUI) next js에서 Hydration failed because the initial UI does not match what was rendered on the server error가 발생한다면... next js의 장점은 SSR인데 이 과정에서 문제가 되었다. server에서 render가 먼저 되기 때문에 client와 맞지 않은 tag들이 있기 때문이다. #object - Hydration failed because the initial UI does not match what was rendered on the server 에러 해결 ## 해결 SSR이 될 때 말고 useEffec가 실행이 되고 나서 render를 하게 된다면 다음과 같은 에러가 사라진다. isMouted가 true 일 때만 r.. 2022. 9. 2. 이전 1 2 다음 반응형
