03 web scraping : 음원 차트 웹페이지 긁어오기

지니 뮤직 사이트에서 (순위 / 노래 제목 / 가수) 순서로 정보를 긁어와서 아래처럼 출력해 보겠다.

 

웹 페이지를 스크랩 하기 위한 기본 코딩은 아래와 같다

 

 

requests와 BeautifulSoup 라이브러리를 import 하고 header를 지정한다. data는 genie 음원 사이트 url이 들어간다. genie 음원 사이트의 정보를 data라는 변수에 받는다.

soup 변수에 html 형태의 data가 저장된다.

 

soup을 출력해 봤을 때 html 형태로 출력된 것을 확인하면 된다. 앞으로 정보를 긁어 올 때 html 형식을 이용해서 긁어와야 하므로 soup이 html 형태로 출력되는지 확인하는 것은 의미가 있다

 

 

위 사진은 순위가 1~5위인 음원과 그 사이트 페이지의 html 코드를 캡쳐한 것이다. <table> 태그 안에 <tbody> 태그 안에 <tr> 태그가 있다. <tr> 태그가 여러 개 있는데, 음원 차트 사이트에서 (체트박스 - 순위 - 이미지 - 노래제목 - 가수 - 노래설명 - 재생버트 - 옆에 나란히 있는 버튼까지 ) 한 블록으로 표시된다. 이 한 블록이 <tr> 태그 안에 있다. <tr> 태그를 아래로 한 개씩 가리킬 때마다 음원 차트가 아래로 1줄씩 블록표시가 된다. 이것은 각 음원이 공통적으로 <tr> 태그 안에 있다. <tr> 태그 안에서 (순위 / 노래제목 / 가수이름)을 긁어와 보겠다.

 

변수 trs에 <tr> 태그 부분이 저장된다. <tr> 태그에서 각 음원의 순위를 가져오려면 음원 차트 페이지에서 순위 부분을 마우스 오른쪽 클릭하고 검사를 클릭한다. 그렇게 하며 순위부분의 html 코드가 검사창에 블록표시되어 뜨게 된다.

 

 

블록 표시된 <td.number>에 copy - copy selector 클릭한다. copy selector 한 내용은 다음과 같다.

#body-content > div.newest-list > div > table > tbody> tr:nth-child(1) > td.number  이다.

검사창에서 해당 코드를 복사하면 코드가 길어진다. <table> ~ </table> 그 안에 <tbody> ~ </tbody>가 포함되기 때문이다. 그러나 copy selector로 원하는 부분의 html 코드가 상위 태그 > 하위 태그 형태로 복사된다.

#body~ tr은 trs에 저장되어 있다. trs를 for()으로 각 tr마다 <td.number>를 rank 변수에 저장한다. <tr> 상위 태그, <td>는 하위 태그이다. 상위 태그, 하위 태그를 상대적으로 <tr>이 <td>보다 상위 태그임을 의미한다. (.number)는 (.클래스명)이다. (tr.select_one('td.number').text)만 출력하면 (순위 1)과 (1 상승)이 같이 출력된다. (1 상승)이 <span> 태그로 모양이 조금 작게 나오지만 text이기 때문에 순위와 같이 출력된다. 순위만 출력하기 위해 슬라이싱을 이용한다. text의 2글자만 출력하기 위해 text[0:2]로 처리한다. 그렇게 하면 text 클래스의 인덱스가 0~1만 출력되고 2부터는 출력되지 않는다. 그리고 strip()로 공백을 없애준다.

똑같은 방법으로 노래제목과 가수 부분의 html 코드를 copy - copy selector해서 붙여넣고 깔끔하게 출력되도록 strip()로 공백을 없애준다. 

마무리로 출력할 때 순위 , 노래제목 , 가수를 구분하기 위해 사이에 '/'를 추가했다.