내일배움캠프_미니프로젝트_팀소개SA(Starting Assignments) 3일차

 

오늘은 로컬 환경에서 구축한 팀 소개 페이지에서 어떻게 방명록을 수정하는 지에 대해 알아보자.

$.ajax({
    type: "GET",
    url: "/minsoo/getList",
    data: {},
    success: function (response) {
        let visitors_list = response['result']

            for(let i=0; i<visitors_list.length; i++) {
                let name = visitors_list[i]['name']
                let comment = visitors_list[i]['comment']
                let count = visitors_list[i]['num']

                let temp = `<div class="card" style="margin-bottom: 20px;">
                                <div class="card-body" id="${count}">
                                    <blockquote class="blockquote mb-0" style="float: left;">
                                        <p>${comment}</p>
                                        <footer class="blockquote-footer">${name}</footer>
                                    </blockquote>
                                    <div style="float:right; margin-top:10px;">
                                        <button type="button" class="btn btn-success" onclick="update_msg(${count}, this)">수정</button>
                                        <button type="button" class="btn btn-danger" onclick="delete_msg(${count})">삭제</button>
                                    </div>
                                </div>
                            </div>`
                $('#comment-list').append(temp);
            }
    }
})

해당 코드는 부트스트랩의 도움을 받아 작성한 방명록 카드이다.

몽고DB에서 레코드's 가져와서 for문으로 html 을 뿌리고 있는 상황이다.

여기서 수정 버튼의

onclick="update_msg(${count}, this)

부분, 즉 클릭 이벤트를 발생시킬 시 발동되는 함수는 다음과 같다.

 

 

 

// 수정 버튼 클릭 시.
function update_msg (count, myself) {
    console.log('수정 하기 버튼 클릭!');
    myself.disabled = true;
    myself.innerText = "수정중";
    document.getElementById("holdNum").innerHTML = `${count}`

    const name = document.getElementById(count.toString()).querySelector("footer").innerText;
    const comment = document.getElementById(count.toString()).querySelector("p").innerText;

    $('#name_up').val(name);
    $(`#comment_up`).val(comment);

    $('#openPopup').show();
    $('body').append('<div id="backon"></div>');
}

우선 만약을 위해서 수정 버튼을 disabled = true 속성을 줘서 비활성화 시켰다.

그리고 holdNum 이라는 id 를 가진 div 안에 임시로 count 를 저장해뒀다.

왜 저장해두었는가? count 는 '내가 어떤 방명록을 수정하고 싶은가' 를 유일하게 나타내 줄 수 있는 데이터 레코드의 id 값이다.

헌데 현재로서는 onclick 메소드에 매개변수로 넣어서 update_msg 내부에서 지역 변수로서 밖에 쓸 수가 없다.

만약 프론트엔드 프레임워크인 Vue 나 React 를 사용하고 있다면, 컴포넌트에 값을 저장해서 원할 때 얼마든지 값을 꺼내 사용할 수 있겠지만, html 에서 제이쿼리의 도움만을 받으며 데이터를 관리하기에는 현실적으로 어려움이 따른다.

                         * 물론 이 어려움이란 필자의 기준에서 이다. 얼마든지 더 좋은 방법이 있을 수 있다.

                            허나  필자는 이제 막 코딩에 입문한 초보이므로, 이러한 편협적인 방편밖에 생각할 수가 없는 상황이었다.

따라서 임시로 특정 div 안에 방명록 레코드 고유의 값을 저장해 두는 것이다. 

 

 

 

<div id="openPopup">
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name_up" placeholder="url" style="width:500px;">
            <label for="floatingInput">이름</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment_up"
                style="width: 500px; height: 150px"></textarea>
            <label for="floatingTextarea2">남기는 말</label>
        </div>
        <div class="updateBtn">
            <div id="holdNum"></div>
            <button type="button" class="btn btn-success" id="completeUpdate" onclick="gotoAppForUpdate()">수정 완료</button>
            <button type="button" class="btn btn-danger" id="cancelUpdate" onclick="cancelUpdatePop()">그만 두기</button>
        </div>
    </div>
</div>

위의 코드는 '수정' 버튼을 눌렀을 시 display가 활성화되는 모달창이다.

해당 모달창에서는 '수정 완료' 버튼과 '그만 두기' 버튼을 제공하고 있으며, 각각의 버튼은 onclick 메소드를 지니고 있다.

 

 

 

 

 

 

 

const gotoAppForUpdate = () => {
    console.log('수정 완료 버튼 클릭');
    const count = document.getElementById("holdNum").innerHTML;
    const name_up = $('#name_up').val();
    const comment_up = $(`#comment_up`).val();

    $.ajax({
        type: "POST",
        url: "/minsoo/update",
        data: {num_give: count, name_give: name_up, comment_give: comment_up},
        success: function (response) {
            alert(response["msg"]);
            document.getElementById(count.toString()).querySelector("footer").innerText = $('#name_up').val();
            document.getElementById(count.toString()).querySelector("p").innerText = $(`#comment_up`).val();

            const btn = document.getElementById(count).querySelector("div > button:first-child")
            btn.disabled = false;
            btn.innerText = "수정";
            $('#openPopup').hide();
            $('#backon').remove();
        }
    });
}

위의 함수는 수정 완료 버튼을 클릭할 시 동작하는 함수이다.

우선 'holdNum' 이라는 id 값을 가진 div에 미리 저장해 두었던 num 값을 가져온다.

왜? 몽고DB 에서 내가 수정하길 원하는 레코드를 찾아야 하기 때문이다.

num 과 함께 수정된 name, comment 값들을 들고 ajax 통신으로 서버에 송신한다.

그 뒤 무사히 response 를 받았다면, 새로고침을 하지 않아도 클라이언트의 화면에서 방명록의 값이 수정된 모습을 보여줘야 한다.

그 뒤 비활성화 해두었던 '수정' 버튼을 다시 활성화 해주고, 모달창에 display:none 을 줘서 원래의 상태로 돌아간다.

 

 

 

 

# 방명록 수정 요청을 처리하는 라우트. 완성본 기준으로는 사용되지 않을 예정.
@app.route("/minsoo/update", methods=["POST"])
def intro_update():
    num_receive = request.form['num_give']
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    db.minsoo.update_one({'num': float(num_receive)}, {'$set': {'name': name_receive, 'comment': comment_receive}})

    return jsonify({'msg': '방명록 수정 완료'})

참고로 app.py, 즉 백엔드에서는 넘어 온 값들을 위와 같이 update 처리한다.

헌데 자세히 보면 num, 즉 필자가 임의로 레코드에 부여한 값(일종의 id값처럼 취급하기 위한) 을 float 으로 형 변환해주고 있다.

 

 

 

count = random.uniform(1, 1000)

doc = {
    'num': count,
    'name': name_receive,
    'comment': comment_receive
}

db.minsoo.insert_one(doc);

왜? 처음 id값을 넘버링 해줄 때 실수의 형태로 넘버링 해줬기 때문이다.

헌데 이게 프론트엔드에서 백엔드로 ajax 통신을 통해 넘어오는 과정에서 JSON 형태로 바뀌어버렸기에, 다시 float 로

파싱을 해준 것이다.