전체 글143 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 login redirect naver, 쿠팡과 같은 웹 사이트에서 로그인을 할 때, network를 보면... 순간적으로 한 페이지를 갔다가 넘어가는 것을 볼 수 있다. 컴퓨터의 성능이 좋다면 너무 빨리 지나 가지만, 어떤 사이트를 들렀다가 redirect를 하는것 같다. # object - 대형 웹사이트 로그인 과정 확인 - next js를 통해서 구현 해보기 만약 어떤 사이트를 들리지 않고, 그냥 로그인을 한다면 무슨일이 일어나게 되는가?? 다른 사이트를 통해서 가지 않는다면 React에서 통신을 할 때, 어떤 payload를 보냈는지 알 수 있다. 즉, 로그인 할 때 사용했던 id와 password가 남아있다.(브라우져 network에서 확인 가능) ## Next js config file 설정 next js는 어떤 특정 사.. 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 3 4 5 6 ··· 36 다음 반응형
