토~일 미니프로젝트

youngsung·2023년 2월 11일
0

project

목록 보기
1/1

이번 미니프로젝트는 정말 나의 치부를 밑바닥 까지 본 프로젝트라 할수있다. 처음 다같이모여 회의할때는 "이정도는 구현할수있겠지" "그냥 응용인데"라며 내 주제도 모르고 건방을 떨었다. 나한테 주어진 업무는 게시글 작성과, 해당 게시글에대한 댓글 기능 구현이었다.
오늘 새롭게 알게된 내용은

		$.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)
        }

백틱 기호를 배우긴했지만 아직 개념정리가 확실하게 자립되지는 않았다.. 좀더 공부를 많이 해봐야할듯 싶다.

댓글 기능 구현을 거의 완성을 하였지만 댓글을 쓰면 첨부가 안된채로 끝났다.. 호출값 잘 받아왔는데 뭐가 문제지.. 찾아서 다시 새로 업데이트 해놔야겠다.

profile
To Infinity and Beyond

0개의 댓글