내일배움캠프 AI 5기 TIL 3일차

3일차

오늘은 컨디션도 많이 회복되고 어제보다 열심히 참여했다! 그리고 처음에 백엔드를 희망하였으나 어쩌다보니 프론트만 하게되서 약간은 슬펐지만 오늘 못 해본 비밀번호 구현 같이 해보고 싶다고 요청드려서 같이 구현했다!!! 백엔드는 어렵지만 흥미롭고 너무 재밌다.. 비밀번호 구현을 이렇게 하는 구나~ 싶었고 몰랐던 기능도 많이 알려주셨다. 프론트엔드는 CSS에서 정렬하는 것이 참 어려운 것 같다.. 그치만 완성되면 눈에 들어보니 자랑할 수 있단 점(?) 아무튼 오늘 백엔드 기능은 거의 구현을 완성을 했고 (방명록 CRUD)
프론트엔드는 처음에는 배경부터 시작해서 팀원들을 소개하는 페이지를 열었다 닫았다 할 수 있고, 그 안의 모든 요소를 프론트엔드로 나타내고 싶었지만 시간이 부족했고 절충안으로 피그마에서 각자 소개 하는 페이지를 만들어서 png파일로 만들어서 붙이기로 했다.
내일이면 완성을 할 것 같다! 내 생각은 주어진 시간이 짧다면 그 안에서 할 수 있는 효율적인 방법을 선택하는 게 최선인 것 같다.

---

Today I Learned

01. 방명록 댓글을 Read할 때, temp_html을 append하는 것만 알았는데 prepend로 지정을 해주면 최신 댓글이 위에서 부터 뜨도록 해주는 것을 배웠다.

02. 댓글 삭제 기능을 구현하는 법을 배웠다. 

* 데이터 저장 app.py (num 값 설정하기) 

@app.route('/guestbook_post', methods=['POST'])
def guestbook_post():
    guest_name_receive = request.form['guest_name_give']
    guest_password_receive = request.form['guest_password_give']
    guest_comment_receive = request.form['guest_comment_give']

    num_list = list(db.i5_project.find({},{'_id':False}))

    num = 1

    if num_list:
        num = num_list[-1]['num']+1
    print(num)

    doc = {
        'num': num,
        'guest_name':guest_name_receive,
        'guest_password':guest_password_receive,
        'guest_comment':guest_comment_receive
    }
    db.i5_project.insert_one(doc)
    return jsonify({'msg':'방명록 저장 완료!'})

(1) Method는 Delete를 사용함.
(2) POST로 요청해서 데이터를 입력받아 백엔드에 넘겨줄 때 [이름,비밀번호,코멘트]만 넘겨준다. 
(3) app.py에서 3개의 데이터를 넘겨받고 num_list를 선언해서 db데이터 전체를 불러온다. 
(4) num=1로 설정하고 if문을 작성해서 제일 신규의 num_list의 num값을 1씩 올려준다. (비밀번호 num값으로 구분해서 삭제할 수 있도록 한다.)
(5) num값을 포함해서 4개의 데이터[num, 이름, 비밀번호, 코멘트]를 db에 저장한다.

=> 하지만 이런 코드는 알고보니 좋지 않은 코드기에 이번에만 사용하고 사용하진 않을 것이다!!! 왜냐하면.. 아래 사진에서 

검사도구를 클릭해서 Network를 가보면 어떤 비밀번호를 받아왔는 지 누구나 알 수 있기 때문에 보안에 굉장히 취약한 방법이란 걸 배웠다. 보통은 백엔드에서 비밀번호를 판단해서 o,x식으로 결과를 내주는데 우리가 쓴 코드는 num값을 갖고와서 pw를 프론트엔드에서 대조하는 식으로 구현했기 때문이다. 사실 비밀번호 구현에 대해선 강의를 듣지 않고 구현한 기능이기도 하고 나중에 D.jango 수업을 듣게 되면 다시 비밀번호 구현에 대해서 배운다고 하였으니 그 때 제대로 배워서 정리 해봐야겠다!

* 비밀번호 삭제 app.py 코드

@app.route("/guestbook_del", methods=["DELETE"])
def del_box():
    num_receive = request.form['num_give']

    db.i5_project.delete_one({'num' : int(num_receive)})
    return jsonify({'msg':'삭제 완료!'})

function del_box(num){

    let formData = new FormData();
            formData.append("num_give", num);
            
    fetch('/guestbook_del', { method: "DELETE", body: formData }).then(res => res.json()).then(data => {
        alert(data['msg'])
        window.location.reload()
    })
}

- method : DELETE
- URI : /guestbook_del
- num_give로 받은 값을 num_receive에 넣어준다.

    num_list = list(db.i5_project.find({},{'_id':False}))

    num = 1

    if num_list:
        num = num_list[-1]['num']+1
    print(num)

비밀번호를 구현하려고 쓴 문법인데 사실 이것도 제대로 된 구조는 아니라고 하셨다!
문법은 설명하자면 db에 있는 데이터를 모두 불러와서 리스트형태로 변수에 넣어주고, num_list의 맨마지막 값의 num에 1을 주는 식이다
num_list = [1,2,3,4,5] 라고 가정할 때
5의 값을 불러오려면 보통은 num_list[4]를 적어주곤 하는 데 여기서는 [-1]형태로 부른 것이다 (역순으로 부르는 형태) 
4를 얘기할 땐 num_list[3] 또는 num_list[-2]를 써주면 된다.

 

아직 부족한 것이 많다고 느꼈다. 구현이 된다고 모두 옳은 구조가 아니라는 것을 알았고. 구현이 되는 것이 전부가 아니라 옳고 바른 구조의 코드를 짜야한다는 것! 아직 3일차라 당연히 완벽한 코드를 짤 수는 없겠지만 협업하는 과정도 배웠고 구현이 됐다는 것 자체에는 되게 기뻤다. 노력하자~~