들어가며, react로 반응형 웹을 만들어 보려고 cra를 이용해 리액트 프로젝트를 시작했다. 타입스크립트와 기본적인 것들을 설치했는데 이런 경고가 장황하게 떴다. 대충 바벨에 관련해서 말하는 것 같았다. 경고문구 발생 해당 경고 문구! One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already..
오류해결
Each child in a list should have a unique key prop. 처음엔 todoList를 리스트렌더링할 때 idx값을 key값으로 넘겨줬었다. 근데 배열의 원소 순서가 바뀌면 index값도 바뀌고 컴포넌트마다 고유해야 하는 key값도 바뀌기 때문에 지양해야 한다고 한다. 그래서 나는 idx 부분을 todo.id로 바꿨고 저런 오류가 발생했다. [초기 코드] {todoList.map((todo, idx) => ( ))} [수정 코드] {todoList.map((todo) => ( ))} 코드를 수정했을때 id값을 찾지 못하는 것 같았다. 이거때문에 3일이라는 시간이 소요됨.... 에러를 해결하는 방법을 엄청나게 찾아봤는데 해결방법이 2개가 있었다. 1. Key값을 정확하게 넣을..
리액트로 투두리스트(todoList)를 구현하고 있던 도중 이런 오류를 만났다. 폼을 제출할 때 콘솔창에 이런 오류가 뜨기 시작했다.. 뭐가 문제인지 구글링해봤는데 form 안에 버튼이 2개가 존재하면 이런 오류가 뜰 수 있다고 한다. 내가 쓴 코드는 이러하다. { onEdit(index); }} > setNewTodo(e.target.value)} /> 제출 setEdited(false)} > 취소 버튼이 2개인데 버튼마다 타입을 명시해줘야 한다고 해서 각 버튼마다 타입을 명시해줬다. 제출 setEdited(false)} > 취소 근데도 오류가 뜸.. 그래서 다른 방법을 찾아야 했다. 나머지 방법을 스택오버플로우에서 찾았는데 e.preventDefault()를 사용해야 한다고 나와있었다. 그러면 저 코..
문제상황 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key) 오늘 리액트 프로젝트를 진행하는데 콘솔창에 이런 오류가 떴다. pull request를 진행 후 새 브랜치를 파고 pull을 받아온 후에 이런 오류를 접했다. 처음 겪어보는 오류여서 팀원들에게 먼저 조언을 구했다. 한 팀원이 🧐 : .env 파일에 잘 넣으셨나요? 라는 말을 듣자마자 아! 하고 깨달았다. 우리팀은 firebase를 공동으로 사용하고 프로젝트 설정 내 SDK 설정 및 구성에 있는 key값을 .env 파일에 넣어 연동시켰다. 그리고 그 .env 파일을 .gitignore에 넣어놔 push를 할 때 같이 들어가지 않아 사라졌던 것이다. 해결방법 나는 .env 파일에 우리팀 ..
