항해99 3주차 항해일지 회고록 <3>
| 웹개발 종합반 - 3주차
📍 수업 목표
✏️ 2주차 학습 내용 복습 <스파르타피디아에 openAPI 붙여보기>
(1) 웹 페이지가 로드되면 javascript가 바로 실행되도록하는 코드
$(document).ready(function(){
listing();
});
function listing() {
console.log('로딩 후 실행되었습니다'); // 로딩 후 바로실행 함수 동작시 콘솔에 로그 발행
}
(2) Ajax를 이용해 openAPI에 데이터를 요청하고 받아보기
function listing() {
$('#cards-box').empty() // 화면 로딩시 'cards-box' id값에 있는 내부 태그를 비운 후 시작
$.ajax({
type: "GET", // GET방식으로 요청
url: "http://spartacodingclub.shop/web/api/movie", // 요청 URL
data: {}, // GET 요청시에는 비워둠
success: function (response) {
let rows = response['movies'] // rows안에 movies의 결과값을 받아옴
for (let i=0; i < rows.length; i++){ // 반복문을 통해 rows의 길이만큼 반복하며 출력
// 출력이 필요한 변수들을 선언하여 반복하여 출력함
let title = rows[i]['title']
let desc = rows[i]['desc']
let image = rows[i]['image']
let star = rows[i]['star']
let comment = rows[i]['comment']
let star_image = '⭐'.repeat(star)
// repeat함수는 주어진 문자열을 옵션의 count만큼 반복하여 붙인 다음 새로운 문자열로 반환하는 함수
// 사용법은 string.repeat(반복count(=star))
// 변수 temp_html에 html코드를 텍스트로 넣는다.
let temp_html = `<div class="col">
<div class="card">
<img src="${image}">
<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)
//id가 cards-box인 곳에 .append에 의해 추가된다.
/* console.log(title,desc,image,start,comment)*/
}
}
})
}
(3) 결과물
(1) 파이썬 기초 문법
✏️ 변수 & 기본 연산
a = 3
b = a
# 변수의 이름은 마음대로 지을 수 있음
✏️ 자료형 (숫자/문자/리스트형)
name = 'bob'
num = 12
is_number = True
#변수에는 문자열,숫자 또는 'Boolean'형, 리스트형도 들어갈 수 있음
(1) list형
a_list = [1]
a_list.append([2,3]) // a_list에 [2,3]이라는 리스트를 다시 넣을때 사용
# a_list의 값은 ? [1, [2,3]]
# a_list[0] = 1 , a_list[1] = [2,3]
(2) Dictionary형
a_dict = {]
a_dict = {'name':'bob', 'age':21}
# a_dict의['Name']값은 ? : bob
(3) list + Dictionary
people = [{'name':'bob', 'age':20}, {'name':'carry','age':38}]
✏️ 함수
#자바스크립트의 함수
function f(x) {
return 2*x+3
#파이썬의 함수
def f(x){
return 2*x+3
✏️ 조건문
def oddeven(num): # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
return True # True (참)을 반환한다.
else: # 아니면,
return False # False (거짓)을 반환한다.
result = oddeven(20)
✏️ 반복문
fruits = ['사과','배','감','귤']
for fruit in fruits:
print(fruit)
# 사과, 배, 감, 귤 하나씩 꺼내어 찍힘
(2) 웹스크래핑(네이버영화) 해보기
🔍 requests 라이브러리
# 사용코드 예시
import requests # request 라이브러리 설치
r = requests.get("https://example.com/")
rjson = r.json() # 응답 본문을 json형태로 디코딩하여 반환
🔍 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)
soup = BeautifulSoup(data.text, 'html.parser')
# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만들고, soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 코딩을 통해 필요한 부분을 추출하면 됨
soup = BeautifulSoup(data.text, 'html.parser')
(1) 위 라이브러리를 통해서 네이버 영화페이지를 크롤링하여 원하는 데이터 가져오기
# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')
// 파싱한값을 리스트로 movies 변수에 담는다
# movies (tr들) 의 반복문을 돌리기
for movie in movies:
# movie 안에 a 가 있으면,
a_tag = movie.select_one('td.title > div > a')
// 문서의 처음부터 찾게되며 가장 첫번째 <a>태그를 호출한다.
// 반복문을 통해 리스트안에 있는 <a>태그를 모두 호출한다.
if a_tag is not None:
print (a_tag.text)
// a_tag를 텍스트 형식으로 찍는다
[📣 select 사용법]
# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')
soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')
# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')
# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')
#예시
rank = movi.select_one('td:nth-child(1) > img')['alt']
// img 태그 중 'alt'속성을 가져오기
star = movie.select_one('td.point').text
// td 태그 사이의 텍스트를 가져오기
(2) 결과 화면
(3) pymongo를 통한 mongoDB 제어
*) 선행작업 : Atlas에 mongoDB 구축
from pymongo import MongoClient
client = MongoClient('여기에 URL 입력') // 내 db client url 입력
db = client.dbsparta
// dbsparta = db명
# mac 환경에서는 오류가 발생하기때문에 certifi 라이브러리도 추가로 설치 필요함
from pymongo import MongoClient
import certifi
ca = certifi.where();
client = MongoClient('mongodb+srv://ID:PW@cluster0.qk1cs8d.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
# 데이터 저장하기
doc = {
'name':'bob',
'age':27
}
db.users.insert_one(doc)
# 특정 결과값 뽑아보기(한개찾기)
user = db.users.find_one({'name':'bobby'})
# 모든 데이터 뽑아보기
all_users = list(db.users.find({},{'_id':False})) // Id값은 제외하고 출력
# 수정하기
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
# 삭제하기
db.users.delete_one({'name':'bobby'})
# 예시
all_users = list(db.users.find({},{'_id':False}))
print(all_users[0]) # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기
for user in all_users: # 반복문을 돌며 모든 결과값을 보기
print(user)
3주차 과제 - 지니뮤직사이트를 크롤링하여 1~50위 곡을 스크래핑하기
✏️ 결과 코드
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://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)
# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')
# select를 이용해서, tr들을 불러오기
music_list = soup.select('#body-content > div.newest-list > div > table > tbody > tr')
# music_list (tr들) 의 반복문을 돌리기
for music in music_list:
a = music.select_one('td.number').text[0:3].rstrip()
// 순위는 text[0:3]을 사용하여 0번째부터 3번째 자리까지만 출력
rank = a
artist = music.select_one('td.info > a.artist.ellipsis').text
title = music.select_one('td.info > a.title.ellipsis').text.strip()
// 제목 스크래핑시 앞과 뒤에 공백이 다수 포함됨, strip 함수를 통해 제거하기
// strip함수는 문자열의 시작과 끝에서 공백을 제거하고, 공백없이 동일한 문자열을 반환함
print(rank,artist,title)
💾 결과 화면
💕같이 화이팅 합시당💕