사용한 코드는 다음과 같다. { colorArr.map(...) } 해당 코드는 정상동작하지만, 표시된 getContentAnchorEl을 속성으로 설정하지 않으면 다음과 같은 오류가 뜬다. Material-UI: You can not change the default `anchorOrigin.vertical` value when also providing the `getContentAnchorEl` prop to the popover component. Only use one of the two props. Set `getContentAnchorEl` to `null | undefined` or leave `anchorOrigin.vertical` unchanged. material-ui의 popove..

React와 Material UI라는 React UI 라이브러리로 프로젝트를 하던 중, 제목과 같은 오류가 발생했다. findDOMNode is deprecated in StrictMode. KOS 프로젝트에서도 발견했던 오륜데 대수롭지 않게 넘겼더니 여기서 걸리적거리는군 ㅠㅠ 어쨌든 해결해보자. 이유 저런 오류가 뜨는 이유는 무엇일까? 먼저, create-react-app을 통해 React 프로젝트를 생성하면, index.js가 다음과 같이 생겼다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM..

React JSX에서 array나 dictionary를 다루기 위해 forEach 문을 썼다면, map으로 변경해야한다. map 함수는 연산 후에 생성된 결과 array / dictionary를 반환해주기 때문에 JSX에서 나타나게 되지만, forEach문은 변수에만 연산 결과가 적용되고 반환해주지 않는다. 따라서, forEach 문을 사용하게 되면 연산만 되고 결과는 JSX로 출력되지 않는다.

TS2691: import .ts file 참고 : https://github.com/microsoft/TypeScript/issues/37582 https://github.com/microsoft/TypeScript/issues/27481 https://github.com/microsoft/TypeScript/issues/39965 이 오류는 typescript 파일을 찾을 수 없어서 나는 오류이다. import A from 'A.tsx'; 위와 같이 파일을 불러오면, import 전에 ts / tsx 파일이 js / jsx 로 변환되기 때문에 해당 파일을 찾을 수 없다는 에러가 뜬다. 따라서, 단순히 확장자를 붙이지 않고 import 해오는 것이 가장 간단한 방법인데 그렇게 하면 esl..

의존성 에러 해결 에러 발생 이런 오류가 떴다. CRA가 제공하는 react-scripts 패키지가 eslint 6.6.0 버전에 의존하는데, 7.2.0 버전을 설치해서 그렇다고 한다. 저 밑에 나오는 해결방법이 있는데, 따라해도 해결되지 않는다 ㅎ... 저번에도 같은 문제로 속썩여서 이번엔 제대로 각잡고 해결해보려고 한다. 이유 발견 이유는 구글링하다가 발견했는데(https://github.com/wesbos/eslint-config-wesbos/issues/17) , react-scripts의 eslint 의존성 버전과 airbnb linting에서의 eslint 의존성 버전이 일치하지 않아서 나오는 문제였다. 뻘짓 그래서 일단 react-scripts version을 `npm view react-s..

VScode에서 eslint가 적용이 안되고 자꾸 해당 에러가 뜨길래 검색해봤다. 버전이 안 맞아서 그런 것이니 VScode를 다시 깔면 버전 업데이트되면서 eslint가 잘 된다. 다운로드 : code.visualstudio.com/download 참고 : https://github.com/typescript-eslint/typescript-eslint/issues/2020

참고 : https://hoilzz.github.io/webpack/11-eslint-prettier/ eslint의 parser가 공식적으로 ES 표준만을 지원하기 때문에, ES6~7 파싱 시 문제가 생긴다. 따라서, .eslintrc.js 파일의 export default를 module.export로 변경하기 export는 ES6 syntax이고, module export는 commonJS syntax이다. babel-eslint 설치 후 .eslintrc.js에 "parser": "babel-eslint",추가하기 두 방법 중 하나를 사용하면 된다.