개발자일지

[Immer] Immer only supports setting array indices and the 'length' property at die (http://localhost:3000/static/js/bundle.js:40209:11)  at ...  오류발생원인이 오류는 Immer가 배열의 인덱스나 length 속성을 제외한 다른 속성을 직접 변경하려고 할 때 발생한다. Immer는 불변성 유지를 위해 내부적으로 동작하며, 배열의 구조를 변경하는 작업은 제한적으로만 허용된다.  Immer는 다음과 같은 작업은 허용한다.배열의 특정 인덱스 값 변경배열의 length 속성 변경배열에 요소를 추가하거나 제거 (push, pop, splice 등) 그러나 배열에 직접적으로 새 속성을 추가하려고 하면 오..

Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.  이 오류는 리액트에서 key 속성이 중복될 때 발생한다. 리액트는 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 key 속성을 사용한다. 이를 통해 리액트는 항목의 변경, 추가, 삭제를 효율적으로 처리할 수 있는데 이 ..

Objects are not valid as a React child (found: object with keys {type, payload}). If you meant to render a collection of children, use an array instead.  이 오류는 리액트 컴포넌트에서 객체를 직접 렌더링하려 할 때 발생하는 오류이다. 리액트는 객체를 직접 렌더링할 수 없다. 예를 들어, payload 또는 type과 같은 객체 속성을 렌더링하려고 할 때 이 오류가 발생한다.  오류 발생 원인Objects are not valid as a React child (found: object with keys {type, payload}). 오류는 컴포넌트에서 type과 payload와 같은..

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks    오류 발생 원인useEffect가 조건문 안에서 호출되거나, 렌더링에 따라 조건적으로 호출되는 경우에 React가 훅을 호출하는 순서를 추적할 수 없어서 에러가 발생한다.예를 들어, useEffect가 조건에 따라 호출되면, React는 그 조건이 변경될 때마다 훅이 호출되는 순서가 달라지므로 상태를 관리할 수 없다.   오류 해결방법useEffect를 제일 최상단에 넣으니까 해결된 이유는 리액트 훅 규칙 때문이다. 리액트 훅은 ..

[eslint] src\pages\CartPage\index.jsLine 4:3:  React Hook "useEffect" is called in function "cart" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooksSearch for the keywords to learn more about each error.  오류 발생 원인이 오류는 리액트 컴포넌트의 이름이 소문자..

Module not found : Error: Can't resolve 'web-vitals' in '경로' ERROR in ./src/reportWebVitals.js 5:4-24Module not found: Error: Can't resolve 'web-vitals' in '경로'  이 오류는 web-vitals 모듈이 설치되어 있지 않거나 제대로 설치되지 않았을 때 발생한다. web-vitals는 리액트 애플리케이션에서 성능을 측정하기 위한 라이브러리인데 이 라이브러리가 설치되지 않으면 아래와 같은 오류를 띄운다.     web-vitals 모듈 설치하기터미널에서 다음 명령어를 실행하여 web-vitals 패키지를 설치한다. web-vitals 가 설치되지 않아서 발생하는 경우가 대부분이므로 대부..