버킷리스트 미니프로젝트

  • DB 업데이트를 할 때 밸류가 숫자인 것을 찾으려면 int() 를 붙여줘야한다. 붙여주지 않으면 문자열을 찾는다.
  • API는 데이터저장 POST, 업데이트 POST, 보여주기 GET 세 개가 필요하다.

og 태그

<head>에 넣어서 고쳐 쓰면 됀다.

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

내 프로젝트를 서버에 올리기

  • AWS Elastic Beanstalk이용.
  • 관리 콘솔에서 보안 자격 증명
  • 엑세스키 만들기. 메모장에 잘 저장 해두기.
  • 메모장 잘 보고 따라하기.
  • 과금 돼지 않게 인스턴스를 잘 종료한다.

 

VS Code Python 패키지 설치하기

  • pip install flask (서버를 구동시켜주는 편한 코드 모음)

flask 시작 코드

render_template (HTML을 가져온다.)

from flask import Flask ,render_template
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

GET 요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

jsonify

  • 사용자가 json data를 내보내도록 제공.

GET 요청 확인Fetch 코드

function hey() {
            fetch("/test").then(res => res.json()).then(data => {
                console.log(data)
            })
        }

 

POST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST 요청 확인 Fetch 코드

 let formData = new FormData();
        formData.append("title_give", "블랙팬서");

        fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
            console.log(data)
        })

mars 프로젝트

Fetch POST

  function save_order() {
            let name = $('#name').val()
            let address = $('#address').val()
            let size = $('#size').val()

            let formData = new FormData();
            formData.append('name_give', name)
            formData.append('address_give',address)
            formData.append('size_give' , size)

            fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                alert(data["msg"])
                window.location.reload()
            });
        }

Fetch GET

 $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch('/mars').then((res) => res.json()).then((data) => {
                $('#order-box').empty()
                let rows = data['order_list']
                rows.forEach((a) =>{
                    let name = a['name']
                    let address = a['address']
                    let size = a['size']
                    let temp_html = ` <tr>
                                        <th scope="col">${name}</th>
                                        <th scope="col">${address}</th>
                                        <th scope="col">${size}</th>
                                    </tr>`
                    $('#order-box').append(temp_html)
                })  
            })
        }

bs4 og

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/bi/mi/basic.naver?code=191597',headers=headers)

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

ogtitle = soup.select_one('meta[property="og:title"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
print(ogtitle, ogimage, ogdesc)

 

VS Code Python 가상환경 만들기

  • 터미널 gitbash로 선택
  • 인터프리터를 설치한 파이썬으로 선택.
  •  터미널에 python -m venv venv 작성.
  • 인터프리터를 venv 로 선택.

VS Code Python 패키지 설치하기

  • pip install requests (Fetch의 역할을 한다.)
  • pip install bs4 (데이터를 골라내는 역할을 한다.)
  • requests로 데이터를 불러오고 bs4로 데이터를 골라내면 크롤링이 된다.
  • pip install dnspython (도메인이나 호스트 이름을 ip주소 해석. 그래야 pc가 알아들음.)
  • pip install pymongo (파이썬에서 mongoDB를 조작하기 위한 패키지.)

 

requests 기본 골격

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

r = requests.get('URL')
rjson = r.json()

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'}
data = requests.get('URL',headers=headers)

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

# 코딩 시작

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'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')
#old_content > table > tbody > tr:nth-child(2)
#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

#old_content > table > tbody > tr:nth-child(2) > td:nth-child(1) > img

#old_content > table > tbody > tr:nth-child(2) > td.point
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
    title = tr.select_one('td.title > div > a')
    if title is not None:
        a =title.text 
        b = tr.select_one('td:nth-child(1) > img')['alt']
        c = tr.select_one('td.point').text
        print(b,a,c)

pymongo 기본골격

from pymongo import MongoClient

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

replace 태그

  • 교체한다는 뜻.
  • "\n","" (줄바꿈을 공백으로 교체함)
  • " ","" (띄어쓰기를 공백으로 교체함)

 

 

 

 

 

 

 

Javascript : 웹을 움직이게 하는 코드, 브라우저가 유일하게 알아듣는 언어.

jQuery : html을 선택해서 쉽게 조작

Fetch : 서버에서 내려오는 데이터를 가져다 사용

 

Javascript, jQuery

<script> 에서 바로 css를 줄 수 있다.

$('#q1').css('font-size','40px')

<script> 반복문 예시

let fruits = ['사과','배','감','귤']
    fruits.forEach((a) => {
        console.log(a)
    })

 

function checkResult() { 
    $('#q1').empty()
    let fruits = ['사과','배','감','귤','수박']
    fruits.forEach((a) => {
        let temp_html = `<p>${a}</p>`
        $('#q1').append(temp_html)
})
}
  $('#q2').empty()
    people.forEach((a) => {
        let name = a['name']
        let age = a['age']
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`
        $('#q2').append(temp_html)
    })

Fetch

기본골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
            console.log(data)
        })

예시

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
            })
        })

필요한 부분 변수로 지정해주고, temp_html 붙여주기

function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                })
            })
        }

조건문 줘서 css 적용시키기.

function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']

                    let temp_html = ``
                    if (gu_mise > 35){
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })
        }

자동 로딩 함수

$(document).ready(function () {

}

HTML = 뼈대, CSS = 꾸미기

정적 웹페이지 : 회원가입, 로그인 등 없이 보기만 하는 것. 예를 들면 청첩장.

github 이용해서 html 배포하기

  • repositories 중 배포할 거 선택.
  • Settings > pages > Branch 선택 > 옆에 있는 Save 버튼 > 파일 선택(파일명은 반드시 index.html)
  • 배포하고서 index를 수정하고 commit 해주면 수정되어서 배포된다.

웹의 동작 원리

  • 브라우저의 역할 : 요청을 보내고, 요청한 파일을 받아 그려준다.
  • 요청은 서버에서 만들어 놓은 API라는 창구에 보낸다. 창구는 예로 /naver.com 같은 형식이다.

Visual Studio Code

  • 한글, Word 같은 프로그램. 코드를 짤 수 있도록 도와준다.
  • 확장 기능인 Live Server를 이용해 변경사항이 실시간으로 브라우저에 적용되는 것을 볼 수 있다.
  • Shift + Alt + F : 줄 정렬 되는 단축키

tags.html

  • 수 많은 태그들이 존재하고 외우는게 아니라 복사해서 가져다쓰고 내 입맛에 맞춰 고쳐쓴다.
  • 이하는 잘 모르는 태그들

<ul>

  • <ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용
  • <ul> 요소에 속하는 각 아이템은 <li> 요소를 사용
  • 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현
  • CSS의 list-style-type 속성을 사용하여 마커의 종류를 변경

<hr>

  • <hr>태그는 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용

CSS

  • 지칭 할 수 있는 이름이 필요하다.
  • class 선택자로 이름을 붙여줄 수 있다.
  • <style>을 .css 파일로 분리할 수 있다. <head> 부분에 코드를 추가하면 된다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
  • 이하는 잘 모르는 태그들

box-shadow: 1px 2px 3px 4px grey:

  • 박스에 그림자 효과를 주는 태그.
  • 1px 부분은 오른쪽
  • 2px 부분은 아래쪽
  • 3px 부분은 사방으로
  • 4px 부분은 그림자의 길이
  • grey 부분은 색깔

 

 

+ Recent posts