<div id="readability-page-1" class="page"><div><h2 id="ui-작성의-필요한-요소">UI 작성의 필요한 요소</h2>
<ol>
<li>디자인</li>
<li>아이콘, 이미지 리소스</li>
<li>폰트</li>
</ol>
<h2 id="fontawesome">FontAwesome</h2>
아이콘에 해당하는 부분을 폰트형식으로 제공해준다. 
cdnjs 통해 다운로드하자 
https://cdnjs.com/libraries/font-awesome 
<img src="https://media.vlpt.us/images/ginameee/post/59e52d2b-4368-4c72-aa6e-ab1a190a9fdf/image.png">
<h2 id="대댓글-출력">대댓글 출력</h2>
재귀호출을 대댓글을 출력한다.
<pre><code>function makeComment(comments, called = 0) {
 const commentString = [];

 for(let i = 0; i &lt; comments.length; i++) {
 commentString.push(`
 &lt;div style="padding-left: ${called * 40}px;" class="mt-4"&gt;
 &lt;div class="text-gray-400"&gt;
 &lt;i class="fa fa-sort-up mr-2"&gt;&lt;/i&gt;
 &lt;strong&gt;${comments[i].user}&lt;/strong&gt; ${comments[i].time_ago}
 &lt;/div&gt;
 &lt;p class="text-gray-700"&gt;${comments[i].content}&lt;/p&gt;
 &lt;/div&gt; 
 `);

 if (comments[i].comments.length &gt; 0) {
 commentString.push(makeComment(comments[i].comments, called + 1));
 }
 }

 return commentString.join('');
 }</code></pre></div></div>

ginameee.log

Jangchun Lee

UI 작성의 필요한 요소
디자인
아이콘, 이미지 리소스
폰트
FontAwesome
아이콘에 해당하는 부분을 폰트형식으로 제공해준다.
cdnjs 통해 다운로드하자
https://cdnjs.com/libraries/font-awesome
대댓글 출력
재귀호출을 대댓글을 출력한다.
function makeComment(comments, called = 0) {
 const commentString = [];
 for(let i = 0; i < comments.length; i++) {
 commentString.push(`
 <div style="padding-left: ${called * 40}px;" class="mt-4">
 <div class="text-gray-400">
 
 ${comments[i].user} ${comments[i].time_ago}
 </div>
 ${comments[i].content}
 </div> 
 `);
 if (comments[i].comments.length > 0) {
 commentString.push(makeComment(comments[i].comments, called + 1));
 }
 }
 return commentString.join('');
 }

[실습1] 댓글 UI 만들기

댓글