Coding127 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. React - next js process is not defined error Next js에서 env 파일에 환경 변수를 설정하고 나서 process is not defined error가 발생할 수 있다. 구글에서 next js process is not defined를 찾아보면 react scripts 버전을 업데이트를 하고, react-error-overlay@6.0.9를 삭제하는 방법이 있었다. 아니면 scripts에서 "preinstall":"react-error-overlay@6.0.9"를 설치하라는 명령도 있었지만 해결할 수 없었다. # process is not defined error ## process is not defined 해결 env 파일에 토큰을 설정했을 땐, env 변수를 잘 사용을 했는데, env 변수를 추가를 했더니 불러 오지 못했다. 그 이유는 .. 2022. 7. 22. CSS - border edge 만들기 border는 태그의 테두리를 만드는 css 속성이다 하지만, 테두리를 더욱 이쁘게 edge만 테두리 효과(아래 사진처럼)를 만들 수 있다 #object * 하단 그림에 우측상단과 좌측하단에 부분에만 border 효과 만들기 ## ::before / ::after 우선, CSS 속성 before와 after를 확인 해보면 *before: 선택자의 첫번째 자식으로 먼저 실행 *after: 선택자의 첫번째 자식으로 나중에 실행 ex) * 아래와 같이 div 태그가 있다면... *.feature-box::before{} > .feature-box{} > .feature-box::after{} 순으로 UI를 그린다. * before 와 after의 기준은 feature-box 이고, 부모 태그가 된다. cont.. 2022. 6. 24. 이전 1 2 3 4 5 6 ··· 32 다음 반응형
