비개발자를 위한 웹개발 종합반 3주차

코딩공부/웹프로그래밍 기초 2023. 5. 11. 21:37

지난 시간 복습

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

페이지가 로딩되면 자동으로 실행되는 함수

반복하는 함수: .repeat(횟수)

복습 내용 전문

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");

      * {
        font-family: "Gowun Dodum", sans-serif;
      }
      .mytitle {
        background-color: green;
        color: white;

        height: 250px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
          ),
          url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
        background-position: center;
        background-size: cover;
      }
      .mytitle > button {
        width: 250px;
        height: 50px;

        background-color: transparent;
        border: 1px solid white;
        color: white;

        border-radius: 50px;
        margin-top: 10px;
      }
      .mytitle > button:hover {
        border: 2px solid white;
      }
      .mycomment {
        color: gray;
      }
      .mycards {
        width: 1200px;
        margin: 20px auto 20px auto;
      }
      .mypost {
        width: 500px;
        margin: 20px auto 20px auto;
        padding: 20px 20px 20px 20px;

        box-shadow: 0px 0px 3px 0px gray;
      }
      .mybtn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        margin-top: 20px;
      }
      .mybtn > button {
        margin-right: 10px;
      }
    </style>
    <script>
      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            let number = data["temp"];
            $("#temp").empty();
            $("#temp").text(number);
          });

        fetch("http://spartacodingclub.shop/web/api/movie")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["movies"];
            $("#cards").empty();
            rows.forEach((a) => {
              let title = a["title"];
              let desc = a["desc"];
              let comment = a["comment"];
              let star = a["star"];
              let image = a["image"];

              let star_image = "⭐".repeat(star);

              let temp_html = `<div class="col">
                                <div class="card h-100">
                                  <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").append(temp_html);
            });
          });
      });
    </script>
  </head>
  <body>
    <div class="mytitle">
      <h1>내 생애 최고의 영화들</h1>
      <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
      <button onclick="hey()">영화 기록하기</button>
    </div>
    <div class="mypost">
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">영화 URL</label>
      </div>
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
          <option selected>--선택하기--</option>
          <option value="1">⭐</option>
          <option value="2">⭐⭐</option>
          <option value="3">⭐⭐⭐</option>
          <option value="3">⭐⭐⭐⭐</option>
          <option value="3">⭐⭐⭐⭐⭐</option>
        </select>
      </div>
      <div class="form-floating">
        <textarea
          class="form-control"
          placeholder="Leave a comment here"
          id="floatingTextarea"
        ></textarea>
        <label for="floatingTextarea">코멘트</label>
      </div>
      <div class="mybtn">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
      </div>
    </div>
    <div class="mycards">
      <div id="cards" class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">여기에 코멘트가 들어갑니다.</p>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">여기에 코멘트가 들어갑니다.</p>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">여기에 코멘트가 들어갑니다.</p>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">여기에 코멘트가 들어갑니다.</p>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

이번 주차에 배울 것: python, 크롤링, mongoDB

파이썬으로 서버 만들기

mongoDB로 데이터베이스 다루기

파이썬을 사용하는 이유: 컴퓨터에게 명령을 내리기 위해

파이썬을 설치한다: 명령을 내리기 위해 번역팩을 설치

터미널 -> +버튼 -> 기본 프로필 설정 -> git bash -> 터미널 껐다 켜기

파이썬 실행: 우클릭 -> 터미널에서 파이썬 실행

파이썬 기초

1)변수

a = 2
b = 3
print(a+b)

결과: 5

a = '대한'
b = '민국'
print(a+b)

결과: 대한민국

2)리스트

a = ['사과','배','감']

print(a[0])

결과: 사과

3)딕셔너리

a = {'name': '영수', 'age':24}

print(a)

결과: {'name': '영수', 'age':24}

a = {'name': '영수', 'age':24}

print(a['name'])

결과: 영수

4)함수

def hey():
	print('헤이!')
    
hey()

결과: 헤이!

파이썬에서는 탭으로 줄 맞추는 것이 중요

def sum(a,b,c):
	return a+b+c
    
result = sum(1,2,3)

print(result)

결과: 6

5)조건문

age = 25

if age > 20:
	print('성인입니다')
else:
	print('청소년입니다')

결과: 성인입니다

6)반복문

ages = [5,10,13,23,25,9]

for a in ages:
	print(a)

결과: 5

반복문&조건문

ages = [5,10,13,23,25,9]

for a in ages:
	if a > 20:
    	print('성인입니다')
    else:
    	print('청소년입니다')

라이브러리: 남이 만든 프로그램 사용

프로젝트 별로 사용하는 라이브러리 저장 -> 가상환경

-준비과정-

1)폴더 선택하기

2)인터프리터 설정: 해당 폴더에서 라이브러리를 가져와서 사용

-> vscode 우측하단에 있는 interpreter 또는 버전(파일명) 선택->python 3.8.6선택

-> 터미널에 python -m venv venv 입력 -> 화면 우측하단의 3.8.6 클릭 -> python 3.8.6선택-> 터미널 -> 새 터미널

3) 라이브러리 설치: 터미널에 입력

라이브러리 사용하기: 라이브러리를 만든 사람의 documents확인하기 -> 사용법이 적혀있음

requests 라이브러리 사용하기: fetch의 역할을 함

연습

import requests 

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

rows = rjson['RealtimeCityAir']['row']

for a in rows:
    gu_name = a['MSRSTE_NM']
    gu_mise = a['IDEX_MVL']
    print(gu_name, gu_mise)

라이브러리 제작자의 다큐먼트에 가면 사용법이 있음

beautiful soup 사용하기: 웹페이지의 일부만 쉽게 솎아내도록 함(크롤링)

beautiful soup 다운로드: 터미널에 pip install bs4 입력 후 엔터

크롤링: 웹페이지의 html 중 일부분만 솎아내서 가지고 오는 것

사용: 라이브러리이기 때문에 만든 사람이 정한 규칙을 따르면 됨

연습

import requests
from bs4 import BeautifulSoup

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

원하는 url 삽입

연습:

import requests
from bs4 import BeautifulSoup

URL = "원하는 url 입력"
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(URL, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one('복사한 셀렉터 입력')

print(title.text)

결과: 선택한 부분의 텍스트만 출력하게 된다.

html에서 원하는 부분 우클릭 -> copy selector -> select() 또는 select_one()에 삽입하기

import requests
from bs4 import BeautifulSoup

URL = "원하는 url 입력"
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(URL, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one('복사한 셀렉터 입력')

print(title['href'])

결과: 선택한 부분의 속성(href)만 출력하게 된다.

아래 두 코드는 결과가 동일

title = li.select_one('.link_txt').text
print(title)

title = li.select_one('.link_txt')
print(title.text)

연습 결과물

import requests
from bs4 import BeautifulSoup

URL = "https://movie.daum.net/ranking/reservation"
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(URL, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

lis = soup.select('#mainContent > div > div.box_ranking > ol > li')

for li in lis:
    rank = li.select_one('.rank_num').text
    title = li.select_one('.link_txt').text
    rate = li.select_one('.txt_grade').text
    print(rank, title, rate)

title = li.select_one('.link_txt').text : 리스트(li)에서 클래스가 .link_txt인 내용 하나만 꺼내서 그 중에 텍스트만 title변수에 삽입

검사 탭 -> 왼쪽 상단의 네모와 화살표 아이콘 클릭: 화면에 마우스커서를 갖다대는 걸로 html요소 위치를 찾을 수 있음

원하는 형태가 아닐 경우: .strip() (앞뒤 띄어쓰기 없애줌) / .replace('') (콤마 등을 없애줌) 등을 사용해 클렌징

DB배우기

데이터베이스의 역할: 데이터를 잘 찾게 하는 것

DB의 두가지 종류: SQL(RDBMS) / NoSQL

SQL: 칸이 정해져 있음/사람이 실수할 가능성이 줄어듦, 조금 더 빠르다

NoSQL: 정해진 틀이 없음. 원하는 대로 저장/유연함

요즘의 트렌드: 클라우드 사용

mongoDB회원가입

파이썬에서 mogoDB 연결하기

파이썬 - 내 컴퓨터

mongoDB - 인터넷

라이브러리 필요: pymongo, dnspython

pip install dnspython pymongo 터미널에 입력 + 엔터

pymogo 기본코드

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

url 입력 <- mongoDB 주소 입력, paswd 부분에 비밀번호 입력

pymogo 이용해서 DB 조작하기

데이터는 하나를 가지고 오거나 다 가지고 오거나

모두 가져오기

# 모든 데이터 뽑아보기
all_users = list(db.users.find({},{'_id':False}))

print(all_users[0])         # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for a in all_users:      # 반복문을 돌며 모든 결과값을 보기
    print(a)

{'_id':False}: id를 보지 않겠다

하나 가져오기

user = db.users.find_one({})
print(user)

업데이트 하기

db.users.update_one({'name':'영수'},{'$set':{'age':19}})

영수의 나이를 19세로 바꾸기

삭제하기

db.users.delete_one({'name':'영수'})

영수의 데이터를 없애기

pymongo를 조작하기 위한 파이썬 코드 모음

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ki9erdu.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

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

웹스크래핑 결과 저장하기

requests와 bs4로 가져온 데이터를 mongoDB에 저장하기

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ki9erdu.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

import requests
from bs4 import BeautifulSoup

URL = "https://movie.daum.net/ranking/reservation"
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(URL, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

lis = soup.select('#mainContent > div > div.box_ranking > ol > li')

for li in lis:
    rank = li.select_one('.rank_num').text
    title = li.select_one('.link_txt').text
    rate = li.select_one('.txt_grade').text
    doc = {
        'title':title,
        'rank':rank,
        'star':rate
    }
    db.movies.insert_one(doc)

퀴즈

1) 가버나움의 별점 찾기

movie = db.movies.find_one({'title':'가버나움'})
print(movie['star'])

2) 가버나움과 평점이 같은 영화 찾기

movie = db.movies.find_one({'title':'가버나움'})
target_star = movie['star']

movies = list(db.movies.find({'star':target_star},{'_id':False}))
for a in movies:
	print(a['title'])

3)가버나움의 영화 평점 0으로 만들기

db.movies.update_one({'title':'스즈메의 문단속'},{'$set':{'star':0}})

3주차 숙제

'코딩공부 > 웹프로그래밍 기초' 카테고리의 다른 글

비개발자를 위한 웹개발 종합반 5주차 (0)	2023.05.10
비개발자를 위한 웹개발 종합반 4주차 (1)	2023.05.09
비개발자를 위한 웹개발 종합반 2주차 (0)	2023.04.27
비개발자를 위한 웹개발 종합반 1주차 (0)	2023.04.25

ABOUT ME

백엔드 개발일지 백엔드 개발일지

'코딩공부 > 웹프로그래밍 기초' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'코딩공부 > 웹프로그래밍 기초' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바