이번 미니프로젝트는 정말 나의 치부를 밑바닥 까지 본 프로젝트라 할수있다. 처음 다같이모여 회의할때는 "이정도는 구현할수있겠지" "그냥 응용인데"라며 내 주제도 모르고 건방을 떨었다. 나한테 주어진 업무는 게시글 작성과, 해당 게시글에대한 댓글 기능 구현이었다.
오늘 새롭게 알게된 내용은
$.ajax({
type: 'GET',
url: '/list',
data: {},
success: function (response) {
let rows = response['comments']
console.log(rows)
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment']
let emt = rows[i]['emt']
let music = rows[i]['music']
let num = rows[i]['num']
number_list.push(num)
console.log(comment,emt,music,num)
let card = `postCard-${num}`
let post = `postList-${num}`
let temp_html = `<div class="card" id="${card}">
<div class="card-header">
${emt}
</div>
<div class="card-body">
<p class="card-text">${comment}</p>
<a href="${music}" class="btn btn-outline-dark">음악들으러 가기!</a>
</div>
<ul class="list-group list-group-flush" id="${post}">
<li class="list-group-item">댓글</li>
</ul>
<button onclick="save_list_comment(${num})" type="button" class="btn btn-outline-dark">댓글달기</button>
</div>`
$('#comment-list').append(temp_html)
아이디 값에 번호를 매겨줄수있는것을 알게되었다. 이 기능을 알기까지 얼마나 해매었는지 상상도 못한다..
function save_list_comment(num) {
let post = `post-${num}`
$(`#postCard-${num}`).empty()
let temp_html = `<div class="card" id="${post}" style="width: auto;">
<div class="card-footer">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="text"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<button onclick="save_list_post(${num})" type="button" class="btn btn-outline-dark">작성완료</button>
</div>
</div>`
console.log(post)
$(`#postCard-${num}`).append(temp_html)
show_comment(num)
}
백틱 기호를 배우긴했지만 아직 개념정리가 확실하게 자립되지는 않았다.. 좀더 공부를 많이 해봐야할듯 싶다.
댓글 기능 구현을 거의 완성을 하였지만 댓글을 쓰면 첨부가 안된채로 끝났다.. 호출값 잘 받아왔는데 뭐가 문제지.. 찾아서 다시 새로 업데이트 해놔야겠다.