[스파르타코딩클럽] 웹 개발 종합반 - 1 ~ 3주차 정리

해당 글은 "스파르타코딩클럽 웹개발 종합반" 수료 후 각 주차 별 중요한 부분을 회고하여 복습하기 위해 작성한 글임

 

[1주차]

1주차는 PyCharm 설치와 HTML, CSS, Javascript 에 대한 기초를 잡아주는 강의가 진행되었음

Bootstrap 이 적용된 index.html 샘플 파일을 강의에서 제공해주었으며,

1주차 과제로는 아래와 같은 예시화면과 기획서(레이아웃)를 참고하여 모든 배운 내용을 복습할 수 있었음

기획서(레이아웃) , 예시화면

 

[2주차]

2주차는 Javascript에 대해 다시 한 번 복습하고 JQuery, Ajax 에 대한 실습 위주로 강의가 진행되었음

JQuery import : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

JQuery로 id 값을 통해 특정 요소를 가리키는 방법에 대한 실습과 퀴즈를 먼저 진행하고

JSON과 함께 서버-클라이언트 통신에 대한 개념을 정리해주는 시간을 가졌음

JSON은 Key:Value로 이루어져 있으며, 실제 OpenAPI 내 JSON을 보며 진행되었음 - 서울시 미세먼지 OpenAPI

Ajax를 이용하여 GET 방식으로 OpenAPI 내 데이터를 가져오는 실습을 통해 Ajax의 기본 골격을 사용해보았음

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

2주차 과제로는 달러-원 환율 API를 통해 Ajax의 GET 방식으로 받아와 화면에 표기하는 과제가 주어짐

환율 API 내 JSON

 

[3주차]

3주차 부터 본격적으로 파이썬과 데이터베이스(mongoDB)를 사용하기 시작하였음

파이썬 기초 문법 및 패키지 설치에 대한 강의를 시작으로 본격적으로 파이썬 코딩이 시작되었음

Requests 라이브러리를 통해 OpenAPI로부터 JSON을 받아오는 실습을 함으로써 웹크롤링에 대한 사전준비를 하였음

bs4 (BeautifulSoup) 라이브러리를 사용하여 타겟 URL인 네이버 영화로부터 HTML을 받아오는 실습을 하였음

 

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 = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        print(rank,title,star)

 

robo 3T 세팅과 함께 DB에 대한 설명을 하는 시간을 가졌음 

 

[RDBMS vs NO-SQL]

RDBMS(SQL)
행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사합니다.
데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것입니다.
그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이할 수 있습니다. ex) MS-SQL, My-SQL 등

No-SQL
딕셔너리 형태로 데이터를 저장해두는 DB입니다.
고로 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 됩니다.
자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있습니다. ex) MongoDB

 

DB에 대한 개념을 정리한 후 pymongo 패키지 설치 후 사용하는 실습이 진행되었음

 

from pymongo import MongoClient           # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta                      # 'dbsparta'라는 이름의 db를 만듭니다.

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

 

이후 앞의 requests, bs4 라이브러리를 이용한 크롤링 결과를 mongoDB에 insert 하는 실습을 진행하였음

기존 크롤링 코드의 반복문에서 결과를 출력하는 대신에 document를 만들어 한줄씩 insert 하는 코드로

변경만 하면 되었기에 이해하는데 어렵지 않았음

 

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient           # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta                      # 'dbsparta'라는 이름의 db를 만듭니다.

# 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 = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        doc = {
            'rank' : rank,
            'title' : title,
            'star' : star
        }
        db.movies.insert_one(doc)

 

3주차 과제로는 지니뮤직의 1~50위 곡을 스크래핑 하는 과제가 주어졌음

네이버 영화와 같이 깔끔하게 추출이 되지 않아서 strip() 함수로 공백을 없애고

'문자열[0:2]' 와 같은 형태의 문자열 추출을 함께 사용하여야 했음

 

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=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:
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    rank = tr.select_one('td.number').text[0:2].strip()
    artist = tr.select_one('td.info > a.artist.ellipsis').text
    print(rank, title, artist)