마찬가지로 이와 같이 만들어 준 후 app.py에서 가상환경을 만들어 준다.(flask 라이브러리를 쓰기 위함)
* templates 스펠링 유의할 것
pymongo, dnspython, requests(크롤링 목적), bs4(크롤링 목적) 설치
여러개의 라이브러리를 설치할 때에는 위와 같이 한번 띄워서 해주면 순차적으로 설치가 가능하다
# 크롤링 기본 코드
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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')
위 페이지에서 검사를 누른 다음 <head> 태그를 보면 meta 태그가 굉장히 많은데 여기서 og:title, og:image, og:type 등을 볼 수 있다.
여기서 og:image 부분을 더블클릭 후 복사하여 url을 주소창에 넣으면
이와 같이 이미지만 나오게 된다.
필요한 데이터는 og:title , og:image , og:description 이다. 즉, meta 태그인데 property가 og:title , og:image , og:description
인 것을 가져오고 거기서 content 값이 필요하다
select_one 함수를 사용해 위와 같은 코드를 써주고 print 해보면
meta 태그의 property = og:title 부분만 출력되게 된다. 여기서 content 값만 필요하기 때문에 print(ogtitle['content']) 을 해주면
원하는 값이 나오게 된다.
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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')
ogtitle = soup.select_one('meta[property="og:title"]')['content']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
print(ogtitle,ogdesc,ogimage)
웹크롤링을 위해 requests와 bs4 라이브러리를 사용해서 타이틀, 설명, 이미지를 가져올 수 있게 코드가 구성됐다.
영화 url와 코멘트를 받아서 url을 기반으로 제목, 이미지, 설명을 먼저 db로 넣어야 한다. 먼저 url과 comment를 받아야 하기 때문에 위와 같이 코드를 짜줬다.
받아온 url을 가지고 웹크롤링을 해야하기 때문에 위와 같이 import requests와 bs4 코드를 넣어준다.
db에 데이터를 넣어줘야하므로 위 코드도 넣어준다.
post 방식으로 html에서 url_give, comment_give로 데이터를 전달 받는다. 웹크롤링 코드를 가져와서 doc 딕셔너리를 만들어 db에 저장해주는 코드를 구성했다.
url을 입력하는 곳의 id 가 url로 지정이 되어있고 comment 입력하는 곳은 id가 comment로 지정이 되어있다.
여기에 입력되는 값을 가져오려면 jQuery를 이용해서 지목해서 .val()을 사용하면 위의 변수에 값이 담기게 된다.
이제 입력된 url 과 comment 데이터를 FormData에 태워서 백엔드로 보내줘야 한다.
이렇게 해주면 백엔드로 보낼 준비가 된 것이다.
기록하기를 누르면 저장완료! alert 창이 뜬다. 그 후 db를 확인해보면
입력한 데이터가 잘 저장됐음을 알 수 있다. 여기까지가 입력 받은 데이터(url)을 기반으로 크롤링을 해서 title과 desc, image를 크롤링해와서 db에 저장하게 되는 과정이다.
# db에 저장된 데이터 불러오기
이 부분이 서버이고, 서버가 할 일은 데이터를 가져다가 내려주는 것이다.
따라서 db의 movies에 있는 데이터를 모두 가져와 all_movies 변수에 할당해주고 프론트엔드로 return 해준다.
넘겨받은 data['result']는 app.py 코드에서 all_movies를 의미한다. 즉, 변수 rows에는 all_movies가 할당돼있는 것이다.
반복문을 사용해 필요한 데이터를 변수로 할당해주고 console을 찍어보면 db에 있는 데이터들이 출력이 되게 된다.
이 데이터들을 카드를 만들어서 붙여줘야 하므로
카드에 해당하는 부분인 <div class="col"> 부분을 복사해서
이와 같이 붙여넣고 temp_html에 할당해준다.
카드 부분을 지정한 id = cards-box 를 jquery 사용해 지목해주고 append 함수를 이용해 temp_html을 붙여주고 웹페이지를 새로고침해주면
db에 있는 데이터가 자동으로 카드형식이 되어 나타나는 것을 볼 수 있다.
별점 추가하는 칸을 넣어서 별점도 html로 나타내려고 한다. 먼저 사용자가 선택한 별점 값을 가져오기 위해서 id = "star" 이므로
$('#star').val()을 사용해 변수 star에 사용자가 선택한 별점 데이터를 할당했다.
그 후 FormData를 통해 백엔드로 보내야 하므로 star_give에 star를 담아 보냈다.
백엔드 쪽에서 request.form를 통해 star_give를 받았고 star_receive에 할당하여 doc 딕셔너리 내에 'star' = star_receive 를 입력해 db에 저장시켜줬다.
백엔드에서 위 코드를 사용해 db에 있는 데이터를 모두 가져와 프론트로 보내주고
백엔드에서 보내준 db 데이터를 활용해 star를 html로 붙여줬다. 이때 별 이모티콘으로 나타내기 위해 repeat 함수를 사용했는데
repeat(star)은 star만큼 별 이모티콘을 찍으라는 의미이다.
'코딩 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 5주차(팬명록) (0) | 2023.03.22 |
|---|---|
| 웹개발 종합반 5주차(버킷리스트) (0) | 2023.03.22 |
| 웹개발 종합반 4주차(화성땅 공동구매) (0) | 2023.03.21 |
| 웹개발 종합반 4주차 (0) | 2023.03.21 |
| 웹개발 종합반 3주차 (0) | 2023.03.21 |
댓글