미니 프로젝트 1 : 우리 조를 소개하기 (3)

어제 서버구동까지 모두 마치는 데 성공했다!

이 서버가 언제까지 갈 지는 모르겠지만 우선 올려야지

VIVE ENTERTAINMENT (eba-kuyh3pir.ap-northeast-2.elasticbeanstalk.com)

VIVE ENTERTAINMENT

서버는 대충 이렇고, 이거에 대해서 오늘은 소개해보는 시간을 가지기로 했다.

발표는 다른 분이 맡으시기로 해서 좀 더 편하게 쓸 수 있기도 한다.

 

큰 화면은 이런 구성으로 되어있다.

우리 팀의 컨셉은 연예인이기 때문에 엔터 회사 홈페이지처럼 구현하기로 했다.

 

carousel bootstrap을 만드려고 했지만, 다들 그것을 구현하는 법을 찾아내기 어려워서 고민을 했다.

하지만 튜터님이 슬랙에 올린 것처럼 우리가 가장 중점적으로 봐야 할 것은 파이썬이랑 자바스크립트의 연결이기 때문에

아쉽지만, 다음에 그 기능을 구현해보기로 했다.

위에 있는 저 사진을 눌러보면 모달 팝업이 나오는데, 저 오둥이 사진을 클릭해보았다.

그러면 다음과 같은 팝업이 나온다! 혼자 캐릭터가 아닌 오둥이를 써서 너무 튀는 것 같지만.. 일단 넘어간다.

이 쪽에 있는 것은 프론트이니까 기능적인 구현은 없고, 그냥 엔터에서 구성한 아이디어들을 모방해서 써놓은 것 뿐이다.

다만 모달 팝업을 만드는 것은 앞으로도 잘 써먹을 수 있을 것 같아서 만드신 조장님한테 여쭤봤지만, 역시 구글링이 답인 것 같다. 영어 해석이 느리니까 뭐가 뭔지 금방금방 알아내야 하는데 쉽지 않다ㅠ

 

어제 사실 댓글에 대해서는 어느 정도 언급을 했지만, 우리는 삭제 버튼을 눌러서 댓글창 하나를 삭제시킬 때 다른 댓글창도 같은 코드로 구성되어 있다면 아주 망하는 그림이 나올 것 같았다.

그래서 댓글 별로 넘버 값을 투입하기로 했다.

function close_popup() {
            $("#popup").fadeOut(200);
            show_comment();
        }

        $(document).ready(function () {
            show_comment()
            show_like();
            close_box();
        });

        function save_comment() {

            let name = $('#name').val()
            let comment = $('#comment').val()
            let pw = $('#passward').val()
            let formData = new FormData();

            formData.append("name_give", name);
            formData.append("comment_give", comment);
            formData.append("pw_give", pw);

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

시작할 때 show_comment, show_like, close_box 기능이 구현되게끔 나타내는 것을 default 값으로 하고, name, comment, pw 값을 서버로 fetch를 한다.

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    count_list = db.vive02.find_one({'name': 'comment'})
    count = count_list['num'] + 1
    db.vive02.update_one({'name': 'comment'}, {'$inc': {'num': 1}})

    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    pw_receive = request.form['pw_give']

    if (name_receive == "") and (comment_receive == "") and (pw_receive == ""):
        return jsonify({'msg': '저장 실패!'})
    else:
        doc = {
            'name': name_receive,
            'comment': comment_receive,
            'pw': pw_receive,
            'num': count
        }

    hashed_password = bcrypt.hashpw(doc["pw"].encode('UTF-8'), bcrypt.gensalt())
    decoded_password = hashed_password.decode("utf-8")

    doc["pw"] = decoded_password

    db.vive01.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

그러면 위에서 받은 3개의 값을 doc 칸에 넣은 후 그 doc를 db에 넣을 예정인데 난데없이 'num' 값이 튀어나왔다?!

이 db 값들이 꼬이지 않게 우리는 'vive02' db = (count_list)를 새로 생성하고 거기에 count값을 넣었다. 여기에 숫자 값을 넣고 우리는 ($inc) increase 함수를 넣어 숫자를 1에서부터 점진적으로 상승시키는 기능을 넣었다.

그런 다음 나머지 데이터들은 모두 'vive01'db에 넣고 저장했다.

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.vive01.find({}, {'_id': False, 'pw': False}))
    return jsonify({'result': all_comments})

그리고 나서 웹에 보여주는 것은 01db만 보여주는 것이다.

뭔가 이렇게 정리해서 쓰고 나니, 총 댓글을 보여주는 기능을 넣어도 괜찮았을 것 같긴 한데,

그럼 삭제한 댓글까지 포함되어서 나오는 오류들을 정리하고 하다보면 발표시간을 아득히 넘었을 것 같으니, 나중에 혼자 한 번 만들어서 꼭 여기에 올려봐야겠다.

삭제기능은 어제 보여줬기 때문에 패스하고, 다음은 좋아요 기능이다.

이 기능은 한 사람이 여러 번 좋아요를 누를 수 있게 해놓았다. 카카오톡에서 커버사진에 좋아요 남길 수 있는 것과 같은 기능이라고 생각해주시면 될 것 같다.

그렇다면 이 좋아요는 어떻게 들어가는 걸까? 댓글과 같이 post 기능 넣으면 된다.

//좋아요
        $(function () {
            $(document).one('click', '.like-review', function (e) {
                $(this).html('<i class="fa fa-heart" aria-hidden="true"></i> You liked this');
                $(this).children('.fa-heart').addClass('animate-like');
            });
        });


        function save_like() {
            let formData = new FormData();
            formData.append("like_give", 1);

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

사전에 기능을 하나 셋팅했는데, like 버튼을 누를 시 you liked this로 버튼 내 html 글자가 전환되는 효과를 넣어

좋아요를 이미 눌렀다는 것을 표현한다.

그 다음에는 like_give 형식으로 백엔드로 넘긴다. 그럼 백엔드에서 받는다.

@app.route("/like", methods=["POST"])
def like_post():
    like_receive = request.form['like_give']
    print(like_receive)

    doc1 = {
        'name': 'not_vive',
        'like': 1
    }

    db.vive02.update_one({'name': 'vive'}, {'$inc': {'like': 1}})

    return jsonify({'msg': '좋아요 완료!'})


@app.route("/like", methods=["GET"])
def like_get():
    likes = list(db.vive02.find({}, {'_id': False}))
    return jsonify({'likecnt': likes})

백엔드에서 받으면, like give 형식을 like_receive로 전환한 다음, 이 좋아요의 개수를 '$inc' 함수에 넣어 1을 더하게 한다.

그러면서 좋아요의 개수가 하나가 더 늘어나게 된다. 그리고 그 값을 get으로 가져오면

사진과 같이 좋아요의 수가 늘어난다. 그 사이 두 분이 더 눌러주셨다!

이렇게 하면 이 프로젝트에서의 백엔드는 모두 작성 완료되었다.

---

같은 팀의 다른 팀원 분이 발표하시고, 튜터님께 조언을 받았다.

1. 데이터 키를 깃허브에 올리지 말 것. 얼마든지 해킹을 받을 수 있기 때문에 강제 과금 등 사기 맞고 싶지 않으면 조심해야 한다.

2. git ignore 기능이 있기 때문에 올리지 말아야 할 것들, 필요없는 것들에 이 기능을 쓰자.

 

그리고 다른 팀에 조언한 것인데 내가 알아두면 좋은 것들

3. id, name 등의 고유값이 겹치면 문제가 생기므로 고유값 이름은 반드시 다르게 할 것

4. 패스워드 비교작업을 프론트에서 하면 f12 누를 때 다 보인다. 그러니 패스워드 관련 작업은 파이썬에서 행하자!