3주차 웹개발 종합반 마무리

# 3주차 웹개발 마무리

 

3주차 강의에 앞서 2주차에 배운 JQuery, Ajax간단하게 정리하기!

 

사실 여기 부분은 슬랙에도 질문을 해보고 찾아봤지만 아직도 해결이 안된 것입니다... 이유는 아직도 모르겠습니다

https://code.jquery.com/jquery-3.2.1.min.slim.js
// 이부분에서 slim을 지우고 해봤지만 뭔가 더 애매하게 막힌 부분입니다.

function listing() {
        $.ajax({
				  type: "GET",
				  url: "http://spartacodingclub.shop/post",
				  data: {},
				  success: function (response) {
				      let articles = response['articles'];
				      for (let i = 0; i < articles.length; i++) {
				          let article = articles[i];
				          let image = article["image"];
				          let url = article["url"];
				          let title = article["title"];
				          let desc = article["desc"];
				          let comment = article["comment"];
				          let temp_html = `<div class="card">
				                             <img class="card-img-top" src="${image}" alt="Card image cap">
				                             <div class="card-body">
				                                <a href="${url}" target="_blank" class="card-title">${title}</a>
				                                <p class="card-text">${desc}</p>
				                                 <p class="card-text comment">${comment}</p>
				                             </div>
				                           </div>`;
				          $('#cards-box').append(temp_html);
				      }
				  }
				})
        }
        
답지 복사에서 붙여봤지만 역시나 똑같이 안됐다 ㅠㅠ

포스팅 박스 열고 닫기도 안나오고 아래 사진과 설명이 있는 <div>역시 수정이 안됐습니다 ㅠㅠ

 

파이썬 시작하기

우선 시작하기에 앞서 필요한 프로그램(Python, MongoDB, Robo3T)들을 다운 받았습니다.

윈도우 사용자들은 고대로 따라하면 되지만 안타깝게 맥 특히 M1을 사용하는 사용자들은 조금 번거로울 수도 있습니다.

노션에 들어가면 M1용 홈브류 다운로드가 있으니깐 잘보고 다운 하셨으면 좋겠습니다.

 

우선 파이썬은 매우 직관적인 언어이고 할 수 있는게 많습니다. 기본적인 파이썬 문법을 했습니다.

a = 3
b = 4
print(a+b) # 7

name = 'bob' # 문자열
number = 99 # 정수
print(name+number) # name 과 number가 다른 형태여서 형태를 맞춰야합니다. (ex number = '99')

a_list = [] #리스트
a_list.append(1)     # 리스트에 값을 넣는다
a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

a_dict = {} #딕셔너리
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

people = [{'name':'bob','age':20},{'name':'carry','age':38}] #리스트와 딕셔너리 합친모습

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 (거짓)을 반환한다.
         
for i in num: # 반복문
	print(i)

 

패키지와 웹스크래핑(크롤링) 기초

먼저 패키지는 Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위입니다. 이런 패키지 의 묶음을 라이브러리 라고 볼 수 있습니다. 지금 여기서는 외부 라이브러리를 사용하기 위해서 패키지를 설치합니다. requests와 bs4를 다운받았고 리퀘스트는 html에서 복잡한 구조 없이 정말 간단하게 외부API를 가져올 수 있었습니다. beautifulsoup는 웹스크래핑을 도와주는 패키지로써 우리가 사용하는 NoSQL형식인 Robo3T에 저장, 찾기, 수정, 삭제를 할 수 있게 합니다. 또한, Robo3T는 MongoDB를 눈으로 볼 수 있도록 해주는 프로그램이기도 합니다.

 

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

# insert, find, update, delete

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

DBquiz

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

# 1번째 퀴즈) 영화제목 '매트릭스'의 평점을 가져오기
same_st = db.movies.find_one({'title':'매트릭스'})[star]

# 2번째 퀴즈)'매트릭스'의 평점과 같은 평점의 영화 제목들을 가져오기
db.movies.find({'star':same_st})[title]

# 3번째 퀴즈) 매트릭스 영화의 평점을 0으로 만들기
q3) db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})

 

네이버 전체 영화 평점 순위 로보3T에 저장해보기

import requests
from bs4 import BeautifulSoup

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

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')

for tr in trs:
    a_tag = tr.select_one('td.title > div > a')
    if a_tag is not None:
        rank = tr.select_one('td:nth-child(1) > img')['alt']
        title = a_tag.text
        star = tr.select_one('td.point').text
        doc = {
            'rank':rank,
            'title':title,
            'star':star
        }
        db.movies.insert_one(doc)

중간에 오타가 나서 'star':star 부분을 'stat':star라고 했습니다.

아무리 stat으로 실행해도 되지가 않아서 다 삭제하고 다시 이름을 바꿔서 추가했습니다....

 

3주차 마무리 과제

import requests
from bs4 import BeautifulSoup

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

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)

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

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    a_tag = tr.select_one('td.info > a.title.ellipsis')
    if a_tag is not None:
        title = a_tag.text.strip()
        rank = tr.select_one('td.number').text[0:2].strip()
        name = tr.select_one('td.info > a.artist.ellipsis').text
        print(rank, title, name)

사실 copy selcetor 하고 필요한 주소를 가져다 쓰는게 아직 익숙하지 않습니다. 하나를 하면 바로 테스트를 가지는 습관을 가져야 할 것 같습니다. ex) console.log()

여기서 가장 핵심인 포인트는 strip()과 text[0:2]인 것 같습니다. 

먼저 text[0:2]를 없이 삽입하면 전체의 text가 나와 순위와 관계없는 다른 text인 바로 아래 있는 변동순위가 나왔습니다. 그래서 문자열로 필요한 text만 가져다가 사용했습니다.

그리고 strip()은 스파르타에서 알려줬지만 궁금해서 검색을 해봤습니다. 불필요한 whitespace(띄어쓰기(' '), 탭('\t'), 엔터('\n') 등) 제거한다고 합니다. 

왼쪽이 text[0:2]와 strip()을 안했을 때 오른쪽이 완성된 코드 실행

 

추가적으로 아직 시작도 안한 느낌이고 주차 마무리 일지는 그 주차가 끝나는 대로 바로 써야할 것 같습니다. 부랴부랴 2주차를 쓸 때 약간 내용이 부족하고 소스코드로만 도배를 한 느낌이라서 바쁘더라도 강의는 수강하고 바로바로 복습을 해줘야 하겠습니다.