두 번째, 스파르타피디아
조각 기능?
프로젝트에 들어갈 기능들을 미리 구현해보는것.
이번 프로젝트에서 meta tag를 크롤링하는 기능을 새로 구현해야하니 먼저 이 기능이 잘 되는지부터 검증해야 한다.
나중에 찐프로젝트를 들어가면 수십~수백가지 기능을 구현해야 하는 데,
모든 기능을 한꺼번에 돌리는것은 시간도 많이 소요되고 어떤 기능에 문제가 있어서 오류가 나는지 쉽사리 찾기 어렵다.
따라서 이런 작은 기능 하나하나에 대한 검증이 필요하다.
이런 조각 기능들을 검증하면서 개발을 진행하는것이 TDD(Test-Driven Development)의 기초가 되니, 열심히 해 두자.
META TAG 스크래핑 하기
카톡에 URL을 전송하면, 썸네일과 title, 그리고 description이 자동으로 붙는다.
이것들은 어떻게 남기고, 어떻게 가져올까?
Meta tag의 위치
우리가 찾고있던 것들은, og:property라는 이름 안에 있는 content에 들어있다.
이번에는 저번과 다른 방식으로 크롤링을 사용해 볼 것이다.
import requests
from bs4 import BeautifulSoup
url = 'url주소'
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')
#여기까진 똑같다
og_image = soup.select_one('meta[property="og:image"]')
og_title = soup.select_one('meta[property="og:title"]')
og_description = soup.select_one('meta[property="og:description"]')
#의미하는 바 : soup에서 하나를 고를 건데, meta tag의 property가 "og:~~~~"인 애를 가져와라.
image = og_image['content']
title = og_title['content']
description = og_description['content']
#그리고 각각의 property 안에 있는 content를 가져올 것이다.이렇게 하면 우리가 원하던 영화의 메타값의 image, title, description을 가져올 수 있다 :)
STEP 1 : 무엇을 고려해야 하는가?
- URL은 어떻게 만들 것인지, 요청 방식은 어떻게 될 것인지?
- 클라이언트에서 서버로는 어떤 것을 넘겨 줄 것인지?
- 서버에서 클라이언트로는 어떤 것을 넘겨 줄 것인지?
STEP 2 : 서버단 설정 (POST방식)
@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']
#클라이언트로 ~~~~_give들을 각각 받아와서 서버단의 변수에 담아준다.
#이제는 받은 url을 가지고 크롤링을 해 줄 것이다.
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)
#받아온 데이터의 url을 data에 저장하고
soup = BeautifulSoup(data.text, 'html.parser')
#그 데이터를 soup을 이용해 파싱해준다.
image = soup.select_one('meta[property="og:image"]')['content']
title = soup.select_one('meta[property="og:title"]')['content']
description = soup.select_one('meta[property="og:description"]')['content']
#그 파싱한 데이터에서 메타데이터를 추출한다.
doc = {
'image':image,
'title':title,
'desc':description,
'star':star_receive,
'comment':comment_receive
}
#그리고 함께 넘어온 request중 star와 comment를 모두 DB에 담고 JSON형태로 넘겨준다.
db.movies.insert_one(doc)
return jsonify({'msg':'POST 연결 완료!'})STEP 3 : 클라이언트단 설정
function posting() {
let url = $('#url').val()
let star = $('#star').val()
let comment = $('#comment').val()
# class name이 url, star, comment인것의 아규먼트를 각각 담는다.
$.ajax({
type: 'POST',
url: '/movie',
#우리는 POST방식으로 movie라는 창구에서 데이터를 다룰거라고 말 하는 중
data: {url_give: url, star_give: star, comment_give: comment},
#JSON방식으로 데이터를 다룰 것인데, data는 {param : value}형태로 들어가야 하므로
#~~~~_give에 ~~~~를 담아서 클라이언트에 넘겨준다.
success: function (response) {
alert(response['msg'])
window.location.reload()
#문제가 없을 경우 서버에서 받은 메세지를 띄우고 새로고침한다.
}
});
}
GET방식도 그대로 하면 된다.
STEP 2 : 서버단 설정(GET방식)
*POST가 아니므로 클라이언트에서 서버로 가져갈 것이 없기 때문에 간단하게 쓸 수 있다.
@app.route("/movie", methods=["GET"])
def movie_get():
movie_list = list(db.movies.find({},{'_id':False}))
return jsonify({'movies':movie_list})STEP 3 : 클라이언트단 설정
$(document).ready(function(){
listing();
#화면이 다 로딩되면 listing 함수를 실행한다.
});
function listing() {
$('#cards-box').empty()
$.ajax({
type: 'GET',
url: '/movie',
data: {},
success: function (response) {
#아까 movie_list를 movies라는 변수에 담아 response에 넘겨주었었다.
let rows = response['movies']
for(let i = 0; i < rows.length; i++) {
let image = rows[i]['image']
let title = rows[i]['title']
let desc = rows[i]['desc']
let star = rows[i]['star']
let comment = rows[i]['comment']
let star_image = '⭐'.repeat(star)
#repeat 함수는 파이썬이 얼마나 좋은 언어인지를 알려준다.
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}'웹개발 > 항해' 카테고리의 다른 글
| 항해 OT주차 - Week I Learned(수정중) (0) | 2023.01.15 |
|---|---|
| 항해 웹개발 종합반 5주차, 서버 구동 (1) | 2023.01.07 |
| 항해 웹개발 종합반 4주차, 서버 연습(1) (2) | 2023.01.04 |
| 항해 웹개발 종합반 4주차, 서버 (0) | 2023.01.04 |
| 항해 웹개발 종합반 3주차, DataBase (0) | 2023.01.04 |
