TIL_210522

flask

• flask 프레임워크는 서버를 구동시켜주는 편한 코드모음
• flask를 install 하고 기본코드를 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)

# 서버를 만들기 위해 이와같이 변형
from flask import Flask, render_template, jsonify,request
app = Flask(__name__)

@app.route('/')  # template폴더 안의 index.html을 연결하는 부분
def home():
   return render_template('index.html')

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

프레임워크와 라이브러리의 차이점??
컨트롤의 주체가 어디인지?? 프레임워크는 이용하기 위해서 내가 프레임워크의 규칙을 따라야한다. 반대로 라이브러리는 내가 필요에 따라 불러내서 컨트롤 한다. 프레임워크는 가져다 쓰기 보다는 내가 들어가서 사용한다는 느낌.

ex) Jquery : 내 필요에 따라 가져다 쓰고 다른 라이브러리로 대체가능
ex) django : 사용시 장고의 규칙에 따라 admin.py와 url.py생성 해야함
(flask 사용시 app.py와 폴더 static, templates를 생성하는 것과 같은 맥락이지 않을까..?)

출처:https://webclub.tistory.com/458

API

• 서버에서 클라이언트 요청을 받기 위해서 만들어 놓는 창구
• GET 타입과 POST 타입이 있음
• app.py에서의 요청 API코드와 html에서의 요청 확인 Ajax코드 작성

  GET : 데이터 조회(read), ?로 데이터를 가져옴
  POST : 데이터 생성/변경/삭제, data:로 데이터를 가져옴

# GET 요청 API코드
@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

# POST 요청 API코드
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

---

// GET 요청 확인 Ajax코드
$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

// POST 요청 확인 Ajax코드
$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

---

서버 구동

• Ajax에서 가져온 데이터를 API에서 처리하고 response를 주면 다시 Ajax가 받아서 활용(???)
• 아무튼 flask를 활용하여 서버를 만들어 데이터를 저장하고 게시하는 페이지를 만들었음.
• 먼저 서버를 위한 flask와 데이터 저장을 위한 pymongo를 설치.
• API 만들고 클라이언트와 연결
  (API를 구현하기전 먼저 조각기능을 구현해 검증과정을 거쳤음)

# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    num_receive = request.form['num_give']
    address_receive = request.form['address_give']
    pnum_receive = request.form['pnum_give']

    doc = {     # mongoDB에 받은 데이터를 저장!
        'name':name_receive,
        'num':num_receive,
        'address':address_receive,
        'pnum':pnum_receive
    }
    db.shop.insert_one(doc)
    return jsonify({'msg': '저장완료'})

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    cat = list(db.shop.find({},{'_id':False})) 
    # 저장한 데이터 꺼내오기
    return jsonify({'all_cat':cat})

---

    <script>
        $(document).ready(function () {
            // $('#dal-w').empty();
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    let rate = response[1]['rate'];
                    // let txt = `달러-원 환율: ${rate}`;
                    // $('#dal-w').append(txt);
                    $('#now-rate').text(rate);
                }
            })
            order_listing();
        });

        function order_listing() {
            // 주문목록 보기 API 연결
            $.ajax({
                type: "GET",
                url: "/order",
                data: {},
                success: function (response) {
                    let cat = response['all_cat'];
                    for (i=0; i<cat.length; i++) {
                        let name = cat[i]['name']
                        let num = cat[i]['num']
                        let address = cat[i]['address']
                        let pnum = cat[i]['pnum']
                        let temp_html = `<tr>
                                            <th scope="row">${name}</th>
                                            <td>${num}</td>
                                            <td>${address}</td>
                                            <td>${pnum}</td>
                                        </tr>`
                        $('#tbody').append(temp_html);
                    }
                }
            })
        }

        function order() {
            // 주문하기 API 연결
            let name = $('#order-name').val()
            let num = $('#inputGroupSelect01').val()
            let address = $('#order-address').val()
            let pnum = $('#order-phone').val()
            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, num_give: num, address_give: address, pnum_give: pnum},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload()
                }
            })
        }
    </script>

---

페이지를 구동시켰는데 원인을 알 수 없는 오류가 떠서 1시간 가량 헤맸다. 사실 이문제는 페이지를 localhost:##### 으로 부르지 않고 프로그램내에서 열었던 것이 원인이었다...

meta tag
카톡이나 sns로 공유할 때 자동으로 나오는 이미지나 요약 등
미리 og:image 등에 넣어놔서 자동으로 긁어갈 수 있도록 설정해 놓은 것

window.location.reload()

ajax에 넣어 새로고침을 요청

Pycharm

• 스터디 팀원분이 마우스사용없이 파이참을 다룰 수 있는 단축기 강의를 해주셨다. 의식적으로 사용하다보니 손에 빨리 익음.
• git 강의도 해주셔서 처음으로 terminal을 활용해 커밋

• 마우스 우클릭을 커맨드로 만들어 사용
• ctrl + w ctrl + d alt + 1 alt + 7 등

생각

• 머리와 마음으로 이해는 했는데 설명은 못하겠다. 설명 못 하면 이해한게 아니라지...
• '외울 필요 없다', '이해하려할 필요 없다', '나중에 알게 된다' 라는 말이 왜 이렇게 불안한지 조금씩 찾아보긴 하는데 쉽지 않다.
• 날잡고 git 정리 포스팅하기

210531
대단한 성장을 한것도 아니고 아직 조금씩 알아가는 수준이지만 현재 공부하는 습관 중 가장 도움이 되는 부분은 궁금한 것, 모르는 것이 생겼을 때 바로 찾아보고 습득하려고 노력하는 습관인 것 같다. 실제로 많이 남는 것 같다. 나같은 비전공 출신 코린이는 세계관에 대한 이해와 특히 추상적인 개념에 대한 이해와 데이터가 부족해 무언가를 알려고하면 또 다른 것을 알아야만 하는 늪에 빠지게 된다. 그래도 막상 조금씩이라도 알아가려고 노력하다보니 짧은 기간 내에 기대 이상의 지식이 쌓였다. 그게 또 보람차고 한발 더 나아가는 원동력이 되는 듯.