코딩병원

Frontend/Debug Log

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..

2022. 1. 20.

Frontend/Debug Log

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..

2022. 1. 19.

Frontend/Debug Log

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 태그라고 부릅니다. 태그를 선..

2022. 1. 18.

Frontend/Debug Log

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..

2022. 1. 16.

Frontend/Debug Log

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..

2022. 1. 15.

Frontend/Debug Log

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..

2022. 1. 14.

Frontend/Debug Log

<{모듈참조명} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 해결 방법

이번 글에서는 is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 에러 해결 방법에 대하여 알아보겠습니다. is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. [에러가 발생한 코드] import React from 'react'; import {Route} from 'react-router-dom'; function App() { return ( // 에러가 발생한 코드 ) } export default App; [에러 원인] React에서 HTML 요소에는 소문자를 ..

2022. 1. 13.

Frontend/Debug Log

Each child in a list should have a unique "key" prop. 해결 방법

이번 글에서는 Warning: Each child in a list should have a unique "key" prop. 에러 해결 방법에 대하여 알아보겠습니다. Warning: Each child in a list should have a unique "key" prop. [에러가 발생한 코드] class TestComponent extends Component { render() { let arr = ["코딩병원", 119, "코딩병원"]; return( {arr.map((item) => {item})} ) } } [에러 원인] react에서 map() 메서드를 사용하기 위해서는 배열의 각 Item마다 독립적인 key 값을 설정해야 합니다. 하지만, 위의 코드를 보니 key prop과 관련한 세..

2021. 12. 21.

Frontend/Debug Log

Adjacent JSX elements must be wrapped in an enclosing tag. 해결 방법

이번 글에서는 Adjacent JSX elements must be wrapped in an enclosing tag. 에러 해결 방법에 대하여 알아보겠습니다. Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? [에러가 발생한 코드] import React, { Component } from 'react'; class TestComponent extends Component { constructor(props) { super(props); this.state = {test: '코딩병원'}; } render() { return( {this.state.test} 119 ); } } export ..

2021. 12. 20.

Frontend/Debug Log

Objects are not valid as a React child 해결 방법

이번 글에서는 Objects are not valid as a React child (found: object with keys {키1, 키2}). If you meant to render a collection of children, use an array instead. 에러 해결 방법에 대하여 알아보겠습니다. Objects are not valid as a React child (found: object with keys {키1, 키2}). If you meant to render a collection of children, use an array instead. [에러가 발생한 코드] App.js import './App.css'; import TestComponent from './Compon..

2021. 12. 15.

Frontend/Debug Log

Parsing error: Identifier '변수명' has already been declared. 해결 방법

Parsing error: Identifier '변수명' has already been declared. 해결 방법에 대하여 알아보겠습니다. 이 에러는 Javscript ES6이상을 사용하면 어디서든 발생할 수 있는 에러입니다. 따라서, Javscript뿐만 아니라 Javscript기반인 React, Vue, TypeScript 등에서도 발견할 수 있습니다. [에러가 발생한 코드] let tempStr = '자바스크립트'; let tempStr = '리액트'; console.log(tempStr); // Parsing error: Identifier 'tempStr' has already been declared. [에러 원인] 1. 이미 선언한 let 변수 tempStr을 다시 선언해서 발생 2. le..

2021. 12. 13.

Frontend/Debug Log

Assignment to constant variable 해결 방법

Assignment to constant variable 에러 해결 방법에 대하여 알아보겠습니다. 이 에러는 Javscript ES6이상을 사용하면 어디서든 발생할 수 있는 에러입니다. 따라서, Javscript뿐만 아니라 Javscript기반인 React, Vue, TypeScript 등에서도 발견할 수 있습니다. [에러가 발생한 코드] const tempStr = '자바스크립트'; tempStr = '리액트'; console.log(tempStr); // Assignment to constant variable [에러 원인] 1. 이미 선언한 const 변수 tempStr에 새로운 값을 할당했을 때 발생 2. const 변수는 재할당을 허용하지 않음 [해결 방법] const는 값이 변하지 않는 상수입..

2021. 12. 12.

Frontend/Debug Log

Invalid DOM property `tabindex`. Did you mean `tabIndex`? 해결 방법

이번 글에서는 Invalid DOM property `tabindex`. Did you mean `tabIndex`? 에러 해결 방법에 대하여 알아보겠습니다. Invalid DOM property `tabindex`. Did you mean `tabIndex`? [에러가 발생한 코드] import Reaect, { Component } from 'react'; class HeaderComponent extends Component { render() { return ( [start React Js] ) } } export default HeaderComponent; [에러 원인] JSX는 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모..

2021. 12. 7.

Frontend/Debug Log

Invalid DOM property `class`. Did you mean `className`? 해결 방법

이번 글에서는 Invalid DOM property `class`. Did you mean `className`? 에러 해결 방법에 대하여 알아보겠습니다. Invalid DOM property `class`. Did you mean `className`? [에러가 발생한 코드] import Reaect, { Component } from 'react'; class HeaderComponent extends Component { render() { return ( // 에러가 발생한 위치 [start React Js] ) } } export default HeaderComponent; [에러 원인] JSX는 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, Jav..

2021. 12. 7.

Frontend/Debug Log

Unexpected token o in JSON at position 1 해결 방법

Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse() 에러 해결 방법에 대하여 알아보겠습니다. 이 에러코드의 발생 원인은 다음과 같습니다. 1. json 형식의 문자열이 맞는지? 2. json 형식의 문자열로 작성하였는데 오타가 있는 것이 아닌지? 해결 방법 1. json 형식의 문자열이 아니라면 json 형식의 문자열로 지정해주시면 됩니다. 2. 작은따옴표('), 큰따옴표(")를 주의하시고 잘 확인해주셔서 오타를 수정하시기 바랍니다. 예제를 통하여 에러가 발생한 이유와 해결 방법에 대하여 알아 보도록 하겠습니다. 위 코드를 실행하니 Unexpected token o in JSON at position 1 에러가 발생..

2020. 5. 4.

Frontend/Debug Log

[개발자 꿀팁] 크롬 개발자도구 알아보기

이번에는 크롬에서 개발자 도구를 알아보겠습니다. 단축키 F12를 이용하여 개발자 도구를 열어줍니다. 그러면 개발자 도구가 열리고 주요 패널들을 볼 수 있습니다. 주요 패널로는 Elements, Console, Sources, Network 패널이 있습니다. [ Elements ] 주로 디자인을 수정하는 용도로 사용하고 html 문을 확인할 수 있습니다. [ Console ] 로그를 확인할 수 있고, 스크립트 명령어를 입력하는 패널입니다. 브레이크 포인트를 건 시점을 기준으로 변수를 확인할 수 있고, 값도 바꿀 수 있습니다. [ Source ] 자바스크립트 디버깅을 주로 하는 곳입니다. 디버깅은 다음 글에서 자세하게 다루겠습니다. [ Network ] 현 페이지의 HTTP 요청과 응답 리스트와 타임라인 토..

2020. 5. 2.