2월 20일
-웹개발반 복습
1. 다큐먼트레디 제이쿼리
<script>
$('#document').ready(function () {
})
</script>새로고침 끝나자마자 원하는 값으로 준비 되어 있게 하는 코드
2. 저번에 배운 fetch로 가져와서 내꺼에 데이터 붙이는 코드
<script>
function hey() {
fetch("주소주소주소").then(res => res.json()).then(data => {
let seoul = data['Realtimedata']['seoul']
$('#q1').empty()
seoul.forEach((a) => {
let temp = a['temperature']
let wthr = a['weather']
let hum = a['humidity']
let temp_html = `<tr>
<td>${temp}</td>
<td>${wthr}</td>
<td>${hum}</td>
</tr>`
$('#q1').append(temp_html)
})
})
}
</script>그리고 이런 거 하기 전에 <head></head>에 JQuery 기본태그 붙어있어야 함
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>별모양 붙이기 태그 (별이 몇 갠지 데이터는 숫자로 표현되어 있다는 전제)
let star = a['star']
let star_image = '⭐'.repeat(star)
3. 몽고DB 사용해서 백엔드 만들기
1) 파이썬 다운로드 > 설치 때 add python 3.8 to path 꼭 체크박스 하기
2) 윈도우는 깃배쉬도 설치해야 함. Gitbash > install 쭉~~ 딴거 만질거없음
3) 바탕화면에 pythonprac 폴더 생성 > 비스코에서 hello.py 파일 생성 > 비스코에서 확장 기능 python 설치
4) 터미널 > 새 터미널 > 터미널 기본 프로필 선택 > Git Bash > 이렇게 해두고 터미널에 알록달록한 글자들 뜨고 시작
5) 파이썬은 라이브러리(남이 만든 프로그램)가 강력한데, 라이브러리 설치하는 법:
인터프리터3.8.6으로 기본 선택 후 > 터미널에 입력 python -m venv venv > 3.8.6 누르고 venv 선택 > 새 터미널에서 venv 선택 > 이제 venv 공구상자에서 라이브러리 꺼내쓰게 됨.
6) 자바스크립트 제이쿼리에서 fetch의 역할을 하는
파이썬의 리퀘스츠 라이브러리 설치하기 > pip install requests
그리고 기본 코드를 써야 함
import requests # requests <--! 라이브러리 설치 필요 !-->
r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()
-SQL반 복습
1. 초반에 배우고 안써서 까먹은 문법이 있었따
select * from checkins
where week in (1,3)이러면 위크 1주차, 3주차 코멘트만 추출할 수 있음!
2월 21일
-웹개발반 복습
1. 웹 스크래핑(크롤링): 우선 라이브러리가 필요. **크롤링이란: 웹에 접속해서 데이터를 솎아내서 가져오는 일
웹에 접속하는 일= requests 사용, 데이터를 솎아내는 일= bs4 사용
pip install bs4이렇게 beautifulSoup4 라이브러리를 깔아야 한다.
그렇게 하면 아래와 같은 코딩이 됨.
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')
ㄴ 그담에 그 데이터를 솎아낼 준비를 해서
print(soup)
ㄴ 찍어보자그런 다음 프린트 자리에 다시
a = soup.select_one('')
ㄴ 작은 따옴표 자리에 뭔가를 넣으면 a라는 이름으로 그걸 솎아낼 수 있다.위에껀 하나만 가져올 때고, 여러개를 가져와야할 때는 아래 처럼.
trs = soup.select('')이제
웹사이트에서 갖고 오자 하는 것 우클릭 > 검사> 카피 > 카피셀렉터
한 두어줄 카피셀렉터로 가져와서 구경한다.
#old_content > table > tbody > tr:nth-child(2)
#old_content > table > tbody > tr:nth-child(3)
ㄴ 요렇게 구경해보면
#old_content > table > tbody > tr
요기부분이 공통인 걸 알 수 있다.
그럼 이걸 아래 ('') 안에다가 넣으면 된다.
trs = soup.select('')응용해보면 예시 아래처럼 할 수 있다.
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a')
if a is not None:
print(a.text)주의할 건, class ="title" 처럼 명찰이 지명된건 .title 이런식으로 쩜지명으로 타고 들어가고
<a alt = 어쩌구></a> 이런 alt 같은 속성은 a['alt'] 이런식으로 꺽쇠로 타고 들어간다.
===========================================================================
서버(데이터베이스) 만들어보기
몽고디비 사용
몽고디비 사용하려면 내 컴퓨터에서도 2개의 라이브러리가 필요
-pymongo
-dnspython
**certification 오류가 뜰 때 해결법
certifi 라이브러리를 설치해주면 인증오류 문제를 우회할 수 있다.
먼저 터미널에 pip install certifi 설치해 주고,
import certifi
ca = certifi.where()
ㄴ 이렇게 임포트 해주고
client = MongoClient('mongodb+srv://sparta:test@cluster0.wzq1kwb.mongodb.net/?retryWrites=true&w=majority', tlsCAFile = ca)
ㄴ 이렇게 파이몽고의 디비몽고 연결 코드에서도 맨 뒤에 , tlsCAFile = ca 추가
저장하고 터미널에서 파이썬 파일 실행 하면 끝=========================================================================
본격 pymongo 이용법.
1. 몽고디비에 데이터를 하나 저장하기 코드
doc = {
'name':'영수',
'age':24
}
db.users.insert_one(doc)2. 몽고디비에서 데이터를 CRUD 해보자. Creat Read Update Delete
-R 전부 다 꺼내오기
all_users = list(db.users.find({},{'_id':False}))
for a in all_users:
print(a)
ㄴ특별히 반복문으로 본 이유는 list 형식의 데이터였기 때문에. ㅎㅎ
ㄴfind({},{'_id':False})에서 find 안에 있는 {}는 조건을 넣는 자리. 내가 뭘 찾으려는지 세부 조건.
ㄴ{'_id':False}는 결과값에 _id 라는 값이 붙어서 나오는 걸 제거해주는 역할.-R 하나만 갖고오기
user = db.users.find_one({})
print(user)- U 저장된 데이터 하나를 변경하기
db.users.update_one({'name':'영수'},{'$set':{'age':19}})- D 저장된 데이터를 하나 삭제하기
db.users.delete_one({'name':'영수'})복습하는 겸 정리해보면,
# 저장 - 예시
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'})크롤링 할 때 특별한 기능
.text[0:2]
ㄴ 앞에서 두글자까지만 끊자. 결과값이 지저분할 때 씀
.text.strip()
ㄴ 결과값이 문장일 때 문장의 앞 뒤로 지저분하게 붙은 공백들을 제거하라는 뜻.
-SQL 복습
2-1~ 2-7
select count(*) from table
select min(숫자필드) from table
select max(숫자필드) from table
select sum(숫자필드) from table
select avg(숫자필드) from table
select * from table
group by
order by 필드명
2월 22일
웹개발반 복습
-서버(API)만들기: 폴더 만들기 > app.py파일 만들기 > 가상환경venv설치 > flask 라이브러리 설치
통상적으로 플라스크 프레임웍을 쓸 때, 가장 기본이 되는 파이썬 파일 이름을 app.py라고 쓴다.
>venv랑 동급으로 폴더 templates 만들기>그밑에 파일 index.html 만들기(프론트엔드부분이될것)
>app.py 파일로 가서 윗줄에 , render_template 기능 추가
from flask import Flask, render_template
app = Flask(__name__)-GET 요청은 주소창에 쳐서 Read 기능을 주로 하고, POST요청은 데이터의 생성, 업데이트, 삭제 할 때 사용한다.
-클라이언트(브라우저)의 요청 > API가 심부름한다 > 데이터 > API > 클라이언트에게 반환
**Flask 프레임웍이란: 웹페이지를 찍어내는 공장 역할
-Flask프레임웍으로 API를 만들고, 사용하는 과정에서 두 가지 기능이 필요함 Flask의 request와 jsonify 기능.
from flask import Flask, render_template, request, jsonify ㅡ>>>요로케 기능을 쓸거라고 첫 줄에 꼭 써줘야한다.
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)그럼 app.py가 백엔드가 되고
index.html이 프론트엔드가 된다.
작동순서는
프론트엔드에서 클라이언트가 버튼 클릭
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>버튼에 설정되어있던 함수 save_order()가 작동하면서,
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"])
});
}
ㄴfetch를 작동시켜 백엔드의 '/mars' 창구로 요청서를 보냄그러면 요청서가 백엔드로 가서,
@app.route("/mars", methods=["POST"])
def mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
ㄴ이렇게 고객이 입력한 이름,주소,평수 데이터를 받아서
doc = {
'name':name_receive,
'address':address_receive,
'size':size_receive
}
db.mars.insert_one(doc)
ㄴ세가지 데이터들을 합쳐서 doc로 만들고 파이몽고를 사용하여 데이터서비스 몽고디비에 저장.
return jsonify({'msg':'화성땅 구매 요청이 저장되었습니다!'})
ㄴ다 했다는 알림 메시지를 json형식의 데이터로 만들어 프론트에 보냄그럼 프론트엔드에서
fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data["msg"])json형식의 데이터를 착착착착 평소하듯이 일련의 단계를 거쳐서 데이터화 하고 백엔드에서 부탁했던 감사인사 "msg"의 값을 알러트.
끝.
- 고객이 입력값을 써넣는 칸을, 저절로 깨끗히 리셋되도록 하는 코드
window.location.reload()이걸 fetch의 alert 밑에다가 넣는다.
SQL 복습
생활코딩
'About coding > Weekly I learned' 카테고리의 다른 글
| [WIL]2023년 3월 19일~25일 (0) | 2023.03.26 |
|---|---|
| [WIL]2023년03월12~18일 (1) | 2023.03.20 |
| [WIL]2023년 2월 12일~18일: Jquery 기본코드 한 줄, 부트스트랩 기본코드 (0) | 2023.02.17 |
| [WIL]23년 1월 15일~21일: AWS로 배포하는 방법 (0) | 2023.01.16 |
| [WIL]23년 1월 8일~14일: 서버 만드는 법 flask (0) | 2023.01.14 |
