[TIL]KDT_20230419

📚 KDT WEEK 3 DAY 3 TIL

• BeautifulSoup 활용한 HTML parsing
  • 원하는 요소 가져오기
  • 페이지네이션(Pagination)
  • 동적 웹 페이지

 

---

 

🟥 BeautifulSoup4

HTML에서 원하는 요소를 추출하기 위해 사용할 HTML Parser

• soup = BeautifulSoup(res.text, "html.parser")
  • requests로 가져온 res의 text를 파싱한다
  • html을 파싱할 것임으로 뒤의 인자에 "html.parser"를 선언한다.
• h1 = soup.find("h1")
  • soup에서 특정 태그 요소를 찾을 수 있다.
  • 이때, 태그가 같은 이름의 태그가 여러개라면 가장 첫 번째것을 가져온다.
  • 모든 같은 이름의 태그가 필요하다면 find_all("h1")을 사용하자.
• h1.name, h1.text의 형태로 태그의 이름이나 내용을 가져올 수도 있다

 

이건 사용예시!

---

여러가지 예시를 넣어봤다.

네이버의 응답을 그대로 출력하면 이렇게 나오지만..

 

BeautifulSoup을 사용하면 들여쓰기가 되어 깔끔하게 보여준다!

 

이처럼 하나의 태그를 가져오는 것도 가능하고..

 

하나의 요소를 찾아 이름을 가져오는 것도 가능하다!

---

 

---

 

실제 사이트에서 원하는 요소 가져오기

활용한 사이트 : http://books.toscrape.com/catalogue/category/books/travel_2/index.html

Travel | Books to Scrape - Sandbox

 

먼저, 사이트에서 필요한 정보의 위치를 크롬의 개발자 도구를 통해 알아낸다.

• 해당 요소에 마우스 오른쪽 클릭 ➡ 검사 버튼
• 직접 F12 단축키로 개발자 도구를 불러와 찾아보기

 

내가 필요했던 제목은 h3 태그안에 있음을 확인했다.

 

다음으로 BeautifulSoup를 통해 파싱

import requests
from bs4 import BeautifulSoup

# requests와 BeautifulSoup를 사용하여 해당 사이트를 html 파싱
res = requests.get("http://books.toscrape.com/catalogue/category/books/travel_2/index.html")
soup = BeautifulSoup(res.text, "html.parser")

# 사이트에서 h3 태그안에 제목이 있음을 확인했으므로 h3 요소를 찾아 저장한다.
h3_result = soup.find_all("h3")

# h3 > a 태그 안의 title 속성에 제목이 있으므로 다음과 같이 저장하고 출력
book_list = [x.a["title"] for x in h3_result]
print(book_list)

 

 

제목이 이쁘게 담긴걸 볼수있다! (편의상 for문으로 출력했다)

 

---

HTML의 Locator 활용하기

• 태그의 이름으로 필요한 부분을 찾는 것은 좋지 않은 방법이다.
  • 같은 이름의 태그가 존재할 가능성이 아주 다분하기 때문!
• 따라서 태그마다 가진 고유의 id나 class 속성을 통해 찾는 방법이 좋다.
• BeautifulSoup의 find 메소드를 활용하면 id와 class를 지정해서 찾을 수도 있다.

먼저, 아까처럼 내가 찾으려는 값(책의 가격)의 위치를 알아낸다. (아까와 같은 사이트)

 

div 태그의 product_price 클래스를 가졌다는 걸 확인했다.

 

바로 코드로 파싱해본다!

#사이트에서 html 파싱
import requests
from bs4 import BeautifulSoup
res = requests.get("http://books.toscrape.com/catalogue/category/books_1/index.html")
soup = BeautifulSoup(res.text, "html.parser")

#class로 찾는 경우 찾는 태그의 이름 뒤 인자에 class 이름을 같이 적어준다.
find_result = soup.find("div","product_price")

#id의 경우
#find_result = soup.find("태그이름", id = "id이름")

#내가 찾고자 하는 값을 출력하면 끝!
print(find_result.p.text)

 

단위가 뭔진 모르겠지만 잘 출력되고 있다.

 

---

 

페이지네이션(Pagination)

 

사용된 사이트 : https://hashcode.co.kr/ 

QnA | 프로그래머스 커뮤니티

 

항상 하던 것처럼.. 가장 먼저 스크래핑할 내용을 찾아본다!

 

내가 원하는 내용은, li 태그 안쪽의, h4 태그안에 담겨있었다.

 

이번엔, user_agent를 dic 형태로 넣어 요청할 때 같이 전송해주었다.

import requests
from bs4 import BeautifulSoup

user_agent = {"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36"}
res = requests.get("https://hashcode.co.kr/", user_agent)
soup = BeautifulSoup(res.text, "html.parser")

# class가 'question-list-item'에 해당하는 li 태그를 모두 긁어왔다
qList = soup.find_all("li", "question-list-item")

# 원하는 내용(title)만 쏙 빼서 리스트 형태로 저장했다
qTitleList = [x.find("div","question").find("div","top").h4.text for x in qList]
qTitleList

 

이처럼 결과를 얻을 수 있지만.. 이건 일부에 불과하다

 

더 많은 결과, 더 많은 페이지에서 탐색을 하려면 어떻게 해야할까?

▶ 페이지네이션을 이용하면 된다. (for 문)

 

우선 사이트가 Query String을 통해 페이지를 구분한다는 사실을 감안하고 코드를 작성한다.

Query String ➡ https://hashcode.co.kr/?page={i} # i의 값에 따라 해당 페이지로 이동한다.

 

#위쪽 코드와 이어진다

import time

# 1~5페이지 탐색
for i in range(1,6):
    res = requests.get("https://hashcode.co.kr/?page={}".format(i), user_agent)
    soup = BeautifulSoup(res.text, "html.parser")

    questionList = soup.find_all("li", "question-list-item")

    qTitleList = [x.find("div","question").find("div","top").h4.text for x in questionList]
    print(qTitleList)

#과도한 요청을 방지하기 위해 0.5초 간격을 두었다
    time.sleep(0.5)

 

잘 출력되고 있다..!

 

---

 

🟦 동적 웹 페이지

 

정적(static) 웹 사이트 : HTML 내용이 고정된 형태

• 같은 주소로 요청을 보내면 같은 응답을 받을 수 있음
• HTML 문서가 완전하게 응답됨

동적 웹 사이트 : HTML 내용이 변하는 형태

• 새로고침을 할 때마다 보이는 내용이 달라지는 형태
• 응답 후 HTML이 렌더링이 될 때까지의 지연시간이 존재 
• 비동기 처리를 하므로, 응답을 받았을 때, 상황에 따라 데이터가 완전하지 않을 수도 있음

 

위에서 부터 차례로 동기 처리, 비동기 처리

 

동적 웹 사이트는 자바스크립트 언어를 사용하여 비동기 처리 방식을 사용하므로,

우리가 응답받는 시간이 데이터 처리가 모두 완료된 시점이 아닐 수도 있다

 

따라서, 임의로 시간을 지연하는 방식을 취해야한다.

 

또한, 사이트를 키보드나 마우스로 조작해야 하는 경우가 있기 때문에

파이썬 Selenium 라이브러리를 통해 시간을 지연시키거나 조작할 수 있다.

 

---

 

🤔 공부하면서 어려웠던 내용

본격적으로 웹 사이트에서 데이터를 스크래핑할 수 있는 시간이였다.

전에 구글 이미지를 크롤링하거나 플러터로 아마존 관련 앱을 만들어 본 적이 있어서 내용이 크게 어렵지는 않았다.

개인적으로 못해봤던 스크래핑 후 시각화해보는 시간이 기대된다...!