Today Hailie Learned

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로 받아서 데이터를 잘 받지만, 이상하게도 화면상에는 맨 아래 데이터로 붙으면서 수정 기능을 제대로 하지 못했다. 오류해결 며칠 밤낮을 고통스러워 하다가, ..

깃헙에 새로운 레파지토리를 만들고 푸시를 하려고 하는데 아래와 같이 오류창이 떴습니다. remote origin already exists 해결 방법 원격 저장소와의 연결이 되어 있다고 하니 기존의 연결을 끊고 새로 올리고 싶은 곳에 소스코드를 올리면 됩니다. 1. git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다. git remote remove origin 2. git remote add origin [새롭게 연결할 깃 레파지토리 주소] 명령어를 입력합니다. git remote add origin git@github.com:HelloHailie/storybook-practice.git 3. git remote -v 명령어를 입력해서 ..

문제가 일어난 간단한 배경 설명 클라이언트가 새로 입력한 이미지 데이터를 base64로 변환해서 서버로 보낸다. 그리고 서버에서 데이터를 받아와서 클라이언트 서버에서 뿌려주기를 원한다. 내가 직면한 문제 서버로부터 이미지 데이터(base64로 변환된 데이터)를 무사히 가져왔지만, 이미지가 아닌 문자열로 가지고 오는 것이 문제! 미션! 서버에서 가져온 데이터를 문자가 아닌 이미지로 바꿔라!! 삽질한 경로 서버에서 데이터는 무사히 가져왔지만, 어라? 그게 이미지가 아닌 서버네? 그럼 애초에 클라이언트가 데이터를 쏠 때를 고치면 되는게 아닐까????? 라고 생각해서 유저의 데이터 인풋하는 컴포넌트를 수정해보고, 구글링해서 괜찮아보이는 블로그의 코드도 다 따라해보았다. 하지만 결과는 fail!! 3시간이 넘도..

에러 원인 map을 쓰는 구문에서 오류가 발생했습니다. 문법 오류이기 때문에 다음에 작성할 때도 같은 에러가 발생하지 않도록 해야합니다. 에러 해결 1. return 을 쓰지 않을때 👉 map(() => ()) {menuArr.map((menu, index) => ( selectMenuHandler(index)} > {menu.name} ); )} 2. return 을 쓴다면 👉 map(() => { return() }) {menuArr.map((menu, index) => { return ( selectMenuHandler(index)} > {menu.name} ); })}

Each child in a list should have a unique "key" prop. 오류의 원인 ➥ 간단히 배열의 길이를 체크하고 이미 렌더링된 아이템의 수만 확인한다. 리액트에게는 각각의 아이템들이 모두 비슷해 보인다. 그래서 새로운 아이템이 어느 위치에 추가되어야 하는지 모르기 때문에 오류가 나타났다. "key" prop이 없다면 리액트는 새로운 아이템을 div 목록에 있는 마지막 아이템으로 렌더링하고 모든 아이템을 업데이트해서 컨텐츠를 교체한다. 이 방법은 별로 좋지 않은데, 그 이유는 리액트에게 이 모든 아이템들이 비슷해 보이고 배열만 전보다 더 길어진 것을 보았기 때문에 벌어진 일이다. 그래서 추가로 div를 넣어 렌더링해서 끝부분에 추가한 것이다. 그런 다음 모든 아이템들을 지나면..

Cannot set headers after they are sent to the client 에러 원인 Express js. 파일이 하나의 요청(request)에 대해 하나 이상의 응답(response)를 보낼때 생기는 오류 입니다. 에러 해결하기 핵심은 실수로 두 번 호출되는 콜백이나 몸이 전송된 후에 발생하는 오류를 찾아보는 것입니다. 제 코드에서는 오류를 잡는 코드가 2번 반복되어 있어서 오류가 나타나는 것으로 확인하고, 하나를 삭제했습니다. 그랬더니 오류해결! 참고 https://bobbyhadz.com/blog/javascript-error-cannot-set-headers-after-they-are-sent-to-client https://avengersrhydon1121.tistory.co..

SyntaxError: Unexpected token " in JSON at position 0 at JSON.parse 에러의 원인 => json 형태가 아닌 데이터를 json으로 파싱하려고하니까 뜨는 에러 에러 해결방법 express.json()을 하면 배열 또는 객체의 형태만 받아들인다. 그런데 배열이나 객체가 아닌 다른 형태의 body를 가지고 오고 싶다면 (req.body) strict를 false 처리해야한다. 👇Express 공식문서 참고 👇express.json()에서 strict를 false 처리하는 방법 const jsonParser = express.json({strict : false}); 번외 SyntaxError: Unexpected token A in JSON at positi..

미션! 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 주기! 스터디 시간에 정답 코드를 봤기 때문에 자신 있게 도전했지만 풀리지 않았다.. 정말 코드에는 문제가 없었다. 그래서 여기저기 코드를 다시 보고, 끝내는 깃 클론을 다시 해와서 새로운 파일에서 코드를 작성했는데도 실행이 안됐다. 10시가 넘어서 같이 풀었던 페어에게 연락이 왔다. 그때까지만 해도 스터디에서 정답인 코드를 봤기 때문에 금방 해결할 수 있을 것 같다고 했는데 안됐다. 두시간이 넘도록 들여다봤는데도 도저히 해결책을 못찾겠어서 너무 답답했지만, 이대로 잘 수는 없었다!!! 그래서 정말 지푸라기라도 붙잡는 심정으로 디스코드에 ..