웹개발 종합반 3주차

OpenAPI 붙여보기

✔ 기본코드

$(document).ready(function(){
  listing();
}); // 로딩 후 실행

function listing() {
	$.ajax({
	  type: "GET",
	  url: "http://spartacodingclub.shop/web/api/movie", // 가져올 API 주소
	  data: {},
	  success: function(response){
			console.log(response) // 잘 가져오는지 콘솔창에서 확인
	  }
	})
}

✔ for문 돌려서 temp_html로 붙여주기

function listing() {
            $('#cards-box').empty()
            $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/web/api/movie",
              data: {},
              success: function(response){
                    let movies = response['movies']
                    for (let i = 0 ; i < movies.length; i++) {
                        
                        let title = movie['title']
                        let desc = movie['desc']
                        let image = movie['image']
                        let comment = movie['comment']
                        let star = movie['star']

                        let star_image = '⭐'.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>
                                                    <p class="card-text">${desc}</p>
                                                    <p>${star_image}</p>
                                                    <p class="mycomment">${comment}</p>
                                                </div>
                                            </div>
                                        </div>`
                        $('#cards-box').append(temp_html)
                    }
              }
            })
        }

💻 결과

👀 ⭐ 이미지를 안주면 어떻게 나올까?

string.repeat(count) : 문자열을 주어진 횟수만큼 반복하여 반환한다.

웹스크래핑(크롤링)

✔ bs4 패키지 설치 필수
✔ 기본 세팅 코드

import requests
from bs4 import BeautifulSoup

# 타겟 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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers) 
# 지금 가져올 데이터는 네이버 영화랭킹 페이지

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

#############################
# (입맛에 맞게 코딩)
#############################

크롤링 연습

# select 이용해서 tr들 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a = movie.select_one('td.title > div > a')
    if a is not None:
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        point = movie.select_one('td.point').text
        print(rank,title,point)

💻 결과