๐ป ์ ๊ท ๋๊ธ ์ถ๊ฐ ์์ค
document.querySelector('#type3').onclick = addNewComment; //๋ฒํผํด๋ฆญ์ addNewCommentํจ์์คํ //์๋ก์ด ๋๊ธ ์ถ๊ฐ ํจ์ function addNewComment() { getTimeStamp(){ //๋ ์ง ์ ๋ ฌํ๋ ํจ์ ์๋ต } let name = document.getElementById('type1').value; //์ ๊ท์ ์ ์ด๋ฆ let comment = document.getElementById('type2').value; //์ ๊ท๋๊ธ๋ด์ฉ //1. ์ ์๋ฆฌ๋จผํธ li ๋ง๋ ๋ค let li = document.createElement('LI'); //2.li์ ๋ด์ฉ์ ์ถ๊ฐํ๋ค. li.innerHTML = '<div class="reple"><div class="name">' + name + '</div><div class="date">' + getTimeStamp() + '</div><br><div class="comment">' + comment + '</div></div><hr>'; //3.์ฝ์ ํ ๋ ค๋ ๋ถ๋ชจ์๋ฆฌ๋จผํธ ์ ํํด์ ๊ฐ์ ธ์ค๊ธฐ let parent = document.querySelector('#ulp'); //4.๋ถ๋ชจ์๋ฆฌ๋จผํธ์ li์ถ๊ฐํ๊ธฐ parent.prepend(li); } }
-> ์ฌ๊ธฐ์๋ innerHTML์ ์ฌ์ฉํด์ ์ง์ ์ ์ผ๋ก ํ๊ทธ๋ฅผ ๋ฃ์๋ค. ๋ณด์์ ๋ฌธ์ ๊ฐ ์์ง๋ง ์ฌ๋ฌ๊ฐ์ง ํ์ฉ์ ์ํด ์ฐ์ต์ผ์ ๋ฃ์๋ค.
๐ป ๋๊ธ ์ ๋ ฌํ๊ธฐ + ๊ธฐ๋ณธ ๊ฐ์ฒด์ ์ ์ฅ๋ ๋๊ธ ๋ณด์ฌ์ฃผ๊ธฐ
//๋๊ธ์ฌ๋ฌ๊ฐ๋ณด์ฌ์ฃผ๊ธฐ function renderTwits() { DATA.forEach(renderTwit); //DATA.forEach()๋ด์ฉ์์ํํจ } //li HTMl์ ul์ ๋ด์์ฃผ๊ธฐ function renderTwit(comment) { let commentElement = makeCommentElement(comment); let ul = document.querySelector("#ulp"); ul.appendChild(commentElement); } //HTML ๋ง๋ค์ด์ฃผ๊ธฐ function makeCommentElement(comment) { let liElement = document.createElement('li'); let div_reple = document.createElement('div'); div_reple.classList.add('reple'); let div_name = document.createElement('div'); div_name.classList.add('name'); div_name.textContent = comment.user; div_name.onclick = addSameList; //์ด๋ฆ์ ํด๋ฆญํ๋ฉด ๊ฐ์ ์ด๋ฆ์ฐพ๊ธฐ ํจ์ ์คํ let div_date = document.createElement('div'); div_date.classList.add('date'); div_date.textContent = comment.created_at; let br = document.createElement('br'); let div_comment = document.createElement('div'); div_comment.classList.add('comment'); div_comment.textContent = comment.message; let line = document.createElement('hr'); div_reple.appendChild(div_name); div_reple.appendChild(div_date); div_reple.appendChild(br); div_reple.appendChild(div_comment); liElement.appendChild(div_reple) liElement.appendChild(line); return liElement; }
-> ํจ์3๊ฐ๋ฅผ ์์ฑ ํ์๋ค.
1๋ฒ์งธ - renderTwits()
DATA๋ผ๋ ๊ฐ์ฒด์์ ๋ด์ฉ์ ๊ฐ์ ธ์ค๊ธฐ ์ํ ํจ์ ์ด๋ค. ์ฌ๊ธฐ์๋ .forEach๋ฅผ ์ฌ์ฉํ์ฌ DATA๋ผ๋ ๊ฐ์ฒด๋ฅผ ์ํํ๋ฉฐ ๋ด์ฉ์ ๊ฐ์ ธ์๋ค. DATA์ ๋ด์ฉ์ด rederTwitํจ์๋ฅผ ํตํด ํ์์ ์ ๋ฆฌ๊ฐ ๋์ ๋์จ๋ค.
2๋ฒ์งธ - renderTwit()
li๋ฅผ ul์์ ๋ด์์ฃผ๊ธฐ ์ํ ํจ์์ด๋ค.
3๋ฒ์งธ - makeCommentElement()
๋๊ธ์ ์ ๋ฆฌํด์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด li์์ html์ dom์ฝ๋๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ํจ์์ด๋ค.<li> <div class="reple"> <div class="name">์ด๋ฆ</div> <div class="date">๋ ์ง</div><br> <div class="comment">๋๊ธ๋ด์ฉ</div> </div> <hr> </li>
์์ html์ ๋ง๋ ๊ฒ์ด๋ค.
div_name.onclick = addSameList; ์ด๊ฒ์ ์ด๋ฆ์ ํด๋ฆญํ๋ฉด addSameListํจ์๊ฐ ์คํ๋๊ธฐ ์ํจ์ด๋ค.
๐ป ์ด๋ฆ ํด๋ฆญ์ ๊ทธ ์ฌ๋์ด ์ด ๋๊ธ๋ง ๋ณด์ฌ์ฃผ๊ธฐ
//!!!!์์ฑ์ ํด๋ฆญ์ ์ด๋๊ธ ๋ค ๋ณด์ฌ์ฃผ๊ธฐ function addSameList() { let filteredData = []; //๋น๋ฐฐ์ด์ ๋ง๋ค์ด์ค let ul = document.querySelector("#ulp"); //๊ธฐ์กด ๋ด์ฉ ๋ค ์ง์ while (ul.firstChild) { ul.removeChild(ul.firstChild); } //๊ฐ์ ์ด๋ฆ ์ธ๊ฑฐ ์ฐพ๊ธฐ for (let i = 0; i < DATA.length; i++) { if (event.target.textContent === DATA[i].user) { filteredData.push(DATA[i]);//์ด๋ฆ์ด ๊ฐ์ผ๋ฉด ๋น ๋ฐฐ์ด์ ๋ฃ์ด์ฃผ๊ธฐ } } //ul์ ์๋ก ๋ง๋ ๋ฐฐ์ด ๋ฃ์ด์ฃผ๊ธฐ for (let j = 0; j < filteredData.length; j++) { ul.appendChild(makeCommentElement(filteredData[j])); } }
-> ๋จผ์ ๊ธฐ์กด์ ul์์ ๋ด์ฉ์ ๋ค ์ง์์ค๋ค.
while (ul.firstChild) { ul.removeChild(ul.firstChild); } ul์ ์ฒซ๋ฒ์งธ ์์ ๊น์ง ๋ค ์ง์ธ๋ ๊น์ง while๋ฌธ์ ๋๋ ค ์ ์ฒด ์ญ์ ๋ฅผ ํ๋๊ฒ์ด๋ค.
์ญ์ ํ DATA์ ๊ฐ์ฒด ๊ธธ์ด ๋งํผ ์ํํ๋ฉด์ ํด๋ฆญํ๋ ์ด๋ฆ(event.target.textContent)๊ณผ DATA[I].user๋ฅผ ๋น๊ตํ๋ค.
๋น๊ตํ์ฌ ๊ฐ์ผ๋ฉด ๋น๋ฐฐ์ด์ ๊ฐ์ฒด๋ฅผ ๋ฃ์ด์ค๋ค.
๐ป ๋๋ค๋ฒํผ ํด๋ฆญ์ ๋๋ค์ผ๋ก ๋๊ธ ๋ณด์ฌ์ฃผ๊ธฐ
//๋๋ค์ผ๋ก ๋๊ธ ์๋ก ๋ฑ๋กํ๊ธฐ function renderRandomTwit() { let refreshComment = makeCommentElement(generateNewTweet()); let ul = document.querySelector("#ulp"); ul.prepend(refreshComment); DATA.push(generateNewTweet()); //DATA ๊ฐ์ฒด์ ๋๋ค๊ฐ ๋ฃ๊ธฐ } document.querySelector('#newbutton').onclick = renderRandomTwit; //๋๋ค๋ฒํผ ํด๋ฆญ์
-> ul์ ๋๋ค๊ฐ ๋ด์์ ์ ๋ ฅํ๊ณ DATA์์๋ ๋ด๋๋ค.(๊ฐ์์ด๋ฆํด๋ฆญ์ ๋ณด์ฌ์ค์ผํ๊ธฐ์)