스파르타코딩클럽 [웹개발] 4주차

Python의 Flask 프레임워크에 대해 알아보자

<1 / 2 주차>

• HTML, CSS, Javascript로 웹 페이지 디자인

<3 주차>

• pycharm환경 pymongo, dnspython을 활용해 크롤링 기능 구현
• 크롤링한 데이터를 mongoDB Atlas 클라우드에 저장

<4주차>

• 웹 페이지에서 입력받은 값을 mongoDB에 POST 방식으로 전달 / 저장
• mongoDB에 저장된 값을 GET 방식으로 웹 페이지에 출력

(이미지 출처: 스파르타코딩클럽)
위와 같은 환경을 구축하기 위헤 로컬서버를 구현하고자 flask프레임워크를 쓰고자 한다.

Flask 시작

• flask 패키지 설치
• app.py(통상적)를 만들어 아래 코드 붙여넣고 실행

from flask import Flask
app = Flask(__name__)

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

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

이런 창 나오면 서버 구동 완료 된 것

위에서 port = 5000으로 선언했으므로
주소창에 localhost:5000 입력
화면에 This is Home! 출력되면 로컬서버 구축 완료다.

• url 나누기

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

이렇게 코드 하나를 중간에 더 추가해서 url를 나눌수도 있다.

HTML 파일 주기

• static (이미지, CSS 파일등을 넣는 디렉토리)
• templates (HTML 파일 넣는 디렉토리)
• app.py

이렇게가 기본적인 flask 프레임워크 구조다.

HTML파일을 불러오려면 templates 디렉토리에 HTML파일을 넣어주고

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

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

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

flask 내장함수인 render_template를 이용한다.

간단 요약

1) HTML 파일에서 특정 동작을 할때 데이터를 넣고싶다?

• app.py 파일에 POST 방식으로 원하는 데이터를 어떻게 받을 것인지 설정
• index.html 파일에 위 app.py에 정의한 데이터를 어떻게 입력받아서 넘겨줄 것인지 설정
• 받은 데이터를 딕셔너리화
• 딕셔너리화 한 데이터를 mongoDB에 저장

#app.py
@app.route("/homework", methods=["POST"])
def homework_post():
    nickname_receive = request.form['nickname_give']
    comment_receive = request.form['comment_give']

    doc = {
        'nickname': nickname_receive,
        'comment': comment_receive
    }
    db.fans.insert_one(doc)

    return jsonify({'msg':'팬명록 등록 완료!'})

//index.html
function save_comment() {
            let nickname = $(`#name`).val()
            let comment = $(`#comment`).val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {nickname_give: nickname, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }

2) DB 저장된 데이터를 화면에 출력해주고 싶다?

• app.py에서 GET 방식으로 데이터 받아서 리스트화 설정
• index.html에서 GET 방식으로 받아온 데이터 어떻게 쓸지 설정

# app.py
@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.fans.find({}, {'_id': False}))

    return jsonify({'comments': comment_list})

function show_comment() {

            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for(let i = 0; i < rows.length; i++){
                        let nickname = rows[i]['nickname']
                        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">${nickname}</footer>
                                                    </blockquote>
                                                </div>
                                            </div>
                                        `
                        $(`#comment-list`).append(temp_html)
                    }
                }
            });
        }

이렇게 된다.

뭔가 알 것 같으면서도 모르겠고 모르는건 또 아닌거 같기도하고 애매하진 않은데 확실하지도 않은 그런..