'1. 웹개발/1_1_8 Error Handling' 카테고리의 글 목록 (2 Page)

useRoutes() may be used only in the context of a <Router> component. 해결 방법

토이 프로젝트에서 Route를 사용할 일이 있어 사용하는데 아래와 같은 에러가 발생하였습니다. Uncaught Error: useRoutes() may be used only in the context of a component. [에러 원인] Uncaught Error: useRoutes() may be used only in the context of a component.라는 에러를 해석해보면 useRoutes는 로 감싸야한다고 합니다. 저는 감싸지 않고 사용해서 에러가 발생한 거였습니다. root.render( ); [해결 방법] 먼저 BrowserRouter as Router를 추가해주고 Route를 Router로 감싸주시면 에러가 해결될 것입니다. import { BrowserRouter as..

1. 웹개발/1_1_8 Error Handling 2022. 5. 11. 09:58

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 해결 방법

토이 프로젝트를 진행하던 중 아래와 같은 에러가 발생하였습니다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. [에러 원인] Header 태그가 children을 prop으로 전달하는 과정을 생략해 발생한 타입 에러입니다. Header가 마치 props로 Router에게 넘겨지는 구조로 코드가 작성이 되어있습니다. 넘겨지는 props가 없는데 말이죠. [에러 원인] Header 태그의 자식 컴포넌트들이 props를 넘김 받지 않도록 수정해 주시면 됩니다. root.render( );

1. 웹개발/1_1_8 Error Handling 2022. 5. 10. 17:46

A component is changing an uncontrolled input to be controlled. 해결 방법

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component [에러 원인] input 태그의 value가 undefined 값이 들어갈 수도 있으면 발생하는 에러입니다. uncontrolled input이었다가 controlled input으로 바뀌면서 발생한 것입니다. 즉, 한마디로 초기값이 u..

1. 웹개발/1_1_8 Error Handling 2022. 4. 23. 21:09

This component must be used inside a <RecoilRoot> component. 해결 방법

이번 글에서는 This component must be used inside a component. 에러에 대하여 알아보도록 하겠습니다. This component must be used inside a component 컴포넌트는 태그 내에서 사용해야 한다고 합니다. recoil의 상태관리하는 역할을 보면 당연하다는 생각이 듭니다. 실제로 recoil.org에서 태그의 위치는 루트 컴포넌트에 넣는 것이 가장 좋은 방법이라고 적혀있습니다. 이를 알면서도 저는 에러가 났네요.. 왜 일어났는지는 아래에서 확인해보겠습니다. [에러 원인] 저는 App.tsx에서 를 최상단 루트로 감싸줬는데 에러가 발생하였습니다. 확인해보니 App.tsx가 최상단 루트가 아니더군요.. index.tsx가 App.tsx를 감싸고 ..

1. 웹개발/1_1_8 Error Handling 2022. 4. 17. 12:26

react-scripts: command not found 해결 방법

이번 글에서는 react-scripts: command not found. 에러 해결 방법에 대하여 알아보겠습니다. react-scripts: command not found [에러 원인] 명령어를 읽을 수 없다고 로그가 찍힌 것을 확인할 수 있습니다. 아무래도 프로젝트 경로가 기존과 다르거나, 다른 프로젝트를 사용할 때 이런 에러가 종종 발생하고는 합니다. [해결 방법] npm update 혹은, npm Install을 해주시면 됩니다. npm update npm install

1. 웹개발/1_1_8 Error Handling 2022. 2. 4. 12:33

internal/modules/cjs/loader.js:888 해결 방법

이번 글에서는 internal/modules/cjs/loader.js:888 에러 해결 방법에 대하여 알아보겠습니다. internal/modules/cjs/loader.js:888 [에러 원인] react 프로젝트를 다운받고 실행시키려는데 위의 에러가 발생하였습니다. 위의 에러는 @bable/core 모듈을 찾을 수 없다고 나오는데 그 이유는, 전에 사용하던 node_modules에서 만든 경로랑 실행시킬 프로젝트의 모듈이 충돌해서 발생했을 가능성이 높습니다. [해결 방법] 모듈 하나하나를 수정해주는 방법이 있을테지만, 저는 아래와 같은 명령어로 모듈 자체를 지우고 재설치하였습니다. npm remove package-lock.json npm remove node_modules npm install

1. 웹개발/1_1_8 Error Handling 2022. 2. 3. 12:46

Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 해결 방법

이번 글에서는 Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 에러 해결 방법에 대하여 알아보겠습니다. Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. [에러가 발생한 코드] App.js import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return 리액트 } export default App; TestComponen..

1. 웹개발/1_1_8 Error Handling 2022. 1. 20. 12:06

Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 해결 방법

이번 글에서는 Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 에러 해결 방법에 대하여 알아보겠습니다. Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. [에러가 발생한 코드] App.js import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return 리액트 } export default App; TestComponent.js impor..

1. 웹개발/1_1_8 Error Handling 2022. 1. 19. 12:54

Parsing error: Unterminated JSX contents. 해결 방법

이번 글에서는 Parsing error: Unterminated JSX contents. 에러 해결 방법에 대하여 알아보겠습니다. Parsing error: Unterminated JSX contents. [에러가 발생한 코드] import React from 'react'; function App() { return ( ) } export default App; [에러 원인] JSX에서는 위 코드처럼 태그를 닫지 않으면 오류가 발생합니다. 위의 input 태그는 열려있지만 닫혀있지 않고 있습니다. [해결 방법] 태그를 닫아주시면 됩니다. 위의 코드에 input 태그 사이에 별도의 내용이 들어가지 않은 경우에는 처럼 작성할 수 있습니다. 이러한 태그를 self-closing 태그라고 부릅니다. 태그를 선..

1. 웹개발/1_1_8 Error Handling 2022. 1. 18. 12:41

Functions are not valid as a React child. 해결 방법

이번 글에서는 Functions are not valid as a React child. 에러 해결 방법에 대하여 알아보겠습니다. Warning: Functions are not valid as a React child. [에러가 발생한 코드] App.js import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ReactRouter1 from './ReactRouter1'; function App() { return ( ) } export default App; ReactRouter1.js import React from 'react'; function ReactRouter1(props) { return( pa..

1. 웹개발/1_1_8 Error Handling 2022. 1. 16. 12:22

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. 해결 방법

이번 글에서는 A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 에러 해결 방법에 대하여 알아보겠습니다. A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . [에러가 발생한 코드] import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ReactRouter1 from './ReactRouter1'; import ReactRouter2 from './ReactR..

1. 웹개발/1_1_8 Error Handling 2022. 1. 15. 12:10

코딩병원

1. 웹개발/1_1_8 Error Handling 검색 결과