본문 바로가기

React/Link-Developer

(2)
Axios 요청을 미친 듯이 보내는 현상 오류 발견 StudyDetail 페이지에서 발견된 에러이다. 구글 개발자 도구 Network에서 axios 요청을 계속해서 보내는 것을 목격했다. 주니어 프론트엔드 개발자가 서버에 디도스를 건다는 말이 갑자기 떠올랐다. 이래서... 오류 분석 및 원인 당황스러웠지만 해당 Study(게시글)의 작성자의 이름을 찾는 함수를 브라우저에 렌더링 되는 retrun()에서 함수 호출이 되도록 로직을 작성한것이 유력한 원인으로 보였다. const readWriterHandler = () => { let body = { _id: Study.writer } axios.post('/api/users/profile', body) .then(response => { setwriter(response.data.profile) ..
[Link Developer] HOC로 반환된 컴포넌트의 props undefined 이슈 오류 발견 MyProfile 페이지에서 발견된 에러이다. props에 저장된 로그인한 유저의 id를 조회하여 백엔드로 API 요청을 보낸다. 백엔드에서는 요청받은 id를 DB에서 찾은 뒤 해당 user에 객체를 클라이언트로 응답한다. 위 처럼 구상했었지만 props가 undefined 에러가 출력된다. 오류 분석 및 원인 useEffect(() => { const userId = props.user.userData._id let body = { _id: userId } axios.post('/api/users/profile', body) } 위 useEffect는 리액트 라이프 사이클에서 컴포넌트가 마운트된 직후 그러니깐 componentDidMount 단계에서 props를 호출하였기 때문에 오류가 난다..