인프런 커뮤니티 질문&답변

LEO님의 프로필 이미지
LEO

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

사용자 게시글, 해시태그 게시글

에러 문의 드립니다 ㅠㅠ

작성

·

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

LEO님의 프로필 이미지
LEO
질문자

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

LEO님의 프로필 이미지
LEO
질문자

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

LEO님의 프로필 이미지
LEO
질문자

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

클론받아서 봐보겠습니다

LEO님의 프로필 이미지
LEO
질문자

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

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

원인은 찾았습니다.

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

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

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

LEO님의 프로필 이미지
LEO
질문자

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

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

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

 

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

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

LEO님의 프로필 이미지
LEO
질문자

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

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

LEO님의 프로필 이미지
LEO

작성한 질문수

질문하기