2023.03.14 TIL - 토이 포르젝트[나의 음악 저장소]

[Problem]

기존에 했던 프로젝트 스파르타피디아 구조를 통해 좋아하는 음악을 저장하는 음악 저장 공간을 만들었다.

크롤링해서 가져오는 곳은 네이버 VIBE를 이용했다. 기존에 했던 방식과 동일하다 생각하고 작성한 코드를 돌렸지만 엉뚱한 내용만 저장됐다. 계속해서 같은 내용으로 다른 부분을 크롤링해서 저장하는 형태가 되었다. 

 

[Try]

rows.forEach((a) => {
                    let comment = a['comment']
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let star = a['star']

                    let star_repeat = '⭐'.repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}"
                                                class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <h5 class="card-text">${desc}</h5>
                                                <p>${star_repeat}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards-box').append(temp_html)

처음에는 위 부분에 변수를 저장하는 부분이 잘 못 됐다 생각하고 계속해서 수정했다. 그러나 계속해서 같은 결과가 나왔다. 생각해보니 크롤링해서 가져오는 부분을 수정할 필요가 있어 보였다.

#content > div.summary_section > div > div.summary > div.text_area > h2 > span.title
//바이브에서 가져온 타이틀 정보

#content > div.article > div.mv_info_area > div.mv_info > h3 > a:nth-child(1)
//네이버 영화에서 가져온 타이틀 정보

비교했을 때 큰 차이점이 없다고 생각됐다. 이것 저것 수정했지만 역시나 똑같은 결과를 얻었다.

 

[Solution]

 결과적으로 내가 생각했던 부분에서는 해결할 수 있는 방법이 없었다. 완벽하게 작성하지 못하고 사전 스터디 팀원들과 스터디를 진행했다. 스터디에서 이 부분을 해결한 분이 계셨고 웹개발 종합반 강의 내용에 없던 selenium이라는 패키지를 이용해야 한다는 것을 알게 되었다. selenium은 동적 페이지를 크롤링할 때 사용하는 패키지였다. 여기 동적페이지란 외부 환경에 따라 다른 결과값을 제공해주는 웹을 의미한다. 바이브에 접속했을 때 처음 뜨는 안내 부분이 문제였다. 이 부분이 크롤링을 하는데 방해요소 작용한 것!! 결과적으로 bs4로는 동적 페이지를 크롤링할 수 없었고 이를 극복하기 위해선 다른 패키지 selenium이 필요했다.

 

[Conclusion]

이번 토이 프로젝트를 통해 selenium의 사용방법을 일부 알 수 있었다. 이를 통해 다양한 부분에 클롤링이 가능해졌다. 

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from selenium import webdriver

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.amltttx.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/music", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_give']

    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_receive,headers=headers)
    driver = webdriver.Chrome('chromedriver')
    driver.get(url_receive)
    driver.implicitly_wait(10)
    html = driver.page_source
    soup = BeautifulSoup(html, 'html.parser')

    ogimage = soup.select_one('#content > div.summary_section > div > div.summary_thumb > img')['src']
    ogtitle = soup.select_one('span.title').text.replace('곡명', '')
    ogdesc = soup.select_one('#content > div.end_section.section_lyrics > div > p').text

    doc = {
        'title':ogtitle,
        'desc':ogdesc,
        'image':ogimage,
        'comment':comment_receive,
        'star':star_receive
    }
    db.musics.insert_one(doc)

    return jsonify({'msg':'저장완료!'})

@app.route("/music", methods=["GET"])
def music_get():
    all_music = list(db.musics.find({},{'_id':False}))
    return jsonify({'result':all_music})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

이렇게 app.py를 수정했고 다시 해본 결과 성공적으로 크롤링이 가능했다.

- 토이 프로젝트 결과 -

이번 프로젝트를 통해 틀린 부분이 없고 정상적으로 작동하지만 원하는 결과물이 나오지 않으면 웹 검색을 통해 해결하는 것이 좋다는 것을 깨달았다. 아직 이해하지 못하고 배우지 않은 부분을 스터디와 검색을 통해 공부할 수 있는 좋은 기회였다.