[항해99] TIL 웹개발 종합반 3주차 D-40

[수업 목표]

1. 파이썬 기초 문법을 안다.
2. 원하는 페이지를 크롤링 할 수 있다.
3. pymongo를 통해 mongoDB를 제어할 수 있다.

느낀점

처음으로 배우는 기초지식이 없는 파트였다.

 

물론 어렴풋이 듣기는 했지만 하는 건 처음이었는데

 

처음 하는거라 조금 어려울뿐 많이 사용해서 익숙해지면 어려울게 하나도 없다.

 

모든 기술과 기능, 스택들은 많이 안써서 안 익숙할 뿐, 계속 활용하고 만들며 응용하다보면 익숙해지고 그러면 자연스럽게 숙달된다는 것을 깨달았다.

 

백엔드쪽의 지식을 알고나니 아직 4주차를 하지 않았지만 벌써부터 둘을 응용해서 여러가지의 많은 서비스들을 만들 수 있을 것 같다.

 

참고로 이번의 숙제는 꽤 어려웠는데

 

rank에서 몇계단 상승 같은 걸 지우는 데 사용한 text[0:2]나

 

rank와 title,artist에서 공백을 제거하기 위해 사용한 strip은 어렵지 않았다.

 

하지만 title중 저스틴비버의 peaches가 19금이라 그게 span태그로 묶여있었다.

 

더군다나 악랄했던건 그 위의 순위의 title이 롤린 (Rollin’) 이라 “ ’ ” 가 혹시 문제이지 않나 테스트도 해야 했던것이다.

 

차근차근 print를 찍어보며 디버깅을 하다보면 19금 이 문제라는 사실을 알 수 있고 이걸 replace를 통해 그 부분만 없애 print 해주면 문제는 해결된다.

 

사실 문제 해결이라 보기는 힘든게 이번 과제는 그냥 print만 하면 되는거라 이렇게 해결했지만 만약 DB에 저장하거나 원본을 수정해야 하는거면 얕은 복사 깊은 복사 관련하여 좀 더 수정해야할 여지가 있다.

01. 3주차 설치

• python3.8.6 버전 다운로드
  • 3.9는 충돌이 있을 수도 있고 버전문제는 전통적으로 꽤나 나올 수 있는 문제이기에 3.8.6으로 시작
• (window만)git bash 설치
• 앞으로 배울것 ⇒ python, 크롤링, mongoDB

02. 연습 겸 복습 - 스파르타피디아에 OpenAPI 붙여보기

• 다시 한번 전에 했던 과정들을 전체적으로 복습해본다.
• 우선 로딩했을때 자동으로 실행될 수 있도록 jqeury를 이용해 구현해준다.

$(document).ready(function () {
            listing();
        });

• 위에서의 listing 함수 내부에 ajax콜 함수를 만들어 준다.

function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/web/api/movie",
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    for (let i = 0; i<rows.length; i++){
                        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)

                        let temp_html = `<div class="col">
                                            <div class="card">
                                                <img src="${image}"
                                                     class="card-img-top" alt="...">
                                                <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)
                    }
                }
            })
        }

1. 이 함수에서 눈여겨 볼 점은 원래 동기적으로 만들어 놨던 값을 empty로 날리고
2. 새롭게 url을 api로 받아온 후
3. 그 api에 있는 값들을 response 를 rows변수에 저장하고
4. rows배열에서 하나씩 바꾸어 백틱기호를 이용해 html형식으로 만들어줘서
5. append로 #cards-box에 삽입한다는 점이다.

03. 파이썬 시작하기

• 파이썬을 설치한다는 것의 의미
  • 일종의 번역팩을 설치한다고 생각하면 됩니다. 컴퓨터는 101010001 과 같은 언어만 알아듣는다고 했지요? 파이썬 문법으로 된 것을 101010001로 변환해줄 수 있도록, 번역 패키지를 설치하는 것입니다.
• 우선 바탕화면의 프로젝트폴더에 새롭게 파이선연습폴더를 만들어준다.
• 파이참에서 파일 → new project를 클릭하여 그 경로를 지정한다.
• 이때 기본 인터프리터는 python38이 되도록 한다.
• 프로젝트 폴더내에 hello.py를 만들어주고 안에 다음내용을 넣어 실행해본다.

print('Hello, sparta')

04. 파이썬 기초공부

• 변수, 기본연산, 자료형, 함수, 조건문, 반복문, 리스트, 딕셔너리에 대해 배웠다.
• 사실 js보다 훨씬 직관적이기에 어려운것은 없다.
• 다만 조금 생각해둘것은
  • 파이썬은 들여쓰기가 매우 중요하다. 함수나 조건문의 표현을 들여쓰기로 한다.
  • : 가 잘 쓰이는데 : 다음에는 그 안의 내용이 들어오며 들여쓰기를 한다.
  • 파이썬의 반복문은 처음부터 리스트와 같이쓸것을 염두해두고 만들어졌다

05. 파이썬 패키지 설치하기

• 패키지는 모듈을 모아놓은 단위이며 이 패키지의 묶음을 라이브러리라고 할 수 있다.
• 이 외부 라이브러리를 사용하기 위해서 패키지를 설치한다.
• 즉, 패키지 설치 = 외부 라이브러리 설치라고 봐도 무방하다.
• 가상환경이란 일종의 프로젝트 공구함이다.
• 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다.
• 이렇게 함으로써 각기 다른 프로젝트들을 관리할때 계속 업그레이드 혹은 다운그레이드를 하지 않아도 된다.
• project interpreter 화면에서 + 버튼을 누르면 아래 창이 뜹니다!

• requests를 검색하기!

06. 패키지 사용해보기

• 설치했던 Requests 라이브러리를 사용하려면 import를 쓰면된다.
• 그 다음 가져온 requests를 get을 통해 r에 넣고 아래와 같이 사용한다.

import requests # requests 라이브러리 설치 필요

r = requests.get('<http://spartacodingclub.shop/sparta_api/seoulair>')
rjson = r.json()

• 이제 html에서 사용했던 것처럼 사용하면 응용이 가능하다.

import requests # requests 라이브러리 설치 필요

r = requests.get('<http://spartacodingclub.shop/sparta_api/seoulair>')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
	print(gu['MSRSTE_NM'], gu['IDEX_MVL'])

07. 웹스크래핑(크롤링) 기초

• 네이버 영화 페이지를 크롤링 해보자
• bs4(beautifulsoup4)라는 패키지를 추가 설치해야 한다.

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

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

• 지금부터는 파이썬의 문법이 아닌 우리가 설치한 bs4의 문법이다.
• 태그 안의 텍스트를 찍고 싶을 땐 ⇒ 태그.text
• 태그 안의 속성을 찍고 싶을 땐 ⇒ 태그[’속성’] 이다.
• 반복문 내에서 a 태그가 있다면

a_tag = movie.select_one('td.title > div > a')

• 이렇게 가져와 주고

if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)

• 를 통해 a_tag가 None이 아니면 text를 print한다.
• beautifulsoup 내 select에 미리 정의된 다른 방법을 알아봅니다

# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

• 항상 정확하지는 않으나, 크롬 개발자도구를 참고할 수도 있습니다.

1. 원하는 부분에서 마우스 오른쪽 클릭 → 검사
2. 원하는 태그에서 마우스 오른쪽 클릭
3. Copy → Copy selector로 선택자를 복사할 수 있음

08. Quiz_웹스크래핑(크롤링) 연습

• 크롤링을 연습한다. 익숙하지 않기에 실수가 있을 수 있다.
• 결국 이 bs4를 이용해 크롤링 할때는
  • 웹에서 검사를 통해 선택자 복사하는것
  • 복사해온 선택자를 잘 설계해 반복문을 만드는것
  • 그 반복문 내에서 원하는 내용을 가져오는것(속성의 값은 [’속성’], 단순 텍스트는 .text)

09. DB개괄

• DB는 왜 쓰는 것일까?
  • 나중에 잘 찾기 위해서
  • Index라는 순서로 정렬되어 있어서 찾기 쉽다.
• DB의 두 가지 종류
  • RDBMS(SQL)
    • 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사
    • 데이터가 적재된 상황에서 갑자기 수정하기는 쉽지않다.
    • 하지만 정형화되어 있는 만큼 데이터의 일관성과 분석에 장점이 있다.
    • 주로 대기업
    • MS-SQL, My-SQL
  • No-SQL
    • 딕셔너리 형태로 데이터를 저장
    • 데이터 하나하나마다 같은 값 필요없음
    • 자유로운 데이터 적재는 가능, 하지만 일관성 부족
    • 주로 스타트업
    • MongoDB
• DB의 실체
  • DB는 ppt 같이 하나의 프로그램이다.
  • 하지만 유저몰림, DB백업, 모니터링의 이유로 요즘은 클라우드로 한다.
  • mongoDB Atlas를 사용해보자.

10**. mongoDB 시작하기**

1. 가입하기
2. python 화면 체크하고 넘어가기
3. Shared를 클릭하고 넘어가기
4. 한국으로 체크하고, Create Cluster 클릭하기

5.연결 준비하기

1. Allow Access from Anywhere 클릭 → Add IP address 클릭
2. Username, Password를 아래와 같이 입력 → Create Database User 클릭
3. Choose a connection method 클릭

Username: test 
Password: sparta

 

11. mongoDB 연결하기

• pymongo와 dnspython이라는 패키지가 필요하다.
• pymongo는 mongoDB를 조작하기위한 라이브러리이다.
• atlas 에서 driver는 python, version은 3.6 or later로 한다.

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta

doc = {
    'name':'bob',
    'age':27
}

db.users.insert_one(doc)

• 이렇게 해주면 우리가 만든 DB에 데이터를 넣는게 된다.
• Cluster0의 Collections를 확인하면 데이터가 잘 들어온것을 확인할 수 있다.

12. pymongo로 DB조작하기

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

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

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

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

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

13. 웹스크래핑 결과 저장하기

• 전에 만들었던 영화 웹 크롤링을 방금 만든 몽고DB에 저장해본다.
• 크롤링 코드에 pymongo 기본 코드의 위의 세줄을 넣어준다.
• 다음 pymongo에서 했던대로 doc 딕셔너리를 만들어주고
• db.movies.insert_one(doc) 로 DB에 넣어준다.

14. Quiz_웹스크래핑 결과 이용하기

• 영화제목 '가버나움'의 평점을 가져오기
• target_movie = db.movies.find_one({'title':'가버나움'}) print(target_movie['star'])
• '가버나움'의 평점과 같은 평점의 영화 제목들을 가져오기
• target_movie = db.movies.find_one({'title':'가버나움'}) target_star = target_movie['star'] movies = list(db.movies.find({'star':target_star})) for movie in movies: print(movie['title'])
• '가버나움' 영화의 평점을 0으로 만들기
• db.movies.update_one({'title':'가버나움'},{'$set':{'star':'0'}})

15. 3주차 끝 & 숙제 설명

• 지니 뮤직의 1~50위 곡을 스크래핑 해본다.
• 순위 / 곡 제목 / 가수를 스크래핑한다.
• 단 순위에서는 뒤에 몇계단 상승, 하락 같은 필요없는 텍스트가 추가적으로 자식 태그 요소로 붙어있기에 text[0:2]를 써서 날려준다.
• 순위와 곡제목에서 공백이 많이 뜨기때문에 strip()을 사용하여 공백을 다 날려준다.