DEVLOG

📖 목차 💡 이슈 Error: Minified React error #130 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 로컬에서 확인하는 경우(yarn start)에는 문제가 없고, 페이지를 build하는 경우 build는 성공하지만 문제가 발생하는 특정 페이지에서 아래와 같은 에러메세지와 함께 페이지가 띄워지지 않는 이슈 발생 💡 원인 사용하고있는 라이브러리가 객체형식으로 들어오는 것이 문제가 되고 있었다. webpack에서는 이런 경우 별다른 처리 없이 사용이 가능했지만 vite에서는 해당 부분에 대한 처리가..

📖 목차 💡 이슈 Uncaught TypeError: ZNe is not a function 페이지를 로컬에서 확인할때(yarn start)에는 문제가 없고, 페이지를 build하는 경우 build에는 성공하지만 페이지를 확인해보면 아래와 같은 에러메세지와 함께 페이지가 띄워지지 않는 이슈 발생 💡 원인 현재 번들러로 vite를 사용하고 있는데 vite+react의 호환이 아직 정상적으로 이루어지지않아 빌드 시 antd 부분에서 충돌이 발생한 것으로 보임. 💡 해결 ❌ 해결1 (해당 이슈가 이 방법으로 해결되지는 않았으나, 다른 페이지에서 이 방법으로 비슷한 문제가 해결되어 함께 적용했고 기록용으로 작성합니다.) vite.config.ts에서 사용하는 vite-plugin-import2라이브러리를 vit..

📖 목차 💡 이슈 Warning : Props 'className' did not match 위와 같은 에러메세지와 함께 페이지스타일이 다 깨지는 에러가 발생했다. 미디어쿼리를 넣다가 발생해서 미디어쿼리가 문제인 줄 알았는데,, 지우고 되돌려고 똑같은에러가 반복되었다 😂 💡 원인 첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다. 💡 해결 바벨 플러그인 babel-plugin-styled-components를 설치하고 바벨설정(.babelrc)을 추가함으로 해결할 수 있다. 이 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜주어 문제를 해결할 수 있..

📖 목차 Next.js 로 프로젝트를 생성하게 된 이유를 정리하다보니 기본적인 개념부터 계속해서 정리해나가고 싶어서 글을 계속 임시저장하며 새 글을 작성하기까지 벌써 3번째 글,,, CSR과 SSR의 차이부터 공부해보려고 합니다! 💡 렌더링이란 무엇일까? CSR : Client Side Rendering SSR : Server Side Rendering CSR과 SSR,,, 렌더링 방식의 차이점이란 것은 알겠는데 그렇다면 렌더링이란 무엇을 의미하는걸까? 먼저 렌더링이란, 서버로부터 내용을 받아 브라우저에 뿌려주는 과정입니다. HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 렌더링과정 Loader 가 서버로 부터 정보들을 불러옵니다. 파싱을 통해 문서를 D..