keyword : 크롤링, 웹 스크레이핑, HTML/CSS/JS, DOM, Request, BeautifulSoup

HTML/CSS/JS

HTML : 웹의 구조를 설정해주는 언어(갖다놓기)

Element : 요소 라는 의미로 head, body, div 등과 같은 태그로 표현되며 구성 내에서의 역할을 나타내준다.(웹 스크레이핑 시, 태그를 통해 가져오는 방법이 있으므로 알아두기)
Parent/Children

<ul>
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
</ul>

ul 은 li 의 상위 태그, li는 ul의 하위 태그

CSS : HTML에 여러가지 스타일을 넣어주는 언어(꾸미고)

Selector : 특정 요소를 선택할 수 있는 방법, 더 쉽게 원하는 요소들을 선택해 접근 가능
1. Type selector: CSS 타입에 따라서 선택할 수 있습니다 (예를 들어 'p', 'div' 등)
2. Class selector: 클래스에 따라 선택할 수 있습니다.
3. Id selector: id 에 따라 선택할 수 있습니다.
상속 : CSS는 요소의 위치에 따라 상위 요소의 스타일을 상속, 단 상속받는 조건보다 본인이 갖고 있는 조건이 더 우선

<div style="color:red">
    <p>I have no style</p>
</div>

클래스(웹 스크레이핑 시 중요) : 어떤 특정 요소들의 스타일을 정하고 싶을 때 사용, 동시에 여러 개의 요소들에 대한 스타일을 정할 때 클래스를 지정하여 상속을 받도록 함.(클래스는 . 으로 표현합니다. ex) .banana)

<p class="banana">I have a banana class</p>
<p class="banana fruit orange">I have many classes</p> # 여러개의 클래스도 부여 가능

ID : 클래스와 비슷하지만 클래스가 집단을 선택한다면, ID는 개별 하나하나를 지정(ID는 #으로 표현합니다. ex) #pink)

<p id="pink">My id is pink</p>

JS : 동작을 담당(시킨다)

웹 스크레이핑을 위해 기본적인 웹 구조를 아는 것이 필요!! 웹에서 F12를 눌러 웹에 있는 정보가 어떻게 구성되어있는지, 위치를 알 수 있도록 해야한다.

DOM(Document Object Model ; 문서 객체 모델)

DOM은 HTML, XML 등 문서의 프로그래밍 인터페이스로 프로그래밍 언어를 통해서 HTML 문서 등에 접근할 수 있도록 도와줍니다.

DOM은 문서를 하나의 구조화된 형식으로 표현을 하기 때문에 이러한 구조를 이용해서 원하는 동작(특정 클래스, 태그의 값을 가져온다든지)을 할 수 있습니다.

DOM은 자바스크립트에서 사용되는 데이터 구조 중 하나인 'object'로 표현을 하는데, 이는 파이썬에서의 dictionary와 비슷한 형태입니다.

DOM을 통해 프로그래밍 언어에서 사용할 수 있는 데이터 구조 형태로 작업을 수행할 수 있기 때문에 웹 페이지를 통한 작업(스크레이핑, 크롤링 등)에서 매우 중요한 개념입니다.

DOM 메소드

웹 브라우저에서 개발자 도구(F12)를 열어 콘솔 창으로 들어가 자바스크립트를 통해 사용해보기

document.querySelectorAll('p')

=> 'p' 태그를 사용하는 요소들을 담은 유사 배열(NodeList)을 받게 됩니다.

getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴합니다.
getElementById: 'id' 가 일치하는 요소들을 리턴합니다.
getElementsByClassName: '클래스' 가 일치하는 요소들을 리턴합니다. class를 통한 호출이 자주 사용됩니다.
querySelector: 셀렉터(들)과 일치하는 요소를 리턴합니다.
querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴합니다.

DOM과 크롤링

파이썬에서 크롤링을 하여 웹페이지의 정보를 모두 str 형태로 가져온다해도 이를 구분해서 데이터를 가져오는 것에는 한계가 있습니다. 이때, 웹페이지를 텍스트 형식이 아닌 DOM 형식으로 활용합니다.

예시)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>h1 태그입니다.</h1>
        <p>p 태그입니다.</p>
    </body>
</html>

'h1' 태그에 해당하는 내용을 알고 싶다면 DOM을 활용합니다! 만약 위의 값들을 그냥 문자열로 받고 그 뒤에 파이썬에서 재구조화하려면 너무 비효율적이기 때문입니다.

웹 스크레이핑/크롤링

스크레이핑 : 긁어모으기 -> 웹에서 특정 정보를 가져오는 것이 목적

웹에서 데이터를 추출하는 것뿐 아니라 구조를 분석하는 때에도 사용합니다.

크롱링 : 웹(Web)이란 거미줄을 기어다니기 -> 인터넷의 사이트들을 인덱싱하는 목적

프로그램이 웹 사이트를 정기적으로 돌며 정보를 추출하는 기술, 이 때 이 프로그램을 '크롤러', '스파이더'라고 합니다.

requests 라이브러리

웹과 편하게 소통하게 해주는 라이브러리로 파이썬에서 HTTP 요청을 보낼 때 사용합니다.

$ pip install requests
import requests
requests.get('https://google.com') # <Response [200]> 과 같은 HTTP 응답 객체가 리턴됩니다. (서버에 연결할 수 없다면 404)

보통 아래와 같이 사용합니다.


import requests

url = 'https://google.com'

resp = requests.get(url)

resp.status_code # 응답의 상태 코드를 확인 (숫자가 나옴)

응답의 성공여부를 상태 메시지와 번호를 부여하여 표현합니다.

200은 성공을 의미하고, 웹 페이지를 찾을 수 없을 때는 404로 표현됩니다.

200이 성공이, 404은 실패고 등 보다 더 중요한 것은 결국, 웹 페이지를 무사히 받았느냐 입니다.

import requests
from requests.exceptions import HTTPError

url = 'https://google.com'

try:
    resp = requests.get(url)

    resp.raise_for_status()
except HTTPError as Err:
    print('HTTP 에러가 발생했습니다.')
except Exception as Err:
    print('다른 에러가 발생했습니다.')
else:
    print('성공')

위와 같은 코드를 통해 HTTP 요청 시 성공 유무를 판단 가능합니다.
HTTP를 요청하는 것이 스크레이핑, 크롤링의 기본입니다.

웹 브라우저는 결국 길게 주어진 HTML을 우리가 보기 편하게 해주는 역할입니다.
이 때, requests 라이브러리를 통해 웹 브라우저가 받는 동일한 HTML 문서를 받을 수 있습니다.

resp = requests.get(url)
resp.text

BeautifulSoup 라이브러리

이제는 돌려받은 응답 내용을 파싱하고 정보를 얻어낼 수 있어야합니다.(단순 문자열이 아닌 DOM 형태로 렌더링(바꿔주는 작업))

pip install beautifulsoup4

import requests
from bs4 import BeautifulSoup

url = 'https://google.com'
page = requests.get(url)

soup = BeautifulSoup(page.content, 'html.parser')

즉, requests 라이브러리로 먼저 파싱할 페이지를 받아온 후 문자열로 변환하고 파서를 이용하여 DOM 형태의 soup을 만들어줍니다.
기본적으로 'html.parser'를 주로 사용하고 다른 파서는 여기 참조

요소 찾기

`find`와 `find_all` (매우 매우 중요! 정확히 이해하고 있기)

find : bs4에서 1개의 요소를 찾을 때 사용, 조건에 일치하는 첫번째 결과를 리턴
find_all : 여러 개의 요소를 찾을 때 사용, 조건에 일치하는 모든 결과를 리스트에 담아 리턴

dog_element = soup.find(id='dog')
cat_elements = soup.find_all(class_='cat')

id는 주로 단일객체이므로 find를 사용하고 class는 여러 객체가 모여있으므로 find_all을 사용합니다.
주의) 위에서 class_ 로 사용한 것은 파이썬의 class와 구분 짓기 위함입니다.

활용)

cat_elements = soup.find_all(class_='cat')

for cat_el in cat_elements:
    cat_el.find(class_='fish') # cat_el[0], cat_el[1] 등으로도 가능

태그와 클래스 동시 활용)

cat_div_elements = soup.find_all('div', class_='cat') # 'div' 태그를 가지면서 동시에 'cat' 클래스인 경우

string 활용)

어떤 특정한 글이 들어가 있는지 보고싶을 때의 경우입니다.

soup.find_all(string='raining')
soup.find_all(string=lambda text: 'raining' in text.lower()) # 'raining'이 대소문자 구분없이 찾고 싶을 때

string 을 사용하면 원하는 정보를 찾을 수는 있지만 각 요소의 .string 속성을 불러오는 것이기 때문에 요소가 아닌 문자열로 리턴이 됩니다. 따라서 하나의 요소로 받기 위해서는 태그도 같이 추가해줘야 합니다.

soup.find_all('h3', string='raining') # 태그도 같이 적용해야 하나의 요소로 값을 받을 수 있습니다.

정보얻기)

<p class='cat'>This is a p-cat</p>

cat_el = soup.find('p', class_='cat')
cat_el.text #=> 'This is a p-cat'

cat_el.text.strip() # 불필요한 띄어쓰기가 있을 때 정리를 위해 사용
cat_el.text.split() # 받아온 문자열을 어떤 기준에 따라 나눠줘야할 때 사용 (자주 사용하게 된다)

+심화

정적 스크레이핑 vs 동적 스크레이핑
그리고
웹 스크롤 내렸을 때, url은 그대로/내용물 달라지는 경우 '동적 스크레이핑' ~~ 크롤링
웹 스크롤 올았을 때, url이 변하고/내용물 달라지는 경우 '정적 스크레이핑'

'💿 Data > 부트캠프' 카테고리의 다른 글

[TIL]55. NoSQL (0)	2022.01.28
[TIL]54. API (0)	2022.01.27
[TIL]52. Python_Intensive(Debuging, Class) (0)	2022.01.26
[TIL]51. Section3_sprint1_challenge (0)	2022.01.24
[TIL]50.DB_ API (0)	2022.01.21

[TIL]53. Web_Scraping

HTML/CSS/JS

DOM(Document Object Model ; 문서 객체 모델)

DOM 메소드

DOM과 크롤링

웹 스크레이핑/크롤링

requests 라이브러리

BeautifulSoup 라이브러리

요소 찾기

`find`와 `find_all` (매우 매우 중요! 정확히 이해하고 있기)

'💿 Data > 부트캠프' 카테고리의 다른 글

티스토리툴바

HTML/CSS/JS

DOM(Document Object Model ; 문서 객체 모델)

DOM 메소드

DOM과 크롤링

웹 스크레이핑/크롤링

requests 라이브러리

BeautifulSoup 라이브러리

요소 찾기

find와 find_all (매우 매우 중요! 정확히 이해하고 있기)

'💿 Data > 부트캠프' 카테고리의 다른 글

티스토리툴바

`find`와 `find_all` (매우 매우 중요! 정확히 이해하고 있기)