Life goes slowly...

react.js의 HTML 태그 관련 Error 발생 The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. React에서 흔히 볼 수 있는 에러입니다. 이는 코드규칙을 관리할때 사용되는 라이브러리 eslint에서 제공되는 경고로써 react.js의 태그를 사용할 때에는 href의 유효성값이 필요하다는 Error입니다. ..

react.js의 HTML img 태그 관련 Error 발생 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images React에서 흔히 볼 수 있는 에러입니다. 이는 코드규칙을 관리할때 사용되는 라이브러리 eslint에서 제공되는 경고로써 react.js의 img 태그를 사용할 때에는 alt를 작성하지 않았다는 Error입니다. 사실 alt를 작성하지 않아도 되지만 표준에 맞게 사용하려면 alt를 빼면 안 됩니다. //잘못된 코드 //수정된 코드

Invalid DOM property `for`. Did you mean `htmlFor` Error 발생 Warning: Invalid DOM property `for`. Did you mean `htmlFor`. React에서 흔히 볼 수 있는 에러입니다. React의 JSX는 자바스크립트의 구조로 만들어져 있습니다. 태그에서 for는 반복문을 인식하기에 발생되는 에러입니다. 따라서 JSX문법에 맞게 수정을 해야 합니다. JSX문법에 맞는 코드는 htmlFor입니다. //잘못된 코드 React Jsx 문법 //수정된 코드 React Jsx 문법

Expected `onClick` listener to be a function, instead got `false` Error 발생 Warning: Expected `onClick` listener to be a function, instead got `false`. React Component에서 Button 등과 같은 이벤트 발생 후에 특정한 함수인 function을 호출하려 할 때에 발생하는 Error입니다. 이는 정상적으로 호출은 되긴 하지만 React의 Console창에서 경고인 오류를 보이게 됩니다. //잘못된 코드 Click //수정된 코드 Click

React.js의 useEffect() 함수 React에서 컴포넌트를 작성할 때에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하게 되지만 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없는데 이때 사용되는 함수가 useEffect() 함수입니다. 컴포넌트가 화면에 나타나거나, 사라질 때 또는 업데이트될 때에 렌더링을 해주는 함수입니다.(컴포넌트가 마운트 될 때 실행되는 함수입니다.) useEffect() 함수의 가장 기본적으로 사용될 때의 예시입니다. //렌더링이 완료될때마다 실행 useEffect(() => { }); //처음 렌더링이 완료된후 text값이 변경될때마다 실행 useEffect(() => { },[text]); //처음 렌더링이 완료된후에만..

Error command failed with exit code 1. Error 발생 React 프로젝트에서 yarn start 또는 npm start으로 서버를 시작할 때에 발생하는 에러입니다. 설치되어 있는 node의 문제가 아닌 yarn 또는 npm의 문제로 보여집니다. yarn을 다시 설치하여 확인을 해보는 것이 좋습니다. 또는 yarn을 다시 설치 후에 서버를 다시 기동 해보도록 합니다.