노인과바다의 개발로그 노인과바다의 개발로그

밑의 사진의 경로 순서는 App.js->AccountRoutes.js->SingUpPage->AuthApis.js 보면 AuthApis에서 경로가 memberIdCheck이라고 되어있는데(baseURL설정 없음) 콘솔창에 뜬 에러를 보면 /accounts/memberIdCheck이라는 라우터로 리퀘스트를 날린것을 볼 수 있따. 즉 리엑트 App.js에 있는 리엑트 라우터 상에서 /accounts/*이부분의 영향을 받아 기본적으로 url에 accounts가 딸려 붙는 것을 알 수 있다.

json-server로 간단하게 api테스트를 하려고 다음과 같이 만들었는데 프론트에서는 정상적으로 계속 작동이 되는데 백엔드에서 Cannot set headers after they are sent to the client 라는 에러가 계속 났다. 검색을 해 보니 주로 res가 중복되었을때 나온다고 한다. 하지만 내 코드에서 res를 두번쓴곳이 없는걸? 또 검색을 해보니 미들웨어에서 res를하고나서 next()를 했을때에도 발생한다고 한다. res.응답메서드"는 한 번만 쓸 수 있다.. res.send 후에 next()를 하면 다음 미들웨어에서 또 res.send를 하게 되므로 res가 두개가 오게 되기 때문에 두번째 헤더를 세팅할 수 없다는 식으로 에러 메세지가 나온것이다. next를 할 거면 nex..

회원가입 창에서 패스워드 중복검사를 구현하던중 문제가 생겼다. 해결하는데 3시간도 더걸린거 같다 ㅠㅠㅜ 분명히 input에서 onChange를 이용해서 event.target.value를 받아 오는 것 까지는 콘솔창에 제대로 찍히는데, 이를 스테이트에 넣으면 제대로 업데이트가 안되는 것이었다. 콘솔로 찍어보니 password나 passwordConfirm에 어떤값을 넣더라도 첫번째로는 빈스트링이 출력이 되어서 제대로 비밀번호와 비밀번호확인이 일치하는지 검사가 안되는 것이었따...검색을 해보니 useState에 콜백을 주라고 해서 줘봤지만 여전히 무용지물.... 원인을 찾아보니 setState로 업데이트를 하더라도 그 값이 업데이트 되는 것은 동기적으로 되지 않고 비동기적으로 된다고 한다!! 무슨말인고 하..

로그인을 위해 유저 정보를 받아온 뒤 에 스테이트에 저장하려고 했다. useEffect 를 써서 userInfo res를 객체를 setState를 해줬는데도 결과는 빈배열...이 계속 찍히는 것이었다. 이걸 해결하는데 거의 반나절이 걸렸으므로 해결방법을 써본다... 실행순서와 원인: useEffect=>(axios.get response 데이터를 가지고+setState())를 실행시키지만 setState는 response가 올때까지 기다려 주지 않는다. 그냥 빈 객체로 초기화 시켜버린상태이고(setState감지를 못함? 혹은 그냥 setState를 실행했지만 변화가 없어서 그냥 턴이 넘어감?) 데이터가 다 받아진 다음에 다시 setState를 하려 하지만, useEffect가 재 실행되지는 않는다(빈 의..

노드 js에서 error를 console.dir했을때 객체형식으로 나오지가 않아서 에러메세지를 프론트의 유저가 한테 어떻게 전달해야 할지 고민이 많았다. 처음에는 그냥 catch의 인자로 email을 전달해서 그 email이 없는거라는 메세지를 컨트롤러에서 적어서 프론트단으로 보내주는 방식을 사용했었는데,,, 뭔가 이건 제대로된 에러처리가 아닌거 같아서 에러객체에 대해 공부해봤다. 그 결과,,역시나,, 에러 또한 객체였다. node js에서 console.dir이 안써지는것이었다...헐,,ㅎ

프론트에서 값을 입력받아 mysql에 저장을 하려고 하는데 "Duplicate entry '' for key 'users.PRIMARY'",라는 에러가 나왔다. id값을 pk로 설정하고 useState("")에서 ""로 값을 받았는데 ""은 pk가 될 수 없어서 위와 같은 에러가 나타난거같다. 나는 당연히 id는 중복되면 안되니까 pk로 하면 되겠구나 싶었는데 그럴경우에 사용자가 탈퇴를 하면 곤란한 경우가 생긴다고 한다.(그사람이 작성한 게시물도 다 삭제를 해야하나 말아야 되나와 같은...) 만약 사용자가 탈퇴를 한 뒤, 누군가가 똑같은 아이디로 가입을 한다면 문제가 발생할 소지가 다분하다(새로 가입했는데 예전에 작성한 글의 작성자가 되어있던지). 그래서 보통 id에는 unique속성을 넣고 PK는 겹치..

key값이 잘못 전달 되었음을 의미. 주의할점이 여기서 말하는 key 값이 무엇인지 애매할 때가 있다는 것이다. stackoverflow 구글도해보고 에러메시지도 찬찬히 읽어보며 (cards와 form가 힌트) 추적해본결과.. (stackoverflow 고마워요ㅠㅜ) 이곳의 form이 문제였다. formRef를 console.log로 찍어보면 위와 같이 object타입으로 나온다. firebase의 내부가 어떤방식으로 돌아가는지는 모르겠으나 card 객체를 가져올 때 그 key 값(즉 에러메세지에서 말했던 key값이란 가져오는 객체의 key값을 의미하는 것이었다 ) 중에 object가 들어있어서 위와 같은 에러가 발생했다고 추측이 되어진다.. card_add_form.js 의 card내의 formRef를..

components flow : image_uploader.js->index.js-> image_file_input.js 해결방법: image_file_input.js의 ImageUploader를 imageUploader로 바꾸니 해결되었다. class에 있는 function을 호출 할 때 instance의 함수로 호출하지 않고 클래스의 함수를 바로 호출하여 생긴 에러인듯 하다. props로 ImageUploader의 instance를 전달하고있기 때문에 클래스에서 통으로 호출한것 부터 실수