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

G General

작성한 질문수

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

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

서버사이드렌더링 실무 개발 프로세스에서의 순서 질문입니다

작성

336

    if (fullUserWithoutPassword){
      const data = fullUserWithoutPassword.toJSON(); // 시퀄라이즈에서 보낸 데이터는 JSON이 아님
      data.Posts = data.Posts.length;                // length로 바꿔주는 이유는 Posts를 통으로 보내면 개인정보
      data.Followers = data.Followers.length;        // 가 여과없이 전송되기 때문.
      data.Followings = data.Followings.length;      // 이를 위해 JSON으로 변환을 한 것임.
      data.nickname = fullUserWithoutPassword.nickname;
      return res.status(200).json(fullUserWithoutPassword);
    }

위는 GET /user/:userId 라우터에서 프론트단으로 데이터를 넘겨주는 부분입니다.

리턴문을 보시면 아시겠지만 데이터 전송을 원래 의도라면 data를 보내야 하지만 실수로 fullUserWithoutPassword로 보내서, 프론트단에서 userInfo를 참조할 때(원래 userInfo는 Followers, Followings, Posts만 가지고 있으며, [id].js에서만 nickname을 사용하기 때문에 제가 임의대로 nickname을 추가시켰습니다) useInfo.nickname참조에서 오류가 나서 에러페이지가 발생합니다.

문제는 이를 서버사이드렌더링으로 하면

"Objects are not valid as a React child (found: object with keys {id})" 에러가 _document.js파일에서 발생하고, 이는 서버단에서 프론트 페이지 데이터를 처리하는 중에 일어난 오류이기 때문에 리덕스 데브툴즈에서 잡을 수가 없어서 에러 원인을 파악하는데 상당히 오랜 시간이 걸렸습니다.

(실제로 에러 발생 파일이 직접적으로 연결된 router/user.js에서 발생하는 것이 아니라 pages/_document.js에서 발생하기 때문에 도대체 어디가 문제인지 쥐잡듯이 찾아보다가 [id].js 파일 서버사이드렌더링 부분에서 LOAD_USER_REQUEST디스패치를 주석처리하고 돌려봤더니 잘 돌아가길래 거기서 힌트를 얻어서 겨우 파악했습니다ㅠ)

[id].js처럼 처음부터 서버사이드로 만들면 에러 파악하기가 힘들다고 개인적으로 느꼈는데 실무에서는 어떤지 궁금합니다! 실무에서도 서버사이드렌더링 파트를 제일 마지막에 진행하나요?

redux react nodejs express Next.js

답변 1