[내일배움캠프] AI트랙 5기 - 3일차 : 팀 소개 페이지 만들기

09:00 모여라 친구들

전날 밤에 조금 꾸미고 push해놓고 잤다.

팀원분들이 내 블로그 디자인을 마음에 들어 해 주셔서 비슷한 컨셉으로 했다. 이 땐 몰랐지... 무슨 일이 벌어질지...

다 같이 모여서 상세페이지도 좀 손보고, 같이 의견 나누면서 비밀번호와 삭제 기능 이야기도 했다. 

될지 안 될지 모르니 일단 해 보자는 게 결론이었다.

오전 개인 코딩 시간

비밀번호 & 삭제기능 구현

프론트 담당해주신 분들이 마저 꾸미는 동안 나는 비밀번호&삭제 기능을 구상했다.

어차피 방명록 리스트 자체가 자바스크립트 함수 안에서 append 되기 때문에 함수에서 데이터를 받아오면 삭제는 쉽다. 

 

1번 방법

-> Read의 경우처럼 데이터베이스 값과 함수 속 데이터를 대조하는 방식

처음엔 간단하게 하고 싶어서 이 방법을 쓰려고 했으나 문제는 중복

받아오는 데이터가 고유값이 아니기 때문에, 이름/내용/닉네임(+비밀번호) 모든 속성을 다 비교한다 하더라도 중복 삭제 가능성 大

이건 비밀번호가 없더라도 생기는 문제이다.그래서 고유값인 DB 속 id 값을 쓰고 싶었다.

사실 이 문제는 이전 미니과제 할 때도 엄청 고민했는데, 결국 해결하지 못했었다. id값이 string으로 저장되는 게 아니라서 

파이썬에서 함수를 한 번 더 써서 string으로 바꿔주고 어쩌고... 복잡한 건 둘째치고 구현이 안 돼서 포기했었다.

2번 방법

그런데 팀원분중 한 분이 이전 미니과제에서 그 기능을 구현했었다고 하시면서 아이디어를 주셨다. 

데이터가 저장되는 순서대로 숫자를 넣어서 고유값을 만들어줬다는 거다.

맨 마지막 값에서 +1 하기 때문에 중복될 일이 전혀 없다. 

 

구현하기

우선 DB에 저장하는 python작성 함수에 고유값 만드는 구문을 추가했다.

# app.py
#index값 생성
    idx_list = list(db.IE9.find({},{'_id':False}))
    idx = 1
    if idx_list:
        idx = idx_list[-1]['idx']+1
    print(type (idx))

그런데 이 함수의 문제가 뭐냐면, DB 맨 마지막 데이터에 미리 생성된 idx 값이 있어야 그 뒤부터 만들어진다는 거다.

DB에 가서 직접 'idx' : '1' 을 추가하고 실행했더니 작동하지 않는다. type()로 출력해보니 1이지만 str 형식으로 저장되어있다.

그래서 if문을 제거하고 idx=1 인 상태로 함수를 실행시킨 후에 다시 작성했다. 

# app.py
# ===================== 방명록 작성 ===================== 
@app.route("/writegb", methods=["POST"])
def guestbook_post():
    nickname_receive = request.form['nickname_give']
    comment_receive = request.form['comment_give']
    member_name_receive = request.form['member_name_give']
    pw_receive = request.form['pwd_give']

    #index값 생성
    idx_list = list(db.IE9.find({},{'_id':False}))
    idx = 1
    if idx_list:
        idx = idx_list[-1]['idx']+1
    print(type (idx))

    doc = {
        'idx' : idx,
        'nickname':nickname_receive,
        'comment' :comment_receive,
        'member_name' :member_name_receive,
        'pw' : pw_receive
     }
    db.IE9.insert_one(doc)

    return jsonify({'msg': '저장완료!'})

그렇게 다시 완성된 방명록 작성 함수! 방명록 append 하는 자바스크립트에 idx변수도 넣어주고,

idx 값도 비밀번호도 잘 들어오는 걸 확인했다.

이제 삭제하기를 눌렀을 때,

1. 받아온 idx 값과 DB 속 idx 값을 먼저 대조하고

2. 그 데이터 속 비밀번호와 입력받은 비밀번호가 같은지 대조한다.

// index.js

// idx값 찾기
function select_del(idx, index) {
    let pwd = $("#pw" + index).val();
    console.log("idx : " + idx)
    //console.log(result)
    $.ajax({
        type: "GET",
        url: "/guestbook",
        data: {
            'idx_give': idx
        },
        success: function (response) {
            idx_result = response.result

            for (let i = 0; i < idx_result.length; i++) {
                let gbook = idx_result[i];
                let gbook_idx = gbook.idx
                if (idx == gbook_idx) {
                    let gbook_password = gbook.pw
                    if (pwd == gbook_password) {
                        delete_book(idx) // 삭제 진행
                    } else {
                        alert('비밀번호를 확인해주세요')
                    }
                }
            };
        }
    });
};

// 삭제하기
function delete_book(idx) {
    $.ajax({
        type: "DELETE",
        url: "/delete",
        data: { 'idx_give': idx },
        success: function (response) {
            alert(response["msg"])
            console.log(response)
            window.location.reload()
        }
    });
};

# app.py

# ===================== 방명록 삭제 ===================== 
@app.route("/delete",methods=["DELETE"]) 
def delete_card():
    idx_receive = request.form['idx_give']
    db.IE9.delete_one({'idx' : int(idx_receive)})
    return jsonify({'msg': '삭제되었습니다.'})

14:00 ~

비밀번호&삭제 하니까 밥 먹을 시간이 좀 지나버렸다. 

얼른 점심을 먹고 다시 와서 더 수정할 게 없나 보는데 방명록 작성 폼에 유효성 검사가 안 된 게 생각났다.

팀원분들께 말씀드렸더니 한 분께서 해보신다고 하셔서 CSS를 또 조금 손봤다.

// index.js
//  =================== 개인 방명록 작성 =================== 
function save_comment(name) {
    let nickname = $('#nickname').val() //문자열
    let comment = $('#comment').val()
    let pw = $('#pwds').val()

    let formData = new FormData();
    formData.append("nickname_give", nickname);
    formData.append("comment_give", comment);
    formData.append("member_name_give", name);
    formData.append("pwd_give", pw);
    // 유효성 검사
    if(nickname.trim() == ''){
        alert('닉네임을 입력해주세요.')
    }else if(comment.trim() == ''){
        alert('내용을 입력해주세요.')
    }else if(pw.trim() == ''){
        alert('비밀번호를 입력해주세요.')
    }else{
        fetch('/writegb', { method: "POST", body: formData,})
        .then((res) => res.json())
        .then((data) => {
            alert(data["msg"]);
            window.location.reload()
        });
    }
}

엄청 빨리 하셨다. 이거 봐 짱고수라니까? 

 

이렇게 작성부분까지 최종적으로 완성되었고,

멤버들 프로필 사진과 상세 페이지에 SNS qr코드도 넣고 완성시켰다!

 

나머지는 계속 꾸미고 휴식도 하고... 잡담도 하고 ㅎ

 

아니 근데 어쩌다가 내 블로그가 다른 여러 조에 퍼져버렸다.

아니! 그냥! 디자인 의논하다가 팀원분들께 보여드리고!

멤버카드랑 S.A.에 블로그 링크 건 것 밖에 없는데!

왜 가는 곳 마다 "혹시 그 블로그..." ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ진짜 

이 누추한 곳에 관심은 과분합니다

???

 

 

조회수 채워주셔서 감사합니다 💕

 

진짜 너무 감사하긴 한데 너무 부끄럽고 창피해요 말씀하실 때 마다 쥐구멍 찾는 중

20:00 회의

오늘은 회의라기 보단 최종 점검을 했다.

아무래도 모두가 모든 코드를 같이 짠 게 아니라서, 처음부터 끝까지 모든 팀원이 모든 코드를 이해할 수 있게 설명회(?) 를 했다.

이해 안 되는 부분은 설명해주고, 배워가고 

진짜 의욕 넘치는 거 넘 좋다. 🥰

내일 할 일

찐찐찐찐 완성 + 발표준비

 

인데 왜 방명록 수정도 해 보고 싶지..?

늦어도 목요일 오전까지 완성시키자고 한 건 나였던 것 같은데....