화성 땅 공동구매 (토이프로젝트)

*토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다.

이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다.
Flask의 규칙에 맞게 설정을 하면 되는데

이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다.

POST 연습(주문저장)

*API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> 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': '주문 완료!'})

POST API 코드를 작성하고 필요한 정보인 이름, 주소, 평수의 각 변수명으로 받는다.
doc = {}의 JSON 형식으로 담아 mongoDB와 연결된 db.mars(프로젝트이름).insert_one(doc)으로 넣어준다.

그리고 return msg값을 html로 보내주면

 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()
                }
            });
        }

response로 받게된다. 받은 response['msg']로 알람을 띄워주고, window.location.reload()로 새로고침까지 해준다.

순서가 중간부터 들어가긴 했지만.. html의 name,address,size를 jQuery를 이용해 받아서
가지고 온 후, Ajax의 약속된 name_give:name, address_give:address, size_give:size 로 넘겨준다! 그리고 response로 받는 것!

이 작업을 하면서 배울 수 있었던 것은 'API 명세' 라는 것이 현업에 존재한다고 들었는데.
프론트와 백엔드 간의 이런 명세가 잘 이루어지지 않으면 통신이 안될테니 매우 중요할 것이라고 생각했다!

SI를 근무했을 때는 그런 설계나 table 구조에 대한 명세나 eXerd표라도 준다고하던데..듣기만하고 받아보진 못해서..ㅎ
쿼리문을 작성해보면서 데이터를 찾는데에 시간을 많이 할애 했다..
그래도 무슨 정보 찾아본다고 작성했던 덕에 안배워봤던 쿼리문도 많이 배웠다!
아무튼...이렇게 통신하는구나를 좀 더 자세하게 알게되었다.

GET방식 연습하기!

주문한 것을 그대로 조회를 해오려면 기록했을 때 DB에 저장되어 있던 Database를 꺼내오도록 해야한다.

order_list = db.mars.find({}, {'_id'}:flase)))

주문으로 저장해 DB에 있던 내용들을 모두 찾고,
return 하여 response에 전달한다.

필요한 정보였던 name, address,size 받아

해당 템플릿안에 넣어주기 위해서

let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${address}</td>
                                            <td>${size}</td>
                                        </tr>`

                    $('#order-box').append(temp_html)

jQuery를 이용하여 기록한 후, 새로고침이 되면 실제 기록한 내용이 템플릿에 붙는다.