[4 주차] Flask와 미니 프로젝트

Flask

• API 서버를 만들 수 있다.
• Python web framework
• 앱을 만들어 배포하기 쉽다는 장점이 있지만 어떤것을 만드느냐에 따라 적절히 사용하는 것이 좋다고 생각한다.
• 터미널에서 pip install flask 라는 명령어로 설치 할수 있다.

// 기본 코드
from flask import Flask
app = Flask(__name__)

• 참고한 사이트 → https://justkode.tistory.com/10

[Flask를 알아 보자] 1. Flask란?, Flask 설치 방법

 

 

그 동안 배웠던것을 응용하여 미니 프로젝트를 만들기 전에 가상 환경을 세팅하려 한다.

 

가상환경이 필요한 이유

https://velog.velcdn.com/images%2Fthk-lightman%2Fpost%2Ffb24c3be-6016-4411-aba5-9ebd9105439a%2Fimage.png

프로젝트별로 필요한 패키지 버전과 실행파일 버전이 다를 수 있다.

이유는 같은 패키지라 할지라도 버전에 따라 새로 추가된 기능이 있고 사라진 기능이 있을 수 있기 때문이다.

따라서, 프로젝트에 필요한 버전을 설치하고 서로 영향을 주지 않기 위해 프로젝트 별로 가상환경을 만들어서 사용한다.

• 가상 환경 만들 때(Terminal을 git bash로 설정했음) → python -m venv venv
• 가상 환경 활성화 할때 → ./venv/Scripts/activate

 

 

실행환경

• VScode → Terminal → pip list show → pip로 설치된 패키지 버전 확인이 가능하다
• Python 3.9 → Terminal → python --version 으로 확인하였다.
• Flask 2.3.2
• pymongo 4.4.0 등

 

 

 

미니 프로젝트 만들기 - 1

 

1) Flask 시작하기

 

가상 환경에서 시작하였다.

Flask 서버를 만들 때는 위와 같이 만드는 것이 좋으며

templates폴더는 Flask에서 만든 규칙이라 꼭 만들어야 하고

이 폴더는 html 파일을 담아두고 불러오는 역할을 한다.

html파일을 불러 올때는 render_template을 import 하여 사용한다.

from flask import Flask, render_template

 

app.py에 5000포트를 사용하게 설정해 놓고 실행버튼을 누르면

 

위와 같은 메세지가 나오고 서버가 만들어 진다.

 

 

2) GET, POST 만들기

• GET
  • 데이터를 read(조회) 요청 할때 사용
• POST
  • 데이터 Create, Update, Delete 요청 할때 사용
  • 데이터 전달시 사용

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    # 저장 - 예시
    doc = {
        'name' : name_receive,
        'address' : address_receive,
        'size' : size_receive
        }
    db.mars.insert_one(doc)

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

@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result': mars_data})

 

//GET 관련 코드
function show_order() {
            fetch('/mars').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#order-box').empty()
                rows.forEach((a) => {
                    let name = a['name']
                    let address = a['address']
                    let size = a['size']

                    let temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${address}</td>
                                        <td>${size}</td>
                                    </tr>`
                                    $('#order-box').append(temp_html)
                })
            })
        }
        
// POST 관련 코드
        function save_order() {
            let name = $('#name').val()
            let address = $('#address').val()
            let size = $('#size').val()

            let formData = new FormData();
            formData.append("name_give", name)
            formData.append("address_give", address)
            formData.append("size_give", size)

            fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                window.location.reload()
            });
        }

 

3) mongoDB 확인하기

DB에 데이터가 들어갔는지 확인한다.

 

인터넷창을 띄우고 localhost:5000을 누르면 index.html 파일이 위와 같이 뜬다.