내일배움단 11일메이킹챌린지 4일차

작심삼일이라는 소리가 나와도 전혀 이상하지 않은 상황이다. 7월 22일 저녁에 썼어야 했을 개발일지를 지금 쓰고 있는 이유는, 첫째, 과로로 집에 도착후 몸져 누웠었기 때문이고, 둘째, 그 다음날은 집에 귀가를 못하고 밖에서 잔 후 오늘 점심에야 집에 도착했기 때문이다.

음악 사이트에서 순위와 노래제목, 가수명을 크롤링하는 과제를 수행했다.
그래도 금방 끝날 수 있을 줄 알았는데, 순위를 가져오는 과정에서 자꾸 자식 태그(상승/하강 순위)가 딸려와서 없애느라 고생을 많이 했다. 찾다가 decompose()라는 태그를 버릴 수 있는 코드가 있어서 사용했다.
그러고도 한참 이상하게 나오길래 다시 보니 print()를 지우는 걸 까먹어서 페이지 내용이 중복으로 나오고 있던 것.
그 후 공백을 지우는 법을 찾아보니 strip()이라는 태그가 있었다. 내용 왼쪽을 지우고 싶으면 .lstrip() 오른쪽을 지우고 싶으면 rstrip()을 입력하면 결괏값에 공백이 사라진다. 미션 컴플리트! 완성 답안 분량 치곤 초반에 너무 헤매서 부끄럽다.
기억해야 할 것: decompose(), strip(), lstrip(), rstrip()

코딩 답안:

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

# URL을 읽어서 HTML를 받아오고,
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('https://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# 순위 1: #body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number
# 순위 2: #body-content > div.newest-list > div > table > tbody > tr:nth-child(2) > td.number
# 상승 순위: #body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number > span

# 곡 제목: #body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.title.ellipsis
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.title.ellipsis
# 가수: #body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis

# select를 이용해서, tr들을 불러오기
genies = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

# genies (tr들) 의 반복문을 돌리기
for genie in genies:
    # genie 안에 a 가 있으면,
    a_tag = genie.select_one('td.info')

    if a_tag is not None:
        rankchild = genie.select_one('td.number > span').decompose() # 상승하강순위제거
        rank = genie.select_one('td.number').text  # 순위 가져오기 성공! 공백이 큼
        title = genie.select_one('a.title.ellipsis').text             # 제목 가져오기 성공! 근데 공백이 개큼
        artist = genie.select_one('a.artist.ellipsis').text

        # 공백제거
        ranktxt = rank.rstrip()
        titletxt = title.lstrip()


    print(ranktxt,titletxt,artist)

팀프로젝트 진행 상황:
세계지도 배경화면 투명화가 안되어서 직접 svg파일에 손을 댔다. 메모장 툴을 이용해서 ocean 카테고리에 있는 color 항목과 fill 항목을 지웠다.

/*
 * Oceans and seas
 */
.oceanxx
{
   opacity: 1;
   color: #000000;
   fill:#ffffff;
   stroke:#000;
   stroke-width:0.5;
   stroke-miterlimit:1;
}

/*

png로 변환해서 지우는 방법도 있지만 그 과정에서 벡터레이어가 손실되니 벡터 자체로 편집하고 싶어서 이런 방법을 사용했다. 이제 바다 색을 맘대로 바꿀 수 있다!
하트포인터도 이상하게 파일 자체로는 적용이 안되어서... 그냥 둘다 웹 링크로 업로드하고 링크를 첨부하는 방식을 사용하니 일단은 해결됐다.
대신 백그라운드 이미지로 나와서 svg파일에 들어있던 국가별 명칭값은 적용이 안된다. 어떻게 해야할지 고민해봐야한다.
그리고 모니터 크기나 사이트 크기에 따라 핀포인트가 고정이 안되고 이리저리 움직이는데 이걸 해결하려면 반응형 웹 코드를 사용해야한다고 한다. 어째 일이 커지는 느낌... 열심히 해보자!