# WIL 항해99 웹개발종합반

임찬수·2021년 10월 11일
0

파이썬에서 json 불러오기

requests 라이브러리를 필요로 한다.
requests는 HTTP request 동작을 위한 라이브러리이다.

웹 크롤링하기

import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient

# mongo db connect
client = MongoClient('localhost', 27017)
db = client.dbsparta

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('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

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

BeautifulSoup 라이브러리는 requests 라이브러리로 받아온 텍스트를 파이썬이 이해 할 수 있는 형태로 가져와 html의 의미있는 구조로써 탐색할 수 있게 해주는 라이브러리로 이해했다.

원하는 태그 여러개 가져오기
select(selector)

select 함수는 매개변수로 받는 selector에 부합하는 태그정보를 모두 가져올 수 있으며
selector를 작성하는 방법은 CSS의 selector 작성법과 같다.

원하는 태그 한개 가져오기
select_one()

위 select 함수와 거의 같은 기능을 하지만 조건에 맞는 태그정보 하나만을 가져온다.

is not None

is not None은 출력 결과가 None일 경우를 예외처리 해준다.

if x is not None
if not x is None
if x

위 처럼 if x is not None 외에 두가지 방법으로도 쓸 수 있다고 하는데
읽는데 더 자연스러운 문법이 is not None이기에 이 방법을 권장한다고 한다.

MongoDB

MongoDB는 NoSQL의 일종으로 이전에 사용해봤던 MySQL과는 달리 좀 더 가볍고 자유로운(?) 느낌의 사용법을 갖고 있는것 같다.

pymongo의 MongoClient 라이브러리가 필요하고 그것을 내가 작성하고자 하는 DB에 연결하여 테이블을 작성 할 수 있다.

INSERT FIND UPDATE DELETE로 데이터를 다룰수 있는데 FIND는 MySQL의 SELECT와 같게 동작한다.

# insert 삽입
doc = {'name': 'jason', 'age': 21}
db.users.insert_one(doc)
# find 조회
same_ages = list(db.users.find({}, {'_id': False}))

for person in same_ages:
    print(person)

user = db.users.find_one({'name': 'jason'}, {'_id': False})
print(user)
# update 변경
db.users.update_one({'name': 'jason'}, {'$set': {'age': 24}})
db.users.update_many({'name': 'bobby'}, {'$set': {'age': 12}})
# delete 삭제
# db.users.delete_one({'name': 'bobby'})

과제 후기

지니뮤직을 크롤링하여 1~50위 곡정보를 스크래핑하는 과제에서
순위를 가져올때 순위정보를 담는 tr 태그의 하위 태그로 상승과 하락 정보를 노출하기위해서 span.rank 태그 하위에 텍스트들이 담겨있어서 원하는 정보만 가져오기 어려웠는데
구글 서칭으로 알아본 결과

decompose() 함수로 특정 태그를 제거 할 수 있다는 사실을 겟.
그래서 원하는 정보를 가져오기전에 .rank 태그를 제거 한 후 순위정보만 뽑아 올 수 있었다.

flask

파이썬으로 작성된 마이크로 웹 프레임워크의 하나로 서버환경을 구현하는데 사용
가볍고 자유도가 높은편이라고 한다. 다만 Django에 비해서 제공해주는 기능이 덜 하다라는 평이 있다.

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    qtt_receive = request.form['qtt_give']
    addr_receive = request.form['addr_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'qtt': qtt_receive,
        'addr': addr_receive,
        'phone': phone_receive
    }

    db.shop.insert_one(doc)

    return jsonify({'msg': '주문이 접수되었습니다.'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    all_orders = list(db.shop.find({}, {'_id': False}))
    return jsonify({'all_orders': all_orders})


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

Node.js의 Express와 같은것이 아닌가??
찾아보니 Express도 웹 프레임워크로 서버환경을 구축하는데 사용하며

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

코드가 비슷해 보인다.

flask 환경에서 API 제작하기

라우팅이란

현대 웹 프레임워크는 사용자가 애플리케이션의 URL을 기억할 수 있도록 도와주는 라우팅 기술을 사용합니다. 이 기술을 사용하여 홈페이지에서 탐색을 하지 않고도 원하는 페이지에 직접 접근할 수 있기 때문에 유용합니다.
Flask의 route() 데코레이터는 URL을 함수와 연결하는데 사용합니다.

출처 https://mooneegee.blogspot.com/2017/10/python-flask-routing.html

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    all_orders = list(db.shop.find({}, {'_id': False}))
    return jsonify({'all_orders': all_orders})

내가 만든 flask서버에서 route()라는 데코레이터에 매개변수로 '/order/' 라는 경로를 설정하였는데 사용자가 해당 경로로 접근하면 아래 view_orders()를 실행하여 함수에 작성된 하게한다.

나는 GET방식으로 페이지 최초 접속시 DB에 저장된 주문 목록 데이터를 모두 긁어오기 위해서
클라이언트단에서 Ajax를 통해 데이터를 요청한다.

이때 /order url로 요청이 보내지면 서버단에서 view_orders()가 실행되여
아래와 같이 DB에 저장되어있는 주문목록을 모두 불러와 return 하도록 하였다.

서버단에서 return한 주문목록을 다시 클라이언트단에서 Ajax 통신이 완료 되었을때 배열을 순회하면서 tbody안에 그려줄수 있도록 작성하였다.

# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    qtt_receive = request.form['qtt_give']
    addr_receive = request.form['addr_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'qtt': qtt_receive,
        'addr': addr_receive,
        'phone': phone_receive
    }

    db.shop.insert_one(doc)

    return jsonify({'msg': '주문이 접수되었습니다.'})

다음은 사용자가 주문을 했을때 데이터를 DB에 넣는 작업을 하기위해 POST 방식으로 클라이언트 단에서 주문하기 버튼을 눌렀을때 입력된 정보를 서버단으로 넘겨 DB에 저장될수 있도록 하였다.

여기서 완성된 homework (나홀로쇼핑몰) 페이지의 동작을 모두 따라 만들기 위해서 작성된 정보가 누락되었을 시 유효성 검사를 할 수 있도록 하였는데

수량 정보를 가져오는데 value가 string 형식으로 받아와져 number 형식으로 바꾸는데
NaN 문제에 맞닥드려 잠시 MDN을 찾아보았다..

NaN 내용도 그저 '숫자가 아님'으로 알고있었는데 생각보다 많은 내용들이있다.

가장 핵심적인 내용은 아래 내용을 숙지하고 있으면 좋을것 같다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN

profile
프론트엔드 개발자가 되기 위한 정보를 정리합니다.

0개의 댓글