[WIL] 웹개발 종합반 4주차

1. 4주차 회고

4주차에서는 Flask 프레임워크를 사용해서 API를 직접 만들어봤고, 그 API를 사용해서 클라이언트와 연결하는 연습을 했고 GET, POST 두 가지 요청 방식을 사용해 봤다.
처음 보는거라서 눈에 익숙하지도 않고 어려웠지만, 간단하긴 하지만 조금씩 웹사이트를 완성해 나가는게 눈에 보여서 재미있었다 :)

2. Flask

간단하게 서버를 구동시켜주는 프레임 워크
간단하게 만드는 만큼 소규모에 유리
가볍게 사용하고 배포할 수 있다.
단점으로는 Django에 비해 자유도는 높으나 기능이 적다.

• Flask 사용 코드

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

@app.route('/')
def home():
    return render_template('index.html') # html파일 주기
    
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

1) 요청 타입

요청 방식에는 여러 가지가 존재하지만 가장 자주 사용하는 GET, POST 방식에 대해 배웠다.

GET

• 주로 데이터 조회를 요청할 때 사용
• 데이터를 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

POST

• 주로 데이터 생성, 변경, 삭제를 요청할 때 사용
• 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

2) GET

• 서버

@app.route("/mars", methods=["GET"])
def web_mars_get():
	# DB의 mars에서 _id를 제외한 데이터를 order_list에 저장
    order_list = list(db.mars.find({}, {'_id': False}))
    # 클라이언트에 'orders'로 제공
    return jsonify({'orders': order_list})

• 클라이언트

function show_order() {
  $.ajax({
    type: 'GET',
    url: '/mars',
    data: {},
    success: function (response) {
      // 서버에서 받아온 'orders'를 row에 저장
      let rows = response['orders'] 
      for (let i = 0; i < rows.length; i++) {
        let name = rows[i]['name']
        let address = rows[i]['address']
        let size = rows[i]['size']

        let temp_html = `<tr>
                          <td>${name}</td>
                          <td>${address}</td>
                          <td>${size}</td>
                         </tr>`
        $('#order_box').append(temp_html)
      }
    }
  });
}

3) POST

• 서버

@app.route("/mars", methods=["POST"])
def web_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': '주문완료!'})

• 클라이언트

function save_order() {
  let name = $('#name').val();
  let address = $('#address').val();
  let size = $('#size').val();

  $.ajax({
    type: 'POST',
    url: '/mars',
    data: {name_give: name, address_give: address, size_give: size},
    success: function (response) {
      alert(response['msg']);
      window.location.reload(); // 페이지 새로고침
    }
  });
}

---

참고

Just, Kode It