4주차 - 실습2 [나홀로 메모장]

율·2022년 2월 10일

웹개발

목록 보기

11/13

1. 프로젝트 세팅

2. API 설계

3. 조각 기능 구현해보기

meta 태그 스크래핑 하기

meta_prac.py 파일을 만들어서 잘 구동되는지 확인할 수 있는 연습파일을 만들어줍니다-!

# 크롤링 기본코드

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'

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,headers=headers)

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

# 여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.

copy selector로 복사 후 출력해보면 결과가 나오지 않는 것을 확인할 수 있다!

// 파이썬 태그와 메타태그 순서가 달라 이 방법은 찾기가 힘들거나 나오지않아요!
title = soup.select_one('head > meta:nth-child(9)')
print(title)

이럴경우에는! soup을 좀 더 응용해볼 수 있어요

title = soup.select_one('meta[property="og:title"]')
print(title)

content="그린 북" 으로 되어있으므로

title = soup.select_one('meta[property="og:title"]')['content']
print(title)
##- 이렇게하면 제목이 출력되는 것을 알 수 있어요! >>이런식으로 제목/이미지/줄거리 등을 갖고오면 됩니다~~!

위 처럼 하나씩 가져와서 입력한 후 결과값을 확인 할 수 있어요

조각기능을 확인하고 app.py에 갖다 붙여쓰기만 하면 됩니다-!

4. 뼈대준비하기

app.py에 기본뼈대를 붙여넣어주기

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

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

## HTML을 주는 부분
@app.route('/')
def home():
   return render_template('index.html')

@app.route('/memo', methods=['GET'])
def listing():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg':'GET 연결되었습니다!'})

## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결되었습니다!'})

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

templates파일에 새 html 파일 index.html 만든 후 기본 뼈대 붙여넣기!

5. POST연습(메모하기)

메모장의 포스팅박스를 열어보면 필요한 자료는 url과 코멘트임을 확인할 수 있어요

모든 작업을 하기 전 크롤링으로 불러올 수 있게하는 작업과 db에 저장할 수 있도록 하는 뼈대작업이 되어있는지 확인부터 하고 시작해줍니당!

다 확인이 되어있다면 먼저 서버작업을 해주면 app.py에서 데이터를 불러올 곳을 지정해줍니당(url과 comment지정)

그런 다음 3번의 메타태그 크롤링해줬던 곳에서 복사해온 후 def saving(): 하단에 꼭 붙여줘야합니다!
그래야 데이터를 잘 불러올 수 있어요!! 주의!!

url은 불러올 곳을 지정해 두었기 때문에 굳이 따로 지정해주지 않아도 되므로 삭제하고 불러올 곳을 url_receive로 지정해두었습니다~~!

이렇게 불러온 데이터는 서버에 넣어줘야겠죠? >>insert 작업을 하면되어요!

서버작업이 되었다면 클라이언트 작업!!

필요한 자료는 url과 코멘트 이므로 가져올 수 있도록 입력해줍니당
body태그안의 url과 코멘트가 있는 박스의 id명을 확인 후 입력하여 지정해줍니다~~!

ajax의 데이터값 변경해주기

데이터가 필요한 url과 코멘트값을 불러와야하므로 서버에서 지정해놨던 값을 입력해주면 됩니당!!

참고로 입력저장 후 새로고침은
window.location.reload()
이렇게 해주면 깔끔하게 입력값이 자동 새로고침됩니당~~!

6. GET연습(보여주기)

서버작업부터 시작해보면 보여줄 때는 클라이언트의 데이터를 받아올 것이 없으므로 데이터요청은 삭제해줍니다!! 즉, 여러개를 찾는 함수를 사용하면 되는 것!

articles = list(db.articles.find({}, {'_id': False}))
클라이언트 작업에서도 GET요청을 수정해줍니다
url은 불러오는 것이 없으므로 /memo?-- 물음표이하 삭제처리
알림창이 아닌 articles보여주는 것으로 let문으로 응답처리 후 콘솔창 확인하기