스파르타 웹개발종합반 4주차

오늘은 굉장히 멘붕온 날이였다.

​

실습과정에서 분명히 강의랑 똑같은 코드를 작성했음에도, 계속해서 오류가 나는 바람에 몇 시간동안 진도를 나가지 못했다.

거의 오류가 나는 이유를 찾아내느라 하루를 다 보낸 것 같다.

​

그렇게 겨우겨우 실습을 마무리하고, 집으로 돌아와서 다시 코드를 작성해보니 비슷한 실수를 또 한다.

​

---

 

POST는 클라이언트(ajax)에서 서버(flask)로 데이터를 보내는 방법이다.

@app.route("/homework", methods=["POST"])

def homework_post():

name_receive = request.form['name_give']

comment_receive = request.form['comment_give']

doc = {

'name': name_receive,

'comment': comment_receive

}

​

db.gd.insert_one(doc)

​

return jsonify({'msg':'방문해주셔서 감사합니다.'})

​

 

위에 굵은 글씨체를 말로써 요소 하나하나 설명할 수 있어야 한다. 복붙하다보니, 막상 오류가 발생하면 해결하지 못한다. 그저 틀린그림찾기만 하고 있다.

name_receive = request.form['name_give']

-'name_give'라는 종류의 정보를 요청한다. 그리고 그것을 'name_receive'라고 칭한다.

​

doc = {

'name': name_receive,

'comment': comment_receive

}

-document에 'name_receive'를 'name'이라하고, 'comment_receive'를 'comment'라고 칭한다.

​

db.gd.insert_one(doc)

-이 doc데이터를 gd라는 파일에 넣는다.

​

---

​

GET은 서버(flask)에서 클라이언트(ajax)로 데이터를 가져오는 방법이다.

​

def homework_get():

comment_list = list(db.gd.find({}, {'_id': False}))

return jsonify({'comments': comment_list})

​

이번에는 GET방식에서 하나하나 말로 설명해보자.

​

comment_list = list(db.gd.find({}, {'_id': False}))

-comment_list는 gd파일 안의 데이터베이스에 들어있는 정보를 끄집어낸 것이다. {'_id': False} => id값은 나타내지말아라.

​

 

---

 

파이썬파일말고, html파일을 설명해보자.

​

let name = $('#name').val()

let comment = $('#comment').val()

let name = $('#name').val()

let comment = $('#comment').val()

​

$.ajax({

type: 'POST',

url: '/homework',

data: {'name_give':name, 'comment_give':comment},

success: function (response) {

alert(response['msg'])

window.location.reload()

}

})

}

​

 

let name = $('#name').val()

-name은 #을 통해서 불러온 id값 name의 값을 가져온 것이다. ( .val() )

​

data: {'name_give':name, 'comment_give':comment},

 

-name_give는 위의 name이다.

​

따라서, name_give는 id값 name으로 설정된 값을 가져온 것이다.

​

​

​

let rows = (response)['comments']

for (let i = 0; i < rows.length; i++){

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

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

​

let temp_html = `<div class="card">

<div class="card-body">

<blockquote class="blockquote mb-0">

<p>${comment}</p>

<footer class="blockquote-footer">${name}</footer>

</blockquote>

</div>

</div>`

​

$('#comment-list').append(temp_html)

​

 

let rows = (response)['comments']

-rows는 응답한 값에서 comments에 해당하는 값만을 가져온 것들

​

for (let i = 0; i < rows.length; i++){

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

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

-반복문인데, 반복되는 길이가 rows의 길이보다 짧고, 0부터 계속해서 증가한다.

name은 rows의 i번째 name값이다.

comment는 rows의 i번째 comment값이다.

let temp_html = `<div class="card">

<div class="card-body">

<blockquote class="blockquote mb-0">

<p>${comment}</p>

<footer class="blockquote-footer">${name}</footer>

</blockquote>

</div>

</div>`

​

$('#comment-list').append(temp_html)

-temp_html을 만들어주고, comment-list라는 id값에 실행시켜준다.

​

---

​

​

​

배운지 얼마 안되어서 그런지 아직 정확한 매커니즘을 파악하지 못한 것 같다.

그래서 오늘도 질문게시판에서만 거의 시간을 보낸 것 같다. 굉장히 단순한 질문들이였다. (mongodb의 url주소를 물어보는 등)

하지만 나 스스로는 해결하기에 시간이 오래걸렸다.

​

이제 내일이면 웹개발 5주차 마지막강의이다.

내일은 무사히 크게 시간이 지체되지 않았으면 좋겠다. 빨리 2회독 돌리고, 파이썬이나 자바스크립트의 문법을 계속해서 돌려봐야겠다.