[3일차] 미니 프로젝트 완성 & 개발일지

 

1. 멤버 페이지 각각의 좋아요 플러스

@app.route("/likes1", methods=["POST"])
def likes_post1():

    likes_count = list(db.like1.find({}, {'_id': False}))
    count = len(likes_count) + 1

    doc = {
        'num': int(count),
    }

    db.like1.insert_one(doc)
    return jsonify({'msg':'좋아요!'})

# 좋아요 수 보여주기(다경)
@app.route("/likes1", methods=["GET"])
def likes_get1():

    likes_count = list(db.like1.find({},{'_id':False}))
    return jsonify({'likes': likes_count})

 

나와 같이 백엔드를 맡으신 팀원분이 작성하신 좋아요 플러스, 조회 기능 코드~!

이 부분까지는 방명록에 자동 게시물 번호 붙여서 db에 보내주는 형식과 다를 게 없었는데

 

내가 새롭게 본 부분은 바로 이 자바스크립트 부분!!! 

        function show_like() {
            $.ajax({
                type: "GET",
                url: "/likes1",
                data: {},
                success: function (response) {
                    let rows = response['likes']
                    for (let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let temp_html= `${num}`
                        $('#like').text(temp_html)

                    }
                }
            });
        }

 

$('#like').text(temp_html) 

요 아이인데

 

나는 $('#like').append(temp_html) 라고 생각했는데,

$('#like').text(temp_html)  작성하신 것을 보고 궁금증이 생겼다.

 

👀 text와 append는 어떤 차이지?

1. append()

선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.

+) 추가로, append 는 기존 데이터에 내용이 추가 (쌓이는것)이라고 한다.

 

-> 그래서 아래로 데이터가 쭉쭉 생기는 게 보기 싫을땐, ajax 앞부분에 empty() 를 붙여주라고 하신거구나!!!

 

 

2. text()

 텍스트를 변경할 요소를 선택해서 .text 내에 변경하고 싶은 텍스트를 작성해줄때 사용한다.

-> 요 아이는 텍스트를 바꾸고 싶을때 쓰는거네

 

 

>> 내일 튜터님한테 물어봐야징~~

append를 사용했더니, 좋아요 수가 거의 무한대 숫자로 나왔는데

text로 하니까 깔끔하게 나왔다, 그 이유가 뭘까?

 

 

 

2. 방명록 등록/삭제

 

방명록 코드는 어제 완성했었지만 다른 멤버분들 개인페이지 html 을 받아서 모두 방명록 등록/삭제 기능을

db에 연결하는 작업을 했다. 

@app.route("/showcomment1", methods=["GET"])
def showcomment1_get():

    # db에서 list로 모든 데이터 내용을 불러와서 all_comment라는 객체에 저장하고
    all_comment = list(db.member1.find({}, {'_id': False}))
    # comments라는 이름으로 response에 담아 index.html에 리턴해준다.
    return jsonify({'comments': all_comment})

#방명록 삭제(다경)
@app.route("/deletecomment1", methods=["POST"])
def deletecomment1_post():

    delete_receive = request.form['delete_give']
    db.member1.delete_one({'membernum': int(delete_receive)})
    return jsonify({'msg': '데이터 삭제가 완료되었습니다'})

위 코드들을 db의 폴더 이름들만 바꾸면서 (개인별로 폴더가 하나씩 생성되어있는 꼴) 데이터를 넣었는데,

 

function show_comment() {

            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/showcomment1",
                data: {},
                success: function (response) {

                   /* db에서 직접 받아오는 건 app.py에서 하고 */
                    let rows = response['comments']

                    /* for문 돌리는건 */
                    for(let i = 0 ; i < rows.length ; i++){

                        let membernum = rows[i]['membernum']
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let deletenum = $('#deletenum')


                        // <p style="display: none">${membernum}</p>
                        /*
                        *   <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button type="button" onclick="delete_comment(${membernum})">삭제</button>
                        * */

                        let html_temp=`
                                    <div class="card" style="width:100%; height:150px;">
                                        <div class="card-body" ">
                                            <blockquote class="blockquote">
                                                <p style="display: none">${membernum}</p>
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button type="button" onclick="delete_comment(${membernum})" style="background-color: #B983FF; border: none">삭제</button>
                                            </blockquote>
                                        </div>
                                    </div>`



                        $('#comment-list').append(html_temp)
                    }


                }
            });
        }

        function delete_comment(membernum){

            $.ajax({
                type: 'POST',
                url: '/deletecomment1',
                data: {'delete_give': membernum },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })

        }

 

 

*** 다시 한번 뽀인트 복습 

1. 애초에 에이작스의 '방명록 조회' 부분에서, 삭제버튼 안에 게시물 번호를 넣어주었다.

2. 삭제 function에서 membernum 을 파라메터로 넣어주었다.

 

---

>> 프로젝트 끝나고 주말에 얘네 연구해봐~~ (11/2)

--> function delete_comment(membernum) 에서 membernum 파라메터를 빼도 상관없는거 아닌가?

애초에 onclick시에 membernum을 넘겨주도록 셋팅해놓긴 했잖아

 

-->저렇게 db 폴더를 각 5개를 생성하고 코드를 5번 반복하지 않고, 한 폴더에 다섯명의 방명록 데이터를 넣을 순 없을까? 

방금 든 생각인데 , 애초에 db에 넣을때 저 membernum을 멤버 고유번호를 붙여서 

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

# 저장
db.member1.insert_one(doc)

db로 넘긴 다음 

db에서 뽑아오는 작업할 때, membernum 이 1인놈만 뽑아와 이렇게 셋팅하면 안되나?

어차피 db에 넣는 작업할 때, 저 3개 (membernum,name,comment)를 배열로 넣은거 아닌가? (세트바리로)

 

--> 깃허브 연동하는거, 리눅스 명령어랑 프로젝트 시 어떤 순으로 수정되가는지 유투브 찾아봐 

수민이가 말해줬던, 브런치 , 마스터 개념이랑

내가 프로젝트 수정할 시, 어떻게 푸쉬하고 마스터에는 언제 반영되는건지 좀 더 깊게 알아봐

 

---

📖 3일차 개발일지

 

같은 백엔드 담당하신 팀원분에게 코드를 받아 (좋아요 추가 / 방명록 조회)

내 코드와 합쳐 백엔드에서 구현하기로 한 기능들을 구현 성공했다!

 

이번에 백을 맡으면서 느낀게, 왜 프론트엔드도 기본적인 백 지식을 갖추고 있어야되는지

한번 더 느꼈던 것 같다.

처음부터 프론트쪽을 짤 때, 백으로 어떻게 넘겨주어야 할지를 생각하면서 짜야한다는 것..

 

R면 R수록 재밌는 개발의 세계.....

 

나는 프론트앤드가 재밌다고 생각했는데,

프론트는 눈앞에 내가 원하는 것들이 펼쳐지는 게 환상적이라면

백엔드는 고생 끝에, 내가 원하는 데이터가 눈앞에 뙇!!! 나타났을때가 환상적인것 같다

 

내가 생각하는 개발의 가장 큰 매력은

내가 애를 쓰면, 결과가 나온다는 거다 (너란 코드 늘 ㅉr릿행, 새로워)

 

 

 

구현해내야하는 코드들을 처음 맞딱뜨릴땐, 괜히 피하고 싶은 마음도 드는데

그 마음을 극복하고 무조건 부딪혀봐야 실력이 느니, 뎀벼라 코드들아!!!!! (천천히 살살 덤벼죵...)