• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

에러 문의 드립니다 ㅠㅠ

22.01.09 13:43 작성 조회수 255

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

LEO님의 프로필

LEO

질문자

2022.01.11

id 부분은 해결한 것 같습니다 그런데 이 에러는 뭘 의미하는 걸까요? 구글링해봐도 해결이 잘 안됩니다.. _document.jsx의 Head 렌더링 부분에서 걸리는 것같은데 제로초님 깃헙의 ch6에 _document.js와 동일하게 작성해도 문제가 생깁니다.ㅠ 피드백 부탁드려요

Head 컴포넌트 어떻게 import하셨나요?

LEO님의 프로필

LEO

질문자

2022.01.13

다음과 같이 import 했습니다. 구글링 중에 간혹 next/document가 아닌  next/head에서 import 해보라는 글이 있어서 해봐도 에러를 발생합니다.

아래 render 부분을 아예 제거해보세요.

LEO님의 프로필

LEO

질문자

2022.01.13

흐어 그래도 동일한 에러가 발생하네요 ㅠ
그냥 이 부분은 skip하고 하는 편이 나으려나요..

지금 깃헙에 소스코드 최신이신가요?

클론받아서 봐보겠습니다

LEO님의 프로필

LEO

질문자

2022.01.13

최신인데 혹시 몰라 방금 다시 push 했습니다.

바쁘실텐데 너무 죄송합니다.

원인은 찾았습니다.

post/1 이렇게 요청이 가야하는데 뜬금없이

post/requestProvider.js.map 이라는 요청이 가서 기존 요청을 덮어씌워버리네요.

해결 방법은 저도 모르겠습니다. 이 파일이 뜬금없이 왜 튀어나왔는지를 찾아봐야할 것 같습니다.

userInfo.Posts.length 하셔야 하는데 userInfo.Posts 만 하셨네요.

이런 거 찾는 방법은 한 부분씩 주석처리하면서 어디를 지웠을 때 정상적으로 돌아오는지 찾으시면 됩니다.

그리고 import Head from 'next/head' 입니다.

LEO님의 프로필

LEO

질문자

2022.01.13

아.. 헤더 부분과 length 부분이 문제였군요...  왜 저는 계속 쳐다봐도 안보였을까요 ㅠ

혹시 SSR되는 페이지는 next에서 감싸주는 객체들 때문에 개인적으로 디버깅이 더 힘들어진 것 같은데 말씀하신 것처럼 주석처리해서 찾는 방식과 서버 로그를 찍어보는 방식이 실무에서도 최선인건지 궁금합니다.

그리고 post/requestProvider.js.map 이 부분을 캐치하신 방법도 궁금합니다.

 

제로초님 늦은 시간까지 귀한 시간 내주셔서 정말 감사합니다.!!!

에러메시지가 전혀 이해할 수 없는 방향으로 나오는 경우 그렇게 할 수밖에 없습니다. 유튜브 영상거리 하나 생겼네요.

requestProvider.js.map은 params.id console.log 찍어봤더니 나왔습니다. 왜 이게 들어가는지는 모르겠습니다.

LEO님의 프로필

LEO

질문자

2022.01.14

그렇군요. 유튜브 영상 알람키고 기다려보겠습니다!!

그리고 다시 한번 감사드립니다! : )