개발천재

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.  오류 발생 원인이 오류는 리액트 컴포넌트의 이름이 소문자..

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리   리액트란(React)?리액트(React)는 페이스북에서 개발한 자바스크립트 기반의 UI 라이브러리다. 2013년에 처음으로 오픈소스로 공개됐다. 웹 애플리케이션의 뷰(View)를 구축하는데 초점이 맞춰져있고, 컴포넌트 기반 아키텍처를 통해 UI를 재사용할 수 있다. 2015년에 React Native가 발표되면서 모바일 앱 개발에서도 리액트의 인기가 급증했다. React Native는 기존의 자바스크립트와 리액트의 개념을 사용하여 네이티브 모바일 앱을 개발할 수 있도록 했습니다. 이로 인해 리액트는 웹뿐만 아니라 모바일 앱 개발에서도 매우 중요한 기술로 자리잡게 되었다. 리액트를 사용하려면 자바스크립트를 기본적으로 이해하는 것이 좋다. 리액트는 ..

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 가 설치되지 않아서 발생하는 경우가 대부분이므로 대부..

state 개념 정리리액트의 state는 컴포넌트의 동적인 데이터를 관리하는 객체로, 시간에 따라 변할 수 있는 상태를 나타낸다. state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지하므로, 사용자 입력, API 응답, 타이머 등 변화하는 데이터를 효율적으로 관리할 수 있다. 리액트의 변수에는 일반변수와 state 변수가 있는데 변수 값을 직접 변경하는 일반 변수와는 달리 state 변수는 setState 또는 useState를 사용해 변경할 수 있다.일반 변수는 값을 변경해도 UI가 자동으로 업데이트 되지 않지만 state 변수는 값을 변경하게 되면 리액트가 자동으로 UI를 다시 랜더링한다. 이는 리액트가 직접 state 변수 상태를 관리하기 때문이다. 그래서..

JSX(JavaScript XML)는 React에서 자주 사용되는 확장 문법으로, 자바스크립트 내에서 HTML과 유사한 코드를 작성할 수 있게 한다. 또한 UI 컴포넌트를 정의할 때 매우 유용하다. 이를 통해 코드가 더 직관적이고 가독성이 높아지며, 개발자들이 UI를 정의하고 관리하는 데 있어 더 편리해진다는 장점이 있다. JS = JavaScriptJSX = JavaScript XML/HTML   JSX의 기본 개념JSX는 XML과 유사한 문법을 사용하여, HTML 태그와 자바스크립트 코드를 혼합할 수 있게 한다. 기본적으로 JSX 코드는 브라우저에서 실행되기 전에 Babel과 같은 트랜스파일러에 의해 일반 자바스크립트 코드로 변환된다.const element = Hello, world!; 위 코드에서..

node.js와 npm 설치되어 있는지 확인하기먼저 컴퓨터에 Node.js와 npm(Node Package Manager)이 설치되어 있는지 확인해야한다.아래 코드 입력해서 버전 번호를 반환하면 설치되어 있는 것이며 만약 설치되어 있지 않다면 Node.js 사이트에서 다운로드하여 설치한다.https://nodejs.org/ennode -vnpm -v create-react-app 글로벌 설치npm install -g create-react-app React 앱 생성하기npx를 사용하여 새로운 React 애플리케이션을 생성한다. 예시에서는 my-app이라는 프로젝트를 생성한 것이다.npx create-react-app my-app 프로젝트 생성 후 해당 디렉토리로 이동cd my-app 개발 서버 시작하기개..