스파르타 코딩클럽 웹개발 종합반 - 4주차 후기

이번 주차에는 파이썬의 flask 패키지를 이용하여 서버 환경을 구축해보고, 로컬 개발 환경에서 테스트를 진행해보았다.

* 로컬 개발환경 > 클라이언트 = 서버

 

로컬 개발 환경 아키텍처

 

4회차 강의 내용

---

-프로젝트 기본 셋팅 과정

1. 프로젝트 폴더로 사용할 폴더를 생성하고, 경로를 지정한다.

 

파일 > 새 프로젝트 > 위치 지정

2. Flask 기본 폴더 구조를 구축한다.

 

프로젝트 폴더 안에,

ㄴstatic 폴더 (이미지, css파일)

ㄴtemplates 폴더 (html파일)

ㄴapp.py 파일

 

3. 프로젝트에서 사용할 패키지들을 설치한다.

 

해당 화면에서는 flask, dnspython, requests, beautifulSoup, pymongo 를 설치했다.

 

flask 시작 코드

from flask import Flask
app = Flask(__name__)

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

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

app.py 파일에 서버에 관련된 코드들을 입력한다.

 

기본적으로 localhost 5000번 포트를 사용했다.

@app.route('/') 내에 주소를 지정할 수 있는데, 위 코드의 페이지는 http://localhost:5000/ 로 기본 페이지와 같다.

기본 페이지를 기존에 만들어 놓은 index.html 파일로 지정하였다.

 

---

- GET, POST 방식 API 만들기

자료 제공 : 스파르타 코딩클럽

 

GET(서버 > 클라이언트) - 데이터를 가져오는 것으로, 반복문을 사용하여 출력하거나, 사용할 수 있다. (R)

POST(클라이언트 > 서버) - 사용자에게 입력받은 데이터를 서버쪽으로 전달하여 작업을 수행할 때 사용한다. (C,U,D)

---

실습과제 1

 

사용자에게 입력받은 데이터를 저장하고, 서버 로딩 시 DB에 있는 데이터를 출력하는 예제이다.

 

3주차에 배웠던 내용을 이용하여 학습을 진행했다.

 

 

GET 방식 (Read)

- 서버 단

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

pymongo 를 사용하여 DB에 있는 데이터를 받아와 프론트 단으로 넘겨준다.

 

- 프론트 단

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

받아온 데이터를 컬럼별로 변수로 지정한 후에 html코드에 해당하는 변수에 추가한다.

해당 코드의 위치를 찾아 지정하고,  append한다.

해당 작업을 통해 서버 로딩 시, DB 안의 데이터가 표 형식으로 출력되게 된다. 

 

---

POST 방식 (Create)

-프론트 단

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

이름, 주소, 평수 form에서 가져온 값들을 각각 name_give, address_give, size_give Key로 서버에 전달한다.

 

- 서버 단

@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': '주문 완료!'})

받아온 데이터를 변수에 지정하고, pymongo를 이용하여 DB에 insert 한다.

---

실습과제 2

 

1번 예제의 방식에 더해서 BeautifulSoup을 활용한 예제이다.

 

 

데솔레이트 영화 페이지의 html 코드

위 화면을 보면 메타 태그들을 확인할 수 있는데, 해당 페이지에 대한 간략한 정보들을 확인할 수 있다.

이 중에서 제목, 작품, 사진url에 대한 프로퍼티를 가져와 사용하였다.

 

 

POST (Insert)

- 프론트 단

        function posting() {
            let url = $('#url').val()
            let comment = $('#comment').val()
            let star = $('#star').val()

            $.ajax({
                type: 'POST',
                url: '/movie',
                data: {url_give: url, star_give: star, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

'기록하기' 버튼 클릭시, 사용자에게 입력받은 영화 페이지 url, 댓글, 별점에 대한 데이터를 서버단으로 넘겨준다.

 

 

- 서버 단

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_give']

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'title':title,
        'image':image,
        'desc':desc,
        'star':star_receive,
        'comment':comment_receive
    }
    db.movies.insert_one(doc)

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

넘겨 받은 데이터 중, 영화 페이지 url을 이용하여 영화 이미지, 영화 제목, 영화 설명에 해당하는 meta 태그 값을 가져온다. 

가져온 meta태그 값과 별점, 댓글에 대한 데이터를 DB에 저장한다.

 

GET 부분은 1번 예제와 동일한 방식으로 서버 로딩 시, DB에 있는 데이터를 가져와 화면에 출력하게 된다.

---

4주차 과제 - 팬명록 기능 완성하기

배운 내용을 토대로 이전 과제인 팬명록에 댓글 남기기 기능을 추가하였다.

2번 예제보다 더 단순한 방식으로 댓글을 추가할 수 있어서 비교적 금방 완성할 수 있었다.

 

 

---

4주차 후기

로컬 테스트를 진행해보면서 그간 배운 내용들을 전부 사용하여 과제를 완성해보았다.

서버단과 프론트 단이 데이터를 어떤 방식으로 주고받는지 직접 체험해볼 수 있어 유익했다.

 

코드를 입력할 때, 빠른 속도 보다는 높은 정확성에 염두를 두고 작업을 진행해야할 것 같다.

분명 코드를 맞게 입력했는데도 에러가 발생해서 확인해보면, 따옴표를 빼먹었거나 특정 문자를 입력하지 않는 등의 실수를 반복하고 있다. 좀 더 꼼꼼하게 코드를 작성할 수 있도록 노력해야겠다.