[스파르타 코딩클럽] Flask, API, 클라이언트 연결

본 포스팅은 스파르타 코딩클럽에서 진행하는 <웹개발 종합반]> 강의를 수강하며 주차별 배운 점과 느낀 점을 정리하는 포스팅입니다. 제가 배운 것을 정리하는 개발 일지 겸 해당 강의를 수강하려는 잠재 수강생들에게 도움이 되었으면 합니다. 스파르타 코딩클럽으로부터 지원받고 제작하는 글이 아님을 밝힙니다.

1. 요약

이번 주차는 그럭저럭 할만했다. 마음을 비우고 비슷한 코드들을 가져와 주요 부분만 바꾸면 된다. POST, GET의 개념은 다른 소스를 통해 CRUD 개념을 익혀놓은 탓에 좀 더 쉽게 이해할 수 있었던 것 같다. 어려웠던 점은 1~3주차에 배운 내용들을 종합적으로 사용해야하다보니, 앞선 주차의 개념들이 잘 생각나지 않았다. 지난 포스팅들을 다시 읽어보며 복습하며 진행했다. 근데 결국 까먹겠지...;

2. 주요 학습 내용

[이번 주 학습 목표]
1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '화성에 땅사기' API를 만들고 클라이언트에 연결한다. 프로젝트 산출물
3. '스파르타피디아' API를 만들고 클라이언트와 연결한다. 프로젝트 산출물
> HTML과 mongoDB를 연동해서 서버 만들기

1) 프로젝트 세팅

① 프로젝트 생성

new project를 생성한다. 폴더 선택과 함께 위치에서 venv(뭔지모름)가 잘 설정되어 있는지를 확인해준다. 당연리 인터프리터에서도 버전 확인 필수. 웰컴 스크립트 생성은 체크해지.

② 디렉토리 설정

선택한 폴더 내에 내가 작업할 것들을 미리 세팅한다. 일반적으로 static(이미지, css파일 저장용), templates 폴더를 생성하고 templates 하위에는 html 파일을(index.html), 일반 폴더에는 파이썬 파일(app.py)을 생성해준다.

③ 패키지 설치

우선, flask, pymongo, dnspython 패키지를 설치해 flask와 DB연결을 세팅한다. 다음으로 requests, bs4 패키지를 설치해 크롤링을 세팅한다. [File → setting → Python interpreter → '+' 버튼 → 패키지 설치]

④ app.py 뼈대 코드 세팅

app.py에 아래 코드를 붙여넣고 골격 짜기를 시작.아래 코드의 경우 http://localhost:5000/ 에서 확인 가능

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

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

@app.route("/mars", methods=["POST"])
def web_mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

@app.route("/mars", methods=["GET"])
def web_mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

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

⑤ index.html 뼈대 코드 세팅

예시의 코드는 아래와 같으며 위 app.py 내에 render_template 함수를 이용해 아래 html을 불러온다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>

    <script>
        function hey(){
            alert('안녕!')
        }
    </script>
</head>
<body>
    <button onclick="hey()">나는 버튼!</button>
</body>
</html>

동작이 일어날 부분의 코드 예시를 가져와보았다. get과 post를 사용하는 방식이다.

<script>
    $(document).ready(function () {
        show_order();
    });
    function show_order() {
        $.ajax({
            type: 'GET',
            url: '/mars',
            data: {},
            success: function (response) {
                alert(response['msg'])
            }
        });
    }
    function save_order() {
        $.ajax({
            type: 'POST',
            url: '/mars',
            data: { sample_give:'데이터전송' },
            success: function (response) {
                alert(response['msg'])
            }
        });
    }
</script>

⑥ mongo DB Atlas 창 띄워두기

https://cloud.mongodb.com/ 로그인해두고 바로바로 DB 확인이 가능하다.

⑦ 주요 기능 확인

어떤 기능이 필요한지 html 부분을 창을 켜 확인한다. 클릭을 하면 어떤 일이 일어나는지를 서버와 클라이언트 관점에서 이해하고 해당 부분을 코딩할 예정이다. 예시의 경우 등록하기(POST)와 보여주기(GET)의 2가지 기능이 큰 요소이며, 세부적인 방식으로 어떤 데이터를 주고 받을지, 무엇을 눌렀을때 보여줄지 등을 고려하자.

2) 코딩 시작하기: POST(Create)

API를 만들고 사용해야한다. 아래처럼 정의해본다.

1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

① 서버 만들기(app.py)

name, address, size 정보를 받아서, 저장해야한다. 아래처럼 코딩이 가능하다.

@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.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

② 클라이언트 만들기(index.html)

서버에 저장했던 name, address, size 정보를 보내줘야한다.

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

③ DB 확인하기(mongo DB Atlas)

로컬 개발 환경의 웹 클라이언트에서 직접 기능을 입력해보고 데이터베이스에 잘 들어왔는지 확인해본다.

3) 코딩 시작하기: GET(Read)

API를 만들고 사용해야한다. 저장된 주문을 화면에 보여주는 것으로, 아래처럼 정의해본다.

1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

① 서버 만들기(app.py)

특별히 서버에서 받는 정보는 없다. 그냥 서버에 있는 정보를 모두 보내주기만 할 뿐.

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

② 클라이언트 만들기(index.html)

입력된 전체 정보를 잘 보여주자. for문이 중요하다.

function show_order() {
    $('#order-box').empty()
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            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)
            }

        }
    });
}

③ 작동 확인하기

프론트에서 새로고침해보며 정상적으로 작동하는지 테스트한다.

'개발일지' 카테고리의 다른 글

[스파르타코딩클럽] 엑셀보다 쉬운 SQL 문법 정리 (0)	2022.05.29
[스파르타 코딩클럽] 파이썬, beautifulsoup, 크롤링, DB (0)	2022.03.27
[스파르타 코딩클럽] JQuery, Ajax, API (0)	2022.03.15
[스파르타 코딩클럽] HTML, CSS, Javascript (0)	2022.03.11

똥

[스파르타 코딩클럽] Flask, API, 클라이언트 연결

1. 요약

2. 주요 학습 내용

1) 프로젝트 세팅

2) 코딩 시작하기: POST(Create)

3) 코딩 시작하기: GET(Read)

'개발일지' 카테고리의 다른 글

티스토리툴바

[스파르타 코딩클럽] Flask, API, 클라이언트 연결

1. 요약

2. 주요 학습 내용

1) 프로젝트 세팅

2) 코딩 시작하기: POST(Create)

3) 코딩 시작하기: GET(Read)

'개발일지' 카테고리의 다른 글

관련글

티스토리툴바