DEVLOG

📖 목차 바닐라 자바스크립트로 SPA를 구현하던 중 기본세팅부터 문제가 발생했다... Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 💡 원인 모듈을 import할 때 확장자명, 경로 지정을 제대로 입력하지 않아서 발생하는 에러다. 리액트에서는 모듈 import 시 .js, ./를 생략해도 된다. 하지만 순수 자바스크립트에서 import할 때에는 리액트처럼 하면 에러가 발생한다. 💡 해결 방법 경로, 확장자..

📖 목차 💡 이슈 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)을 추가함으로 해결할 수 있다. 이 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜주어 문제를 해결할 수 있..