댓글, 대댓글 구조
let template = `
<div class="bg-gray-600 min-h-screen pb-8">
<div class="bg-white text-xl">
<div class="mx-6 px-4">
<div class="flex justify-between items-center py-6">
<div class="flex justify-start">
<h1 class="font-extrabold">Hacker News</h1>
</div>
<div class="items-center justify-end">
<a href="#/page/${store.currentPage}" class="text-gray-500">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
</div>
<div class="h-full border rounded-xl bg-white m-6 p-4 ">
<h2>${newsContent.title}</h2>
<div class="text-gray-400 h-20">
${newsContent.content}
</div>
{{__comments__}}
</div>
</div>
`;
대댓글 재귀구조
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">
<i class="fa fa-sort-up mr-2"></i>
<strong>${comments[i].user}</strong> ${comments[i].time_ago}
</div>
<p class="text-gray-700">${comments[i].content}</p>
</div>
`);
// 대댓글 확인
if (comments[i].comments.length > 0) {
// 재귀 호출 방식 (끝을 알 수 없는 경우 자주 사용되는 테크닉)
commentString.push(makeComment(comments[i].comments, called + 1));
}
}
return commentString.join('');
}
읽음 상태 저장
-읽어온 전체 데이터를 feeds 배열에 read상태와 함께 저장
-feedDetail 페이지 방문 시 id와 비교 -> read= true로 변경하여 방문표시반영
const store = {
currentPage: 1,
feeds:[],
};
function makeFeeds(feeds) {
for (let i = 0; i < feeds.length; i++){
feeds[i].read = false;
}
return feeds;
}
newsList.push(`
<div class="p-6 ${newsFeed[i].read ? 'bg-red-300' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
for (let i = 0; i < store.feeds.length; i++){
if (store.feeds[i].id === Number(id)) {
store.feeds[i].read = true;
break;
}
}