안녕하세요. 강의 재미있게 잘 듣고 있습니다!
다름이 아니라 며칠째 해결해보려고 올려두신 github 소스코드와 비교하며 해결해보려고 했으나 좀처럼 해결이 되지 않아 질문 드립니다.
댓글 기능 (3) SingleComment의 약 15분 경에 해당하는 댓글 리스트를 console에 찍어내는 것까지는 성공했습니다. 이를 화면에 출력하고자 하는데 댓글 내용은 잘 나오지만 댓글 작성자의 이름과 프로필 사진이 나타나지 않는 문제가 발생하였습니다.
출력된 에러 메세지는 다음과 같습니다.
<img src="https://cdn.inflearn.com/public/files/posts/66eb676f-ec16-4f44-8da2-d727fa898cd3/blob" alt="" />
console.log로 props.comment.writer.name을 출력하면 잘 나오기는 하던데 어떤 부분이 문제인지 알 수 있을까요??
https://github.com/coding-Benny/react-youtube-clone

<table class="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip="" style="border-spacing: 0px; border-collapse: collapse; tab-size: 8; color: #24292e; font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 14px; background-color: #ffffff;">
<tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"></tr>
<tr style="box-sizing: border-box;">
<td id="LC53" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">{ props.comment.writer &amp;&amp; &lt;Comment</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L54" class="blob-num js-line-number" data-line-number="54" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
<td id="LC54" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">actions={ actions }</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L55" class="blob-num js-line-number" data-line-number="55" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
<td id="LC55" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">author={ props.comment.writer.name }</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L56" class="blob-num js-line-number" data-line-number="56" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
<td id="LC56" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">avatar={ &lt;Avatar /&gt; }</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L57" class="blob-num js-line-number" data-line-number="57" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
<td id="LC57" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">content={ &lt;p&gt;{ props.comment.content }&lt;/p&gt; }</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L58" class="blob-num js-line-number" data-line-number="58" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
<td id="LC58" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; overflow-wrap: normal; white-space: pre;">
/&gt; } 

로 한번 해보세요!
</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L59" class="blob-num js-line-number" data-line-number="59" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; line-height: 20px; color: rgba(27, 31, 35, 0.3); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td>
</tr>
</tbody>
</table>

답글달아주신분..감사합니다 진짜 ㅠㅠㅠㅠ&nbsp;

{ props.comment.writer && <Comment
	actions={ actions }
	author={ props.comment.writer.name }
	avatar={ <Avatar /> }
	content={ <p>{ props.comment.content }</p> }
	/> } 로 한번 해보세요!

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

댓글에 writer 정보가 넘어오지 않습니다