개발 환경

ERROR | Module not found: Error: Can't resolve '@pages/UserListPage' in '.../src/routes' Webpack에러

상황과제로 CRA없이 React, Typescript, Webpack 직접 설치 중에러 직면"Module not found: Error: Can't resolve '@pages/UserListPage' in '.../src/routes'"위의 에러는 webpack의 번들링 과정중에서 일어난 에러로 tsconfig.json에 설정해 놓은 alias를 읽지 못해서 '@'를 사용했을 때 해당 경로 및 모듈을 이해하지 못하는 것이다.해결 방안(혹시 cra(create-react-app)를 사용했다면 'craco-alias'라고 구글링하면 쉽게 해결가능하다!)/webpack.config.js(...) resolve: { // 번들링을 할 파일 설정 extensions: ['.js', ..

Eslint | react/react-in-jsx-scope off가 작동이 안되는 경우

** 리액트 17버전 부터 import React 구문 필요 없어졌다. npm run build로 자바스크립트 파일 크기 비교하면 트리쉐이킹 덕분에 해당 구문이 있나 없나 크기는 같지만 빌드 시간 감소한다는 장점이 있고 저 코드가 있는게 지저분해보여서 해당 부분의 오류를 없애 주려고 했다. 그래서 아래 코드를 .eslintrc.js > rules 에 추가했다. 하지만 husky로 lint-staged 검사를 했을 때 해당 룰이 먹히지 않고 계속 import React 구문을 넣으라는 에러가 떴다. Error: 'React' must be in scope when using JSX react/react-in-jsx-scope + Warning: React version not specified in esl..

Eslint error 해결 방법 | 'extensions' has been removed, 'resolvepluginsrelativeto' has been removed.

eslint를 설치했더니 위와 같은 오류가 생겼다. 해당 문제는 eslint가 v.9를 릴리즈하면서 나타나고 있는 문제라고 한다. 그래서 다운그래이딩을 해주면 쉽게 해결된다. 이런 버전 문제들은 ./package.json을 보면서 작업하자. 1. 현재 eslint v9 삭제 yarn remove eslint 2. v8.57.0 설치 yarn add -D eslint@8.57.0 ++ 혹시 yarn berry, zero install 환경인 경우, 3. sdk 업데이트 yarn dlx @yarnpkg/sdks vscode [참고] https://github.com/vercel/next.js/issues/64114