COCO World

1. 사건일지 에러내용은 객체는 React 하위 항목으로 유효하지 않습니다(발견: 키가 {키값}인 객체). 하위 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 라고 뜨는데, 키값이 fileSize인 객체가 올바르지 않다는 내용이니, 저 부분을 제대로 꺼내고 있는지 확인해보라는 뜻이다. 2. 설명 사실은 별거없다. 첫번째 줄에 (Found: object with keys {fileSize})에서 문제가 발생했다는데, 리액트 내에 저 fileSize라는 키값 이름으로 데이터를 보여주는 부분을 찾아가보자. 용량 : {state.fileSize}MB / 10MB 그렇다면 state.fileSize는 어떤 모양으로 데이터가 내려오고 있나? console.log(state.fileSize) // 로그 내용 {fil..

1. 사건 해결장면 2. 코드 현황 state들 // 유저리스트 데이터 state const [userList, setUserList] = useState([] as any); // 검색 조건 state const [searchTerm, setSearchTerm] = useState(''); const [filterList, setFilterList] = useState([] as any); 체크 박스 관련 변수들 // 개별 항목을 체크했을 때의 state const [isCheckingBox, setIsCheckingBox] = useState(false); // 체크항목 저장하는 변수 state const [checkedArr, setCheckedArr] = useState([]); // 개별 체크표..

에러 발생 리액트 실행 중 'Cannot read properties of undefined (reading 'cancelToken')' 에러가 발생했다. 원인은 axios의 interceptor를 사용하는 와중에 깜빡하고 return을 넣어주지 않았기 때문이다. instance.interceptors.request.use( function(config) { console.log(config) const token = getCookie('userCookie') if ( token ) { config.headers.authorization = token } } ) 해결 방안 return 값을 넣어주자. instance.interceptors.request.use( function(config) { cons..

ERROR 발생 필자는 리액트 실행 중 console.log에 아래와 같은 경고를 만났다. Invalid dom property `stroke-width`. did you mean `strokewidth` 해결방법 svg 파일을 가져올 때, ' stroke-width' 와 'fill-rule'로 가져와지는데 문법형식을 지키지 않아서 나는 오류이기 때문에 아래와 같이 고쳐줘야 한다. => 자바스크립트의 '카멜표기법'으로 바꿔줘야 한다.

위의 에러를 검색해보니 web-vitals 모듈이 설치되지 않아서 문제가 발생하였다. yarn create react-app으로 프로젝트를 항상 생성해왔는데 왜 이번에 위의 모듈만 설치가 되지 않아 문제가 되었는지는 모르겠다.. npm가 아닌 yarn을 사용하고 있어서 아래와 같은 명령어로 해결완료! yarn add -D web-vitals

파이참에서 port8000 으로 서버를 구동시키려니 위와 같은 에러 발생 뜬 에러문구를 그대로 해석하자면 어렵지않다. 말그대로 다른 프로그램에서 이미 port 8000을 사용하고 있다는 뜻이다. 그렇다면 다른 포트 넘버로 다시 서버를 실행시키거나, 이전에 이미 사용하고 있는 프로그램을 강제종료하는 방법이있다. Mac.ver 터미널 명령어 나는 사용하고 있지도 않은데 8000이 할당되었으니 찝찝하여 강제종료하여 다시 재할당하여 사용할 것이다. 그렇다면 Terminal을 켜고, lsof -i TCP: [port넘버] 를 입력하면, lsof -i TCP:8000 포트 8000으로 실행중인 프로그램 목록 상세를 알 수 있다. 우리는 강제종료하기 위해 위의 명령어를 실행하였으니, 강제종료를 위한 명령어도 실행하기..