Hello_coding

리액트로 개발을 하다 보면 늘 만나는 key 에러 ,,, 요번에 만난 에러는 TodoList를 만들던 중 key값이 unique하지 않다는 내용이였다. 예전에 정리해둔 글 (아래 링크 참고) 을 참고하려 했지만, 고유의 id값을 사용할 수 없었고, 투두리스트 같은 경우 재렌더링 되더라도 데이터가 유지 되어야하는데 이 경우 재렌더링 되면 다시 id값이 처음부터 시작되는 (...) 현상 때문에 다른방법이 필요했다. https://mandelina-code.tistory.com/102 [React] 리액트 키에러 | Warning: Each child in a list should have a unique "key" prop 에러 map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 하지..

내가 만든 컴포넌트에 ref를 달고 싶었다. 하지만 다음과 같은 에러가 . . . Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? useRef는 알아도 forwardRef는 뭐지?! forwardRef에 대해 알아보자! 먼저 ref란 무엇인지 간략하게 말해보자. ref는 React에서 HTML엘리먼트에 접근하기 위해 사용한다. (마치 자바스크립트의 셀렉터처럼 . . . ) 더 자세한 useRef를 알고싶다면 👇 https://mandelina-code.tistory.com/86 [React - Hook] useRef가 뭘까..

열심히 기능 구현중, props를 전달하는 과정에서 error가 발생했다. 찾아보니 ESLint의 유효성 검사에서 Type에 대한 내용이 누락되어서 저런 에러가 발생한 것 같았다. 해결방법 1 ) propTypes정의하기 먼저 prop-types을 설치한다. npm i prop-types 그 후 , 에러가 발생되는 컴포넌트에 파라미터(props로 받은 값들) 값들의 Type을 지정해준다. EmailInput.propTypes = { //value , onChange는 props로 받은 값들 value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, }; 참고 : https://ko.reactjs.org/docs/typechecking..

1. 깃헙 페이지 만들고 2. package.json에 밑에 코드 추가하고 { "homepage":"여러분 github page url", ... } 3. npm run build 해준다음 4. build안의 파일을 그대로 올렸는데도 배포시 흰화면이 떳다.. (이걸로 며칠을 고생했는지...) 구글링과 팀원분들을 총동원해 알게 된 사실 .. (사랑해여 팀원분들. . . ) 1. build파일의 index.html 경로가 잘못되어있다. 저 1번과 2번 경로가 ./static이 되어야한다. (경로가 이상하게 되어 있었다..) 2. npx create-react-app my-app 로 react 프로젝트를 생성하면 .gitignore에 /build 파일이 적어져있다. (build파일이 안올라가서 드래그앤 드롭으..

Blog를 만들려고 npx 명령어를 쳤는데 계속 저런 오류가 나왔다. Cannot create a project named "Blog-Page" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name. 알고보니 npm 네이밍에서는 대문자나 특수문자를 입력하지 말라고 되어있다. 너무 허무한 에러 . . 잘 확인하길 바란다.