💻 3주차 개발일지

mingguriguri·2022년 4월 5일

FE 개발일지 스파르타코딩클럽 웹개발

[스파르타코딩클럽] 웹개발 종합반💻 개발일지

목록 보기

3/6

진도표
01 - 02 복습
03 - 06 파이썬 기초 공부
07 - 08 파이썬_크롤링
09 - 14 mongoDB

1 ~ 2. 파이썬, gitbash 설치하기 & 2주차 복습

로딩후 바로 호출하기

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

function listing() {
console.log('화면 로딩 후 잘 실행되었습니다');
}

//별 출력. 숫자 입력->별 개수대로 나오도록
let star_image = '⭐'.repeat(star)

초반에 해놓은 카드박스는 empty()함수를 이용해 가려주거나 지우기
$('#cards-box').empty()

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

        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/web/api/movie",
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    //왜 for문으로 도는 걸까?
                    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)
                    }

                }
            })
        }

3 ~ 6. 파이썬

새 프로젝트 - 위치를 내가 원하는 파일위치로 - 기본 인터프리터는 38이 들어간 것으로, main.py 웰컴 스크립트 생성 스크립트는 해제

=> 새로 만들기 - 파이썬

문법 (변수, 자료형, 함수, 조건문, 반복문)

자바스크립트에서 배운 것과 비슷하나, 조금 더 직관적
괄호를 이용해서 구분하지 않고:으로 줄맞춤으로 내용물을 구분함
반복문
- 리스트 이용

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0
for fruit in fruits:
	if fruit == '배':
    	count += 1
        
print(count)

--결과--
3

딕셔너리 이용

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:
    if person['age'] > 20:
        print(person['name'])

--결과--
carry
ben

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

requests -> html 가져오기
beatuifulsoup (가져온 html 에서 제목을 쉽게 찾게 해줌) (설정에서 bs4 패키지 설치)

크롤링 기본 스니펫

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'}
//하단 url만 필요할 때 바꿔쓰면 됨
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

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

# 코딩 시작

외울 필요 X 필요할 때 복사해서 필요한 부분 고쳐쓰기

실습 참고 페이지: 네이버 영화 페이지

beatiful soup 쓰는 방법 (파이썬 문법X)

select_one() : 하나만 사용

ex) 밥정

title = soup.select_one('#old_content > table > tbody > tr:nth-child(2) > td.title > div > a ')
print(title.text)

결과 -> 밥정

select() : 여러 개 선택

#old_content > table > tbody > tr:nth-child(3) > td.title > div > a
#old_content > table > tbody > tr:nth-child(4) > td.title > div > a
이렇게 #old_content > table > tbody > tr까지는 공통되었다는 것을 알 수 있다. 실행하면 리스트 형태를 확인할 수 있다.

따라서 리스트니까, for문을 돌려준다.

movies = soup.select('#old_content > table > tbody > tr')

for movie in movies:
    a = movie.select_one('td.title > div > a')
    # none 은 가로선. 따라서 none을 제외해주고 가야 함
    if a is not None:
        print(a.text)

실행결과

이런 식으로 영화 이름이 쭉 나온다!

08. Quiz. 웹스크래핑 크롤링 연습

배운 것을 토대로 '순위'와 '평점'을 크롤링하기

Q. 아래와 같이 보이면 완성!

힌트
movie.select_one() 이용!

A. 완성코드

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

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

# 코딩 시작
# 공통된 부분
movies = soup.select('#old_content > table > tbody > tr')

for movie in movies:
    a = movie.select_one('td.title > div > a')
    # none 은 가로선. 따라서 none을 제외해주고 가야 함

    if a is not None:
        # 다른 부분 뒤에 있는 공통부분 적기
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        star = movie.select_one('td.point').text
        print(rank, title, star)

실행결과

09. DB개괄

DB는 왜 쓰는 것일까?
-> 나중에 잘 찾기 위해서
(방 정리 하는 이유, 교보문고에서 책이 정리되는 이유와 일맥상통)

DB는 index로 데이터들이 정렬되어 있음

DB의 2가지 종류
1) SQL - 정해진 칸이 있음
장 - 정형화되어 있음, 찾을 때 빨리 찾을 수 있음
단 - 유연한 대처 어려움

2) NoSQL (Not Only SQL)- 정해진 칸이 없음
그때그때마다 쌓임 -> 유연한 대처 가능 (초기 서비스, 초기 스타트업에서 많이 사용)
ex) mongoDB

DB란?
데이터를 잘 쌓고 잘 가져오기 위한 프로그램
(요새는 Cloud형태가 트렌드!)
수업에서는 최신 클라우드 서비스 mongoDB Atlas를 사용

10-11. mongoDB 시작, 연결하기

접속하기 위해선 두가지 패키지 필요!!

pymango, dnspython

pymongo 기본코드

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta
url은
여기에 있는 url로 연결하면 됨
password는 내가 설정한 비번으로!

데이터 들어갔는지 확인하는 법

python에서

from pymongo import MongoClient
client = MongoClient('mongodb+srv://minjeong:rPfksakfdl1!@cluster0.mtbw8.mongodb.net/myFirstDatabase?retryWrites=true&w=majority')
db = client.dbsparta

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

db.users.insert_one(doc)

Browse Collection클릭

이렇게 결과물 확인을 할 수 있다. users는 python코드에서 db.users.insert_one(doc)에 있는 users에 해당한다.

12. pymongo로 DB조작하기

DB연결하기 & 데이터 넣기

#'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.
db.users.insert_one({'name':'bobby','age':21})
db.users.insert_one({'name':'kay','age':27})
db.users.insert_one({'name':'john','age':30})

통상적으로는 이렇게 씀

doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

모든 결과 값을 보기 - pymongo(find)

#모든 데이터 보기
from pymongo import MongoClient
client = MongoClient('mongodb+srv://minjeong:rPfksakfdl1!@cluster0.mtbw8.mongodb.net/myFirstDatabase?retryWrites=true&w=majority')
db = client.dbsparta

all_users = list(db.users.find({}))

for user in all_users:
    print(user)

결과

#id 이하 부분은 나오지 않는다
all_users = list(db.users.find({},{'_id':False}))

for user in all_users:
    print(user)

# 모든 데이터 뽑아보기
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)

특정 결과 값을 뽑아 보기 - pymongo(find_one)

user = db.users.find_one({'name':'bobby'})
print(user)

수정하기 pymongo(update_one)

# 오타가 많으니 이 줄을 복사해서 씁시다!
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
#users에 들어가서 업데이트. 조건 : name이 bobby를 바꿔. set : age를 19로 변경하라
user = db.users.find_one({'name':'bobby'})
print(user)

삭제하기 (거의 안 씀) - pymongo(delete_one)

db.users.delete_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'})
print(user)

요약! 4가지 기능 위주!!(저장, 찾기, 바꾸기, 지우기)

# 저장 - 예시
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.

import requests
from bs4 import BeautifulSoup

#🌟db연결하기!
from pymongo import MongoClient
client = MongoClient('mongodb+srv://minjeong:rPfksakfdl1!@cluster0.mtbw8.mongodb.net/myFirstDatabase?retryWrites=true&w=majority')
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.naver?sel=pnt&date=20210829',headers=headers)

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

# 코딩 시작
# 공통된 부분
movies = soup.select('#old_content > table > tbody > tr')

for movie in movies:
    a = movie.select_one('td.title > div > a')
    # none 은 가로선. 따라서 none을 제외해주고 가야 함

    if a is not None:
        # 다른 부분 뒤에 있는 공통부분 적기
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        star = movie.select_one('td.point').text

	#🌟10~13강에서 배웠던 부분을 토대로, doc생성!!
        doc = {
            'title':title,
            'rank':rank,
            'star':star
        }
        db.movies.insert_one(doc)

14. Quiz

진행사항과 상관없이 한번 더 다시 들어서 혼자 실습해봐야겠다는 생각이 들었다...

3번

15. 과제

📃 지니뮤직의 1~50위 곡을 스크래핑 해보세요.
지니뮤직사이트 바로가기

이렇게 되면 완성임

힌트
0) 출력 할 때는 print(rank, title, artist) 하면 됩니다!
1) 앞에서 두 글자만 끊기! text[0:2] 를 써보세요!
2) 순위와 곡제목이 깔끔하게 나오지 않을 거예요. 옆에 여백이 있다던가, 다른 글씨도 나온다던가.. 파이썬 내장 함수인 strip()을 잘 연구해보세요!

HW 제출 코드

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://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

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

# 코드 시작

#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number
#body-content > div.newest-list > div > table > tbody > tr:nth-child(2) > td.number

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

for music in musics:
    # 다른 부분 뒤에 있는 공통부분 적기
    rank = music.select_one('td.number').text[0:2].strip()
    title = music.select_one('td.info > a.title.ellipsis').text.strip()
    artist = music.select_one('td.info > a.artist.ellipsis').text

    print(rank, title, artist)

느낀 점

좋은 점

알찬 수업입니다! 웹 개발에 필요한 FE부분과 BE부분을 조금이라도 다뤄서 만족스럽습니다.

아쉬운 점

넓은 범위를 좁게 배우는 느낌입니다! 넓게 골고루 배우는 건 좋지만, 익히는 시간이 훨씬 짧게 느껴집니다. 연습문제를 더 주거나 아니면 강의를 더 오랜 시간 볼 수 있도록 하면 좋을 것 같습니다.

별점 (5점만점) : ⭐⭐⭐

배운 점

1. 파이썬
학교 수업에서 배운 파이썬과는 다르게 실전에서 배우는 거를 바로 접한 느낌이라 좋았다. 혼자서 웹페이지를 만들 때는 어떤 패키지를 써야 할지 다소 막막할 것 같지만 그래도 '이런 식으로 하는 거구나'를 많이 느꼈다. 이런 감 조차 없었기에 새로워서 좋았다.
나름 학교에서 수업 들었다고 자만하고 있었는데 다 모르는 부분이라서 따라가긴 힘들었지만 유익했던 것 같다.

파이썬 리마인드 : 크롤링
나에겐 다소 어려운 개념이라 여러번 반복해야 할 것 같다!
select(), select_one()

2. DB
mongoDB 까는 부분부터 애먹었다. 강의가 예전버전이라서 어떻게 해야 할지 감이 안 와서 시간이 꽤 오래 걸렸다.
그래도 어찌저찌,,, 강의대로 따라가긴 했다. 이런 게 온라인수업의 단점인 것 같다. 바로바로 질문을 할 수 없는 것. 질문해도 답변을 기다려야 하는 것.

나중에도 mongoDB를 활용할 수 있으려나?

mongoDB 리마인드 : 4가지 주요 기능 (저장, 찾기, 수정하기, 삭제하기)

# 저장 - 예시
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'})

사용할 때 DB의 어느 위치에 있는지 꼭 확인할 것!

3. 과제
크롤링하는 과제였다. 앞에 DB배운다고 다 까먹었어서 막막했다. 전에 했던 hello.py를 참고하여 코드를 작성했다.
강의 듣고 따라할 때는 모르는데, 직접 해보면 더 많이 배워 가는 것 같다.

mingguriguri

To be "irreplaceable"

이전 포스트

💻 2주차 개발일지

다음 포스트