Today Hailie Learned

✔️ 에러 코드 Input elements should have autocomplete attributes (suggested: "current-password") ✔️ 에러가 나온 이유 input type password의 경우에는 자동 완성 속성이 있어야한다! ✔️ 에러 해결 방법 autoComplete 속성을 추가해주었다. 여기서는 자동 완성 기능 off로 설정함. 👇에러코드 👇 👇에러 수정 코드 👇 참고) https://icecokel.tistory.com/13 쉽게 놓치고 지나갈 수 있는 실수 정리 : HTML (1) 안녕하세요. 저희 회사에서는 개발하면서 Warning과 Error관해 깐깐한 편인데요. 이전 회사와, 공부할 때는 원하는 기능만 되면, 개발이 완료되었다고 생각했었는데, Warn..

✔️ 에러 코드 Password field is not contained in a form ✔️ 에러가 나온 이유 password는 form에 감싸져 있지 않다고 오류가 떴다! ✔️ 에러 해결 방법 input 태그를 으로 묶어주었다. 👇에러코드 👇 👇에러 수정 코드 👇 참고) https://webfirewood.tistory.com/75 [DOM] Password field is not contained in a form 서비스 중인 웹에서 다음과 같은 경고 메세지가 나타나는 것을 발견했다. password 타입의 input 태그가 form 태그 안에 위치하지 않기 때문에 나타나는 경고다. 고치지 않아도 별로 문제는 없지만 일 webfirewood.tistory.com 😃 잘못된 개념 전달이 있다면 댓글..

✔️ 에러 코드 Uncaught TypeError: data.map is not a function ✔️ 에러가 나온 이유 이 오류의 원인은 다양한데, 이번에는 운좋게 구글링을 통해서 바로 해결할 수 있었다. 이번에는 이런 식으로 array인지 확인해서 이게 true 이면 map을 사용하는 식으로 했다. {Array.isArray(data) ? data.map((item) ⇒ … 👇에러코드 👇 import { useEffect, useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display: fl..

✔️ 에러 코드 Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. 해석해보기~~ 아직 마운트되지 않은 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다. 이는 비동기식으로 나중에 호출이 구성 요소를 업데이트하려고 시도하는 렌더링 함수에 부작용이 있음을 나타냅니다. 대신 이 작업을 useEffect로 이동합니다. ✔️ ..

✔️ 에러 코드 Objects are not valid as a React child (found: object with keys {id, city, doing, photo}). If you meant to render a collection of children, use an array instead. ✔️ 에러가 나온 이유 map을 쓰지 않고 바로 나 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅 👇에러코드 👇 import { useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display:..

토이 프로젝트를 만들면서 로컬스토리지 기능을 만들고 싶어졌다. 그래서 구글링, 유튜브, 도서를 통해서 이것저것 시도 해보다가 도서관에서 '스무디 한 잔 마시며 끝내는 리액트 + TDD'을 빌렸다. 왜냐면 여기에 로컬 스토리지 기능에 관한 부분이 있기 때문에!! 책에 나온 예제 코드는 아래와 같다. const addToDo = (toDo: string) : void => { if(toDo){ const newList = [...toDoList, toDo]; localStorage.setItem('ToDoList', JSON.stringify(newList)); setToDoList(newList); } } const deleteToDo = (index:number) : void => { let list =..

오류 메세지 Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string. 문제 발생 환경 도서관에서 토이프로젝트 만든 것을 좀 보완하고자 npm run dev로 클라이언트와 서버를 켰는데 위와 같은 메세지가 뜨면서 앱이 작동되지 않았다. (정확히는 클라이언트 화면이 뜨지 않았다.) 그리고 위에서는 서버가 3003 포트에서 실행중이라고 떠있지만, 실제로 가보니까 "CANNOT GET" 오류가 떠있었다... 원래는 후딱 켜서 해보려고 했는데 시간을 엄청 잡아먹었다가 조..

Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 문제 원인 useState 안의 값으로 title, amount 값 이렇게 2개를 받는데, onChange 함수에서는 각각 하나씩만 설정해주고 있다. 그래서 이 에러창이 나오는 것 같다. 해결방법 다른 값은 바꿀 필요가 없기 때문에 ..

문제점 1. 업데이트 하는 Modal 부분에서 사진 수정이 안된다. (미리보기도 안되고, 서버한테 사진 데이터 못넘겨줌) 기존 코드 //Modal.js const [photo, setPhoto] = useState(data.photo); // const photoUpdateHandler = (event) => { // let fileInput = false; // if (event.target.files[0]) { // fileInput = true; // } // if (fileInput) { // try { // Resizer.imageFileResizer( // event.target.files[0], // 150, // 150, // "png", // 90, // 0, // (uri) => { /..

문제사항 서버로부터 get한 더미데이터와 추가된 데이터를 App.js 파일에서 받고, 이것을 Data.js 파일에서 props로 내려 받아서 map 메서드를 사용해서 뿌려주었다. 그리고 Data.js 에는 Modal.js 파일이 조건에 따라 열리게 구현을 했고, 이 Modal.js 파일에서 수정 버튼을 누르면 해당하는 데이터가 나오고, 수정하기 버튼을 누르면 서버로 데이터를 받아서 이를 App.js에서 받고 이를 Data.js 파일에서 props로 내려 받는 구조입니다. 여기서 문제는 Modal.js 에서 수정하기 버튼을 누르면, 서버에서는 patch로 받아서 데이터를 잘 받지만, 이상하게도 화면상에는 맨 아래 데이터로 붙으면서 수정 기능을 제대로 하지 못했다. 오류해결 며칠 밤낮을 고통스러워 하다가, ..