웹개발 종합반 3주차 수강일지

˙ Ajax 복습(로딩후 실행, 반복)

$(document).ready(function () {
            $('#cards-box').empty();
            listing();
        });					//새로고침 후 바로 listing 함수를 실행하게 하는코드
        					$('#cards-box').empty();코드는 아래에 cards-box 
                            			id를 비우고 시작하기 위한 코드

        function listing() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                    let rows = response['articles']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let url = rows[i]['url']		//Api내 articles안에서 반복되며 각각의 변수에 데이터 저장

                        let temp_html = `<div class="card">
                                                <img class="card-img-top" src="${image}" alt="Card image cap">
                                                <div class="card-body">
                                                    <a href="${url}">${title}</a>
                                                    <p class="card-text">${desc}</p>
                                                    <p class="card-text comment">${comment}</p>
                                                </div>
                                            </div>`		//temp_html이라는 변수에 card형식의
                                            			form 자체를 가져와서 각각의 자리에  
                                                        	${}형식으로 변수의 데이터를 저장
                    $('#cards-box').append(temp_html);  //body내 cards-box id에 위 temp_html
                    					temp_html form을 반복하며 추가
                                        		(새로고침하면 원래 있던 form을 지워주기위해
                                                	위쪽에 empty jquery를 추가)
                    }
                }
            })
        }

 

 

* 파이썬

  ˙ Dictionary 형과 List형의 조합

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

# people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
# people[2]['name']의 값은? 'john'

 

˙ 객체/리스트 차이

▶ bob, 20은 리스트안의 **객체**
people = [{'name': 'bob', 'age': 20},
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},

print(people['name'])  ▶ 에러남(객체가 아니라 리스트기 때문)
print(people[0]['name'])   ▶ bob 출력

for person in people:			// for 문을 적용시킨다면
    p_name = person['name']		{'name': 'bob', 'age': 20}전체가 객체로 인식되어 에러나지 않음
    							▶ bob, carry, john 출력

 

˙ 함수

# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7

# 참고: 자바스크립트에서는
function f(x) {
	return 2*x+3
}

# 파이썬에서
def f(x):
	return 2*x+3

y = f(2)
y의 값은? 7

 

˙ 조건문

def is_adult(age):
	if age > 20:
		print('성인입니다')    # 조건이 참이면 성인입니다를 출력
	else:
		print('청소년이에요')  # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)
# 무엇이 출력될까요?

 

˙ 반복문

people = [{'name': 'bob', 'age': 20}, 
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]
          
for person in people:		// people의 데이터를 person에 차례대로 저장
	print(person)

▼
{'name': 'bob', 'age': 20}, 
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27}]

for person in people:           //people의 데이터를 하나씩 꺼내서 사용하는 형태
    print(person['name'], person['age'])

▼
bob 20
carry 38
john 7
smith 17
ben 27

 

---

˙ requests 라이브러리 (해당 url에 데이터코드 요청해서 받아오는 역할)

import requests # requests 라이브러리 설치 필요
		(setting -> project interpreter -> "+" -> 검색후 install)

r =requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()		// 데이터를 rjson에 저장

gus = rjson['RealtimeCityAir']['row']		// row안의 데이터를 gus에 저장

for gu in gus:			//gus의 안의 데이터를 하나씩 불러와서 gu에 차례대로 저장
    gu_name = gu['MSRSTE_NM']
    gu_mise = gu['IDEX_MVL']
    if (gu_mise > 100) :
        print(gu_name,gu_mise)

 

• 크롤링 : 받아온 정보를 솎아내는 작업
  (requests : 데이터요청 , beautifulsoup : 데이터솎아내기)
• BeautifulSoup 라이브러리 : (받아온 데이터를 검색하기 용이한 상태로 만듬)

기본세팅

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.nhn?sel=pnt&date=20200303',headers=headers)
		# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
		# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
		# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

 

• soup.select는 일치하는 여러개를 찾아서 리스트로 반환
• soup.select_one은 최초로 일치하는 하나를 반환

아래의 예시를 보면 이해가 빠를 것이다.

html= """
<html>
<a class="click" href="naver.com"> 네이버링크 </a>
<a class="click1" href="daum.net"> 다음링크 </a>
</html>
"""
select를 사용할 경우
soup = BeautifulSoup(html,"html.parser")
data = soup.select("a")
print(data)

>> [<a class="click" href="naver.com"> 네이버링크 </a>, <a class="click1" href="daum.net"> 다음링크 </a>]
2.select_one을 사용할 경우

soup = BeautifulSoup(html,"html.parser")
data = soup.select_one("a")
print(data)

>> <a class="click" href="naver.com"> 네이버링크 </a>
select_one은 문서의 처음부터 시작하여 조건에 맞는 하나를 찾게 된다. 반면 select는 모든 a태그를 찾아 리스트에 담게 된다.

따라서 select_one은 바로 .text ["href] 등을 적용하는 것이 가능하다.

soup = BeautifulSoup(html,"html.parser")
data = soup.select_one("a")
title = data.text
link = data["href"]
하지만 select의 경우에는 for 문을 통해 다시 개별요소에 접근을 해야한다.

soup = BeautifulSoup(html,"html.parser")
data = soup.select("a")
for i in data:
	title = i.text
    link=i["href"]

 

˙ BeautifulSoup 최종

import requests
from bs4 import BeautifulSoup

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.nhn?sel=pnt&date=20200303',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#old_content > table > tbody > tr')		//tr까지 붙여줌 !

for tr in trs:
    a_tag = tr.select_one('td.title > div > a')	 //tbody > tr 뒤 title 부분만 가져와서 a_tag에 저장(어디까지 빼고 더할지 범위지정 중요)
    if a_tag is not None:
        rank = tr.select_one('td:nth-child(1) > img')['alt'] //img의 alt 속성값 가져오기
        title = a_tag.text		
        star = tr.select_one('td.point').text	//td태그의 point class를 가져와서 text만 추출한뒤 star에 저장	
        print(rank,title,star)

 

˙ 참고

for tr in trs:
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()	//strip() : 공백제거
    singer = tr.select_one('td.info > a.artist.ellipsis').text.strip()
    rank = tr.select_one('td.number').text[0:2].strip()		
    		//문자열 자를때 [0:2]와 같이 사용(문자열 0부터 2까지만 자르겠다)
    print(rank,title,singer)

 

˙ 참고2

og_image = soup.select_one('meta[property="og:image"]') 
- select 사용시 code selector로 가져온 주소가 먹히지 않을때 태그를 이용해 데이터를 가져오는 방법도 있음

 

• 데이터베이스(데이터를 더 잘 정리하고 찾기위함)
  (서버,데이터베이스-컴퓨터 내 하나의 프로그램,역할으로 이해)

mongoDB : 데이터베이스
Robo3T : mongoDB의 데이터를 보기위한 프로그램

SQL : 정해진 형식에 데이터를 저장(엑셀 같은 형식)
No-SQL : 형식이 정해져 있지 않고 자유롭게 딕셔너리 형태로 저장

 

• Robo3T(pymongo 실행방법 검색창 cmd - mongod - 브라우저에 localhost:27017 입력하고 메시지 뜨는지확인)

기본형식

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

// insert / find / update / delete

insert

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
doc = {'name':'jane','age':21}
db.users.insert_one(doc)			//db 데이터에 users안에 doc 딕셔너리를 삽입해라(users부분 바꿔주면 collection안에 자동으로 생성됨)

find

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
same_ages = list(db.users.find({},{'_id':False}))	//db안에 users에서 모든 딕셔너리를 찾아라 but, _id값은 가져오지 말아라

user = db.users.find_one({'name':'bobby'})		// bobby라는 이름 하나만 찾아라

update

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})	
		//bobby인애를 찾아서 19살로 바꿔라

참고: db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})  
	//매트릭스 title의 star를 0으로 만들어라('0':문자열, 그냥 0:숫자 - 데이터의 형식 확인 후 통일시켜 주는게 좋음)

 

delete

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
db.users.delete_one({'name':'bobby'})		//bobby를 삭제해라