Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. - styled-component 사용 시 발생하는 문제로, input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다. - 해결책: 안에 값을 제거해준다. - 기존에는 잘 몰라서 input 내에 label을 넣어줬다가, 해당 오류가 생겼기 때문에 하고 아래에 로 작성해줬다.

여느때와 마찬가지로 새로운 React 프로젝트를 설치하고, yarn start를 통해 시작하려던 와중에 생전 처음 보는 에러가 발생했다. There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.42.0" Don't try to install it manually: your package manager does it automatically...

React 공부를 책을 통해 하고 있던 도중 (출처: 벨로퍼트 리액트를 다루는 기술) utils.scss 파일을 불러올 때 현재 수정하고 있는 scss 파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles 디렉토리 기준 절대 경로를 사용하여 불러올 수 있게 하기 위해 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 하니 options has an unknown property 'includePaths'. These properties are valid 라는 오류가 발생했다. 이게 무슨 에러인고 하니 .. 현재 내가 내려받은 sass-loader의 버전이 호환 불가능한 버전이기 때문에 발생하는..

을 요약하고 동시에 제 나름대로의 생각이 담겨 있는 글입니다. React의 기본 render 함수 render() { ... } render 함수가 컴포넌트의 생김새를 정의함. view가 어떻게 생겼는지, 그리고 어떻게 작동하는지에 대한 객체를 반환함 render 함수를 통해 내부의 컴포넌트를 렌더링 React의 특징 Virtual DOM DOM은 객체로 문서 구조를 표현하는 방법을 말한다. DOM 자체는 빠르지만 웹 브라우저의 규모가 커질 경우 DOM의 변화 -> 다시 CSS를 연산 -> 레이아웃 구성 -> 페이지 리페인트의 과정에서 로딩되는 데이터가 많아지므로 느려짐. -> 어떻게 할까? 에서 출발함. Virtual DOM의 동작 방식 실제 DOM에 접근하는 대신에, 해당 DOM을 추상화한 자바스크립..