수정하기

CRUD의 꽃 수정하기! 성공해서 기쁘다, 추가로 유효성 검사와, id값 데이터를 변형해서 담아내는 방식을 사용 했는데, 공부가 많이 돼서 남겨본다.

app.py 코드

@app.route("/post/update", methods=["PUT"])
def update_remember():
    img_receive = request.form['img_give']
    name_receive = request.form['name_give']
    mbti_receive = request.form['mbti_give']
    blog_receive = request.form['blog_give']
    advantages_receive = request.form['advantages_give']
    collaboration_receive = request.form['collaboration_give']
    id_receive = request.form['_id_give']

    
    doc = {
       'img' : img_receive,
        'name' : name_receive,
        'mbti' : mbti_receive,
        'blog' : blog_receive,
        'advantages' : advantages_receive,
        'collaboration' : collaboration_receive,
    }

    db.remember.update_one({"_id": ObjectId(id_receive)}, {"$set" : doc})

    return jsonify({'msg':'게시물 수정완료'})

수정하기 method는 put , post 왜 둘다 쓰일까?...

js 코드

//  edit Modal 데이터 input에 불러오기
            function info_load() {

                let id = $('#detail').data('num');
                let all_id = rows.map(rows => rows['_id']);
                let indexNum = $.inArray(id, all_id);
                let this_data = rows[indexNum]

                let $image = this_data['img']
                let $name = this_data['name'];
                let $mbti = this_data['mbti'];
                let $blog = this_data['blog'];
                let $advantages = this_data['advantages'];
                let $collaboration = this_data['collaboration'];

                $('.edit-overlay #edit-img').val($image);
                $('.edit-overlay #edit-aname').val($name);
                $('.edit-overlay #edit-mbti').val($mbti);
                $('.edit-overlay #edit-blog').val($blog);
                $('.edit-overlay #update-advantages').text($advantages);
                $('.edit-overlay #update-collaboration').text($collaboration);


            }

            // edit Modal 유효성 검사
            $('.edit-submit').click(check_edit)

            const checkImg = $('#overlay #edit-img');
            const checkName = $('#overlay #edit-aname');
            const checkMbti = $('#overlay #edit-mbti');
            const checkBlog = $('#overlay #edit-blog');
            const checkAdvantages = $('#overlay #update-advantages');
            const checkCollaboration = $('#overlay #update-collaboration');
            const checkPw = $('#overlay #edit-pw');

            function check_edit() {

                if (!checkImg.val()) {      //  frn의 product의 value값이 없을 때 = input에 입력한 값이 없을 때
                    alert('이미지url을 입력해 주세요');
                    checkImg.focus();
                    return false;   //  경고창을 확인한 후 페이지가 넘어가지 않고 그대로 유지하기 위함, method빼면 못넘어감.
                } else if (!checkName.val()) {
                    alert('이름을 입력해 주세요');
                    checkName.focus();
                    return false;
                } else if (!checkMbti.val()) {
                    alert('MBTI를 입력해 주세요');
                    checkMbti.focus();
                    return false;
                } else if (!checkBlog.val()) {
                    alert('블로그 주소를 입력해 주세요');
                    checkBlog.focus();
                    return false;
                } else if (!checkAdvantages.val()) {
                    alert('자신의 장점을 입력해 주세요');
                    checkAdvantages.focus();
                    return false;
                } else if (!checkCollaboration.val()) {
                    alert('협력 스타일을 입력해 주세요');
                    checkCollaboration.focus();
                    return false;
                } else if (!checkPw.val()) {
                    alert('비밀번호를 입력해 주세요');
                    checkPw.focus();
                    return false;
                } else {
                    pw_check();
                }
            }

            function pw_check() {
                let id = $('#detail').data('num');
                let all_id = rows.map(rows => rows['_id']);
                let indexNum = $.inArray(id, all_id);
                let this_data = rows[indexNum]

                let origin_pw = this_data['pw']
                let user_pw = checkPw.val()

                if (origin_pw === user_pw) {
                    update_info()
                } else {
                    alert("비밀번호를 확인해주세요!")
                    checkPw.focus();
                    return false
                }
            }


            function update_info() {
                let $id = $('#detail').data('num');
                let $img = $('.edit-overlay #edit-img').val();
                let $name = $('.edit-overlay #edit-aname').val();
                let $mbti = $('.edit-overlay #edit-mbti').val();
                let $blog = $('.edit-overlay #edit-blog').val();
                let $advantages = $('.edit-overlay #update-advantages').text();
                let $collaboration = $('.edit-overlay #update-collaboration').text();

                let formData = new FormData();
                formData.append("img_give", $img);
                formData.append("name_give", $name);
                formData.append("mbti_give", $mbti);
                formData.append("blog_give", $blog);
                formData.append("advantages_give", $advantages);
                formData.append("collaboration_give", $collaboration);
                formData.append("_id_give", $id);


                fetch('/post/update', { method: "PUT", body: formData }).then((res) => res.json()).then((data) => {
                    alert(data['msg']);
                    window.location.reload();
                });
            }

            // edit-submit button
            $('.detail-flex .edit').click(function () {
                let detail = $('.detail-overlay');
                let edit = $('.edit-overlay');
                let _id = $('.detail-overlay').data('id');

                $('.edit-overlay').attr('data-num', _id);

                detail.css('display', 'none');
                edit.css('display', 'block');

                info_load();
            });

            // edit-cancel button
            $('.edit-cancel').click(function () {
                let $modal = $('.edit-overlay');

                $modal.css({
                    'display': 'none'
                });
            });

            $('.del').on('click', delete_list);

            function delete_list() {
                let id = $('#detail').data('num');
                let all_id = rows.map(rows => rows['_id']);
                let indexNum = $.inArray(id, all_id);
                let this_data = rows[indexNum]

                let pw = this_data['pw'];
                let u_pw = prompt('비밀번호를 입렵해주세요!')


                let formData = new FormData();
                formData.append("_id_give", id);
                if (pw === u_pw) {
                    fetch('/post/delete', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {
                        alert(data['msg']);

                        window.location.reload();
                    });
                } else {
                    alert("비밀번호를 확인하세요");
                    $('#edit-pw').focus()
                    return false;
                }
            }

edit Modal 데이터에 input 값들을 id 값을 가공시켜 가져 왔다!
왜 가공 시켰지?

삭제하기

app.py 코드

@app.route("/post/delete", methods=["DELETE"])
def delete_post():
    id_receive = request.form['_id_give']

    db.remember.delete_one({"_id": ObjectId(id_receive)})

    return jsonify({'msg': '게시물 삭제완료'})   

delete는 CRUD중에 가장 쉬웠다!

js 코드

$('.del').on('click', delete_list);

            function delete_list() {
                let id = $('#detail').data('num');
                let all_id = rows.map(rows => rows['_id']);
                let indexNum = $.inArray(id, all_id);
                let this_data = rows[indexNum]

                let pw = this_data['pw'];
                let u_pw = prompt('비밀번호를 입렵해주세요!')


                let formData = new FormData();
                formData.append("_id_give", id);
                if (pw === u_pw) {
                    fetch('/post/delete', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {
                        alert(data['msg']);

                        window.location.reload();
                    });
                } else {
                    alert("비밀번호를 확인하세요");
                    $('#edit-pw').focus()
                    return false;
                }
            }

응 쉽지않아, 패스워드값 맞춰줘야 삭제 가능해 ㅠ

Jquery를 이용해보고 느낀점

요즘 핫한 회사들은 제이쿼리를 안쓰는 추세라고 한다, 2008년 쯤엔 제이쿼리가 그렇게나 각광받았다는데, 지금은 점차 안쓰는 추세란다.
그러나! 써보고 느낀점은 ,코드가 간결하고 가독성이 좋다는 점은 확실히 느껴졌다. 이번에 공부하면서 한번 쯤 경험해 본것으로 매우 많이 배웠고 코드 로직이 머리속에 잘 들어왔다!

이제 곧 리액트를 바닐라 자바스크립트를 배울텐데 , 쌩 자바를 탄탄하게 학습해야 취업에 매우 유리할 듯 하다, 여러 프레임 워크들이 (타입스크립트, 넥스트js 등등...) 즐비하며, 빠르게 변하는 프레임 워크를 쫓아 가는것도 좋아 보이지만, 기본기 ! 바닐라 자바는 꼭 꼭! 씹어서 학습해야 겠다 ^_ㅠ

자바스크립트 딥다이브 저거... 먼지만 쌓이고 있었는...데;;;;; 각성하고 회독 늘려보즈아!