react18 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. React - Next.js environment variable 설정하기(.env files) next js에서 .env 파일들을 설정 하고나서, 개발(dev) 환경과 배포(production)에 따라서 읽는 파일 설정을 하려고 한다. # object - next js env files 설정하기 ## env file 설정 - next js에는 기본적으로 NODE_ENV 값에 따라 설정 값에 따라서 env 파일을 읽어온다. - 기본적으로 .env.local .env.development .env.production 파일 경로가 설정 되어있다. - npm run dev는 next dev가 실행되면서 .env.development 파일을 - npm run start는 next start가 실행되면서 .env.production 파일을... scripts에 따라서 읽어온다. - default 값은 .en.. 2022. 7. 22. 이전 1 2 3 4 5 다음 반응형
