오류상황 vite로 React프로젝트 빌드 후 실행했더니 css파일을 못찾으며 아래와 같은 오류가 났다. 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. 해결법 config의 상대경로를 절대경로로 바꾼다. { "compilerOptions": { "baseUrl": "./", //"." "paths": { "@/*": [ "src/*" ] } } } 원인 vite 는 html파일을 dist폴더로부터 abso..
Vite에서 절대경로로 Alias를 사용하려면 vite.config.js의 resolve.alias를 추가해 주어야 한다. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, }) import는 아래와 같이 할 수 있다. //test.js alert('import!') import "@/css/test" ... alias옵션의 자세한 옵션들은 아래를 참고하자 참고 https:/..
vite-react환경에서 dynamic import를 하려고 했는데 아래와 같은 오류가 났다. 내가 짠 코드는 이렇다. import {lazy, Suspense} from 'react'; import LoadingComponent from '@/components/Loading/LoadingComponent.jsx'; const ViewContainer = ({ path }) => { const View = lazy(() => import(path)); return ( ); }; export default ViewContainer; path가 맞는데도, import되지 않는 오류가 났다. 찾아보니 dynamic import시 아래와 같은 룰이 있다. Dynamic Import Rule Rollup에 나..
Immutable & Mutable immutable은 바뀔 수 없고 read-only 라는 뜻이다. number, string등의 원시 타입 값들이 이에 해당된다. 반면 object는 값 자체가 바뀔 수 있다. 이러한 객체는 mutable하다고 한다. const position = { x: 0, y: 0 }; poisiton.x = 5; //mutable React의 state는 immutable하다. object처럼 mutable한 객체이더라도, immutable하게 취급해야 한다. 어떤 object를 state로 두고 값을 바꾸고 싶다고 가정해보자. 아래와 같이 object를 mutable하게 취급하여 값 자체를 바꾸면 리액트가 의도한데로 동작하지 않는다. const [position, setPos..
React에서 절대경로를 사용하려면 jsconfig.json파일을 프로젝트 root에 만들어주면된다. 안의 내용은 아래와 같이 채워주자 { "compilerOptions": { "baseUrl": "src", }, "include": ["src"] } 이제 다른곳에서 아래와 같이 import할 수 있다. // import "../css/kakaoMap.css import "css/kakaoMap.css"; jsconfig document https://code.visualstudio.com/docs/languages/jsconfig jsconfig.json Reference View the reference for jsconfig.json. code.visualstudio.com create react ..
redux공식 사이트 https://redux.js.org/introduction/getting-started/ Getting Started with Redux | Redux Introduction > Getting Started: Resources to get started learning and using Redux redux.js.org Rdux를 쓰는 이유 1. props를 전달, 전달, 전달해야 하는 문제를 해결 할 수 있다. react앱을 작성하다보면 props를 전달, 전달, 전달해야 하는 경우가 생긴다. 리덕스를 사용하면 이 문제를 해결할 수 있다. A -> B -> C로 전달하던 값을 A -> C로 한번에 전달 가능한 것이다. 2. 코드가 강하게 coupling되어있는 경우 decoupl..
react-bootstrap에서 import한 .css파일이 빌드 시 안먹는 문제가 발생했다. 빌드될 때 동적인 코드가 정적으로 바뀌면서 바뀌면서 우선순위 등 뭔가 꼬인 것 같다. react-bootstrap에서 css를 custom할 때에는 공식 사이트처럼 flat button
