작성
·
392
0
좋은 강의 잘 듣고 있습니다!!
현재 아래의 에러때문에 이틀째 진도를 나가지 못하고 있습니다. 조언 좀 부탁드립니다.
상황: user의 posts 를 다이나믹 라우팅으로 불러오는 과정에서 에러가 발생합니다.
브라우저
post_saga.js
user/[id].js의 SSR 부분
post_action.js
서버 로그
1. 서버의 로그를 보면 데이터는 스토어에 UserInfo와 mainPosts에 데이터는 채워지는 것 같은데 user/[id].jsx의 id에 타입에러가 발생해서 렌더링이 완료되지 못하는 것 같습니다. 찾아봐도 id에 큰 문제가 없어보이는데 어떤 문제인지 조언 주실 수 있나요?
2. Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
위 에러는 SSR 과정에서 문제가 생기면 대부분 위의 에러로그가 발생하는데 이 로그가 내부적으로 뭘 의미하는 지 궁금합니다.
3. 추가로 SSR을 적용한 후부터 서버로그에 의존할 수 밖에 없어서 디버깅이 좀 힘들어지는데 이 부분도 조언 부탁드립니다!
관련된 코드가 많아서 모두 캡쳐하지는 못해서 필요하시다면 아래의 깃허브 주소로 참고 해주시면 감사하겠습니다.
https://github.com/Leo-Xee/react-nodeBird
답변 2
1
user id jsx의 162번째 줄이 문제라고 되어있습니다. 서버사이드렌더링에서는 서버 에러로그를 보는 수밖에 없습니다. 이 줄 위에 id를 갖고있어야 하는 객체를 콘솔로그 찍어보세요. 서버에서 데이터를 가져오는 부분(또는 더 먼저 데이터를 저장하는 부분)부터 잘못되었을 수 있습니다.
getServerSideProps에서 문제가 생기면 데이터가 제대로 전달되지않아 _document의 getInitialProps 코드에도 데이타가 안 들어갑니다. 그게 프론트에서 에러로 뜹니다.
0
id 부분은 해결한 것 같습니다 그런데 이 에러는 뭘 의미하는 걸까요? 구글링해봐도 해결이 잘 안됩니다.. _document.jsx의 Head 렌더링 부분에서 걸리는 것같은데 제로초님 깃헙의 ch6에 _document.js와 동일하게 작성해도 문제가 생깁니다.ㅠ 피드백 부탁드려요
원인은 찾았습니다.
post/1 이렇게 요청이 가야하는데 뜬금없이
post/requestProvider.js.map 이라는 요청이 가서 기존 요청을 덮어씌워버리네요.
해결 방법은 저도 모르겠습니다. 이 파일이 뜬금없이 왜 튀어나왔는지를 찾아봐야할 것 같습니다.
userInfo.Posts.length 하셔야 하는데 userInfo.Posts 만 하셨네요.
이런 거 찾는 방법은 한 부분씩 주석처리하면서 어디를 지웠을 때 정상적으로 돌아오는지 찾으시면 됩니다.
아.. 헤더 부분과 length 부분이 문제였군요... 왜 저는 계속 쳐다봐도 안보였을까요 ㅠ
혹시 SSR되는 페이지는 next에서 감싸주는 객체들 때문에 개인적으로 디버깅이 더 힘들어진 것 같은데 말씀하신 것처럼 주석처리해서 찾는 방식과 서버 로그를 찍어보는 방식이 실무에서도 최선인건지 궁금합니다.
그리고 post/requestProvider.js.map 이 부분을 캐치하신 방법도 궁금합니다.
제로초님 늦은 시간까지 귀한 시간 내주셔서 정말 감사합니다.!!!
에러메시지가 전혀 이해할 수 없는 방향으로 나오는 경우 그렇게 할 수밖에 없습니다. 유튜브 영상거리 하나 생겼네요.
requestProvider.js.map은 params.id console.log 찍어봤더니 나왔습니다. 왜 이게 들어가는지는 모르겠습니다.
Head 컴포넌트 어떻게 import하셨나요?