'분류 전체보기' 카테고리의 글 목록 (10 Page)

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

[React] 배열로 state 변수 선언하는 이유 (useState)

[state 변수 선언] react에서 함수형 컴포넌트 형식으로 state 변수를 선언할 때, 우리는 아래 코드와 같이 useState() 함수를 사용해서 배열(대괄호)을 이용하여 state 변수를 선언하는 것을 보셨을 겁니다. const [count, setCount] = useState(0); [배열 구조 분해] 첫번째 인덱스에는 변수명을 입력하고, 두 번째 인덱스에는 set을 붙여서 state 변수를 선언하였습니다. const [fruit, setFruit] = useState('banana'); 위 자바스크립트 문법은 배열 구조 분해라고 하고, fruit과 setFruit, 총 2개의 값을 만들고 있습니다. 즉, useState를 사용하면 fruit이라는 첫 번째 값과 setFruit라는 두 번째..

1. 웹개발/1_1_5 React JS 2022. 2. 2. 10:17

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 해결 방법

이번 글에서는 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 에러 해결 방법에 대하여 알아보겠습니다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 위의 안내 문구에 따라 다음과 같이 명령어를 실행하였지만, 아래와 같은 에러가 발생해서 진행이 되지 않았습니다. npm uninstall -g create-react-app yarn global remove create-react-app 그래서 해결 방법을 고민하다가, @latest를 붙여 npm을 최신 버전으로 업그레이드해서 명령어를 입력해서 실..

1. 웹개발/1_1_5 React JS 2022. 2. 1. 12:17

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

[React] Virtual DOM vs DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다. Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야 합니다. [DOM이란?] Document Object Model의 약어입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다. 코딩병원에 오신 것을 환영합니다. itprogramming119 * 위 소스 HTML의 DOM 트리 [DOM은 과연 느릴까요?] 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데 이 DOM에는 치명적인 한 가..

1. 웹개발/1_1_5 React JS 2022. 1. 17. 12:19

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

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 해결 방법

이번 글에서는 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 에러 해결 방법에 대하여 알아보겠습니다. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [에러가 발생한 코드] import React from 'react'; import Route from 'react-ro..

1. 웹개발/1_1_8 Error Handling 2022. 1. 14. 12:32

코딩병원

분류 전체보기 검색 결과