Flask

Flask

이제 Flask라는 서버를 이용해서 전에 작성했던 서버와 클라이언트 부분에서 서버 부분도 경험해보자. 일단 앞서서 현재까지 구성한 것은 웹 스크래핑을 통한 벅스 Top100 음원 데이터와 기본적인 HTML, CSS이다.

지금부터 할 것은 input 값을 POST해서 서버에 저장하고 이를 GET에서 불러오는 과정을 Flask를 이용해 볼 것이다. 다룰 부분에 대해서는 먼저 이미지로 보여주겠다.

앞서 Flask를 사용하기 전에 역시나 패키지가 필요하다.

Flask 설치하기

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'   

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

이런 명령어가 나오면 성공이다. 이 명령어에 대해 잠깐 알아보자. Do not use it in a production deployment는 Flask가 한 번에 하나씩밖에 처리못하기 때문에 실서비스에서 사용하지말라는 뜻이다. 즉, 에러가 아닌 정상적으로 권장하는 하나의 메시지라고 생각하면 될 것 같다. 위의 코드를 하나씩 살펴보자.

@app.route('/')
def home():
   return render_template('index_html')

가장 윗줄의 ('/')의 의미를 알아야한다. app.py를 실행했을 때 가장 먼저 실행되는 부분이라고 생각하면 된다. 따라서 index.html 파일을 가장 먼저 실행하게 되는 것이다. 일단 내가 기록하는 부분의 프론트 부분을 따로 작성하지 않았는데 이 부분은 혼자의 힘으로도 가능했다. 구현했다고 가정하고 서버 부분을 담아보자. 일단 프론트 부분의 코드를 보자.

function bugs_input() {
    let title = $('#bugs_title').val()
    let comment = $('#bugs_comment').val()
    let nick = $('#bugs_nickname').val()
        $.ajax({
            type: 'POST',
            url: '/second',
            data: {title_give: title, comment_give: comment, nick_give: nick},
                success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        });
    }

가장 윗줄부터 천천히 보자.

let title = $('#bugs_title').val()
let comment = $('#bugs_comment').val()
let nick = $('#bugs_nickname').val()

우리가 했던 jQuery로 사용한 선언이다. input 박스의 id에서 값을 가져와서 title, comment, nick으로 저장한다. 여기서 기억이 나지 않는다면 jQuery를 다시 봐야할 것 같다.

$.ajax({
    type: 'POST',
    url: '/second',
    data: {title_give: title, comment_give: comment, nick_give: nick},
        success: function (response) {
        alert(response['msg'])
    }
});

input 박스에서 받은 값을 이제 서버로 보내기 위해 Ajax를 사용한다. 정보를 서버에 보내는 것이기 때문에 POST 형식이고 url은 임의로 지정하였다. 이제 서버로 보내는 데이터를 쓰면 되는데 title_give로 되어 있는 것은 서버 부분에서 다뤄보겠다. 서버에 송신이 완료되고 서버가 해당 데이터를 처리 후 완료되면 msg를 보내는데 이를 alert한다는 의미이다. 이제 서버로 가보자.

잠깐 response는 뭐임?

이 부분도 궁금해서 조사해봤는데 개발자들도 약속된 것에 의문을 두지 않는다고 한다. 밑 서버 코드를 보면 jsonify 라고 나와 있는데 이 값을 response로 보낸다고 생각하자.

@app.route('/second', methods=['POST'])
def bugs_post():
    title_receive = request.form['title_give']
    comment_receive = request.form['comment_give']
    nick_receive = request.form['nick_give']
    info = {
        'title': title_receive,
        'comment': comment_receive,
        'nick': nick_receive
    }
    db.bugs_record.insert_one(info)
    return jsonify({'msg': '기록해주셔서 감사합니다.'})

첫줄부터 천천히 확인하자.

title_receive = request.form['title_give']
comment_receive = request.form['comment_give']
nick_receive = request.form['nick_give']

처음에 프론트 부분에서 input값을 받았던 데이터를 왜 title_give로 했는지 이해할 수 있을 것이다. 서버에서 title_give라고 클라이언트에 요청했고 우리는 이에 맞게 title_give라고 하였다. 이를 이제 서버는 title_recieve라고 초기화한다.

info = {
    'title': title_receive,
    'comment': comment_receive,
    'nick': nick_receive
}
db.bugs_record.insert_one(info)

이 부분은 mongDB에 저장하는 과정이니 넘어가자.

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

DB 저장이 완료되면 return jsonify를 통해 'msg'를 프론트에 보낸다. 윗줄의 alert(response['msg']가 바로 그 부분이다. 서버를 실행시키고 이 글을 입력 후 버튼을 누른다면 msg로 지정한 문자열이 alert될 것이다.

그리고 이제 이 입력한 값을 index.html에 GET 시켜보자. 일단 위에 포스팅한 코드 중 일부분을 보자.

db.bugs_record.insert_one(info)

우리가 입력된 DB가 bugs_record 라는 파일에 저장되고 있다. 이를 확인해보자.

자 이제 이걸 app.py에 불러와서 프론트 부분으로 GET 시켜보자.

@app.route('/second', methods=['GET'])
def bugs_get2():
    all_infolist = list(db.bugs_record.find({}, {'_id': False}))
    return jsonify({'info': all_infolist})

bugs_get2()의 함수 첫 줄은 데이터베이스에서 데이터를 불러오는 조작어이니 이는 정리된 부분을 참고한다. 불러온 것을 all_infolist에 초기화하고 이 리스트를 'info' 라고 하고 프론트로 보낸다.

function bugs_listing() {
    $.ajax({
        type: 'GET',
        url: '/second',
        data: {},
        success: function (response) {
            let info = response['info']
            for(let i = 0; i < info.length; i++) {
                let title = info[i]['title']
                let comment = info[i]['comment']
                let nick = info[i]['nick']
                let temp_html = `<tr>
                                    <th scope="row">${title}</th>
                                    <td>${comment}</td>
                                    <td>${nick}</td>
                                </tr>`
                                $('#bugs_record').append(temp_html)
                         }
                    }
                })
            } 

현재 우리가 입력했던 데이터는 info로 프론트에 있다. 이를 이제 프론트에서의 info로 초기화한다. 여러가지 값이 있기 때문에 반복문을 사용한다. 이 부분을 console.log 해보면 우리가 데이터베이스에 넣을 때의 title, comment, nick으로 들어가있음을 확인할 수 있다. 이것을 각자 다시 한 번 더 초기화하고 붙여넣는다.

이제 실행해보면 내가 쓴 글이 HTML에 등록된다.

부가적인 부분

처음에 나는 POST와 GET을 이해하기 너무 힘들었다. 이 부분을 그림으로나마 스스로 남겨보며 되짚어보겠다.

프론트 부분에서 서버에 데이터를 보내기 위해서 위와 같이 작성한다.

Flask에서 title_give, comment_give, nick_give라고 요청받아야 하기 때문에 이를 지정해준 것이다.

이제 서버는 데이터베이스에 이를 저장하고 완료되면 'msg' 를 프론트로 보내게 된다.

이 과정이 POST이다.

클라이언트가 GET을 요구했다.

서버는 데이터베이스의 값을 꺼내서 이를 'info'라 칭하고 그 리스트를 클라이언트에 보낸다.

이것이 GET 이다.

처음에는 GET, POST를 이해하기 너무 어려웠는데 보면서 코딩하고 안보고 코딩해보려고 노력하다보니 어느정도 동작원리를 이해하게 된 것 같다.