*폴더 안 app.py 파일 생성 > 폴더안에 templates 폴더 생성 > templates 폴더 안 index.html 파일 생성
-가상환경, 패키지 설치(가상환경 왜 잡아? 남이 만든 라이브러리 다운로드, 다운받을 통이 있어야하는데 그게 가상환경)
*새터미널 > python -m venv venv 엔터하고 파이썬 버전 venv로 변경 > (venv)라고 뜨면 활성화 완료
*터미널 > pip install flask pymongo dnspython(여러개 쓸 때는 띄어쓰기)/+크롤링필요할때 requests bs4 총 5개
-app.py, index.html 뼈대 만들기
불러오기랑 저장하기 중 저장하기 먼저 만들어라
GET : 데이터 조회(나중에 불러오기)
POST : 데이터 생성, 변경, 삭제 요청할 때 쓰임(먼저 서버 만들기 ex.app.py) : 완성하면 DB 확인하기
-og태그
static 폴더 아래에 이미지 파일을 넣고,
각자 프로젝트 HTML의 <head>~</head> 사이에
아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있습니다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
-AWS Elastic Beanstalk으로 배포
*배포 명령어
- 터미널 준비하기 -
mkdir deploy
cp app.py deploy/application.py
cp -r templates deploy/templates
pip freeze > deploy/requirements.txt
cd deploy
- application.py 세팅하기 -
application = app = Flask(__name__)
app.run()
- 패키지 설치하기 -
pip install awsebcli
- 보안 자격증명 -
eb init
- 초기 설정 -
eb create myweb
- 코드 수정 & 업데이트 -
eb deploy myweb
cd deploy하기 전에 clear하기
ed init
Select a default region : 10 (seoul)
AWS Access Key ID [None]: 발급된 액세스 키 ID (복사 붙여넣기)
AWS Secret Access Key [None]: 발급된 비밀 액세스 키 (복사 붙여넣기)
Enter Application Name (default is "deploy") : enter
It appears you are using Python. Is this correct? : Y
Select a platform branch (default is 1) : enter
Do you want use Codecommit? : N
---
Cannot setup CodeCommit because there is no Source Control setup, continuing with initialization
Do you want to set up SSH for your instances? : Y
Select a keypair : [Create new Keypair]
Type a keypair name : enter
Enter passphrase : enter
Enter same passphrase again : enter
-python : 매우 직관적, 할 수 있는 것 많음, 필요한 것들은 구글링해서 찾아보기!
*기초 문법
*변수 & 기본연산
a = 3 # 3을 a에 넣는다
b = a # a를 b에 넣는다
a = a + 1 # a+1을 다시 a에 넣는다
num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다
# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게?
*자료형
숫자, 문자형
name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
num = 12 # 숫자가 들어갈 수도 있고,
is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.
#########
# 그리고 List, Dictionary 도 들어갈 수도 있죠. 그게 뭔지는 아래에서!
리스트 형 (Javascript의 배열형과 동일)
a=['사과','배','감']
print(a[0]) #사과
Dictionary 형 (Javascript의 dictionary형과 동일)
a= {}
a= {'name':'영수','age':24}
# a의 값은? {'name':'영수','age':24}
# a['name']의 값은? '영수'
*함수
-함수의 정의 - 이름은 마음대로 정할 수 있음!
# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7
# 참고: 자바스크립트에서는
function f(x) {
return 2*x+3
}
# 파이썬에서
def f(x):
return 2*x+3
y = f(2)
y의 값은? 7
-함수의 응용
def hey():
print("헤이")
#파이썬에서 함수 생성시, 들여쓰기는 중요해요!
hey() #헤이
def sum(a,b,c):
return a+b+c
result = sum(1,2,3)
print(result) #6
*조건문 : if / else
age = 25
if age > 20:
print("성인입니다")
else:
print("청소년입니다")
*반복문 : 리스트의 요소들을 하나씩 꺼내쓰는 형태. 즉, 무조건 리스트와 함께
fruits = ['사과','배','감','귤']
for fruit in fruits:
print(fruit)
# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.
ages =[5,10,13,23,25,9]
for a in ages:
if a>20:
print("성인입니다")
else:
print("청소년입니다")
-크롤링
가상환경 활성화(venv) > pip install bs4
*기본세팅
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.naver?sel=pnt&date=20210829',headers=headers)
# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')
#############################
# (입맛에 맞게 코딩)
#############################
*selsct / select_one 태그 안의 텍스트를 찍고 싶을 땐 → 태그.text 태그 안의 속성을 찍고 싶을 땐 → 태그['속성']
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.naver?sel=pnt&date=20210829',headers=headers)
# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')
# select를 이용해서, tr들을 불러오기
a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')
trs = soup.select('#old_content > table > tbody > tr')
# movies (tr들) 의 반복문을 돌리기
for tr in trs:
# movie 안에 a 가 있으면,
a = tr.select_one('td.title > div > a')
if a is not None:
# a의 text를 찍어본다.
print (a.text)
# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')
soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')
# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')
# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')
항상 정확하지는 않으나, 크롬 개발자도구 참고 가능
원하는 부분에서 마우스 오른쪽 클릭 → 검사
원하는 태그에서 마우스 오른쪽 클릭
Copy → Copy selector로 선택자를 복사할 수 있음
- MongoDB(>No-SQL :딕셔너리 형태로 데이터를 저장해두는 DB, 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있음)
*패키지 설치
터미널을 열고, 마지막 경로가 pythonprac 인지 확인
(venv) 로 가상환경이 활성화 되었는지 확인
pip install pymongo, dnspython 입력하고 엔터
*기본 코드
from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://sparta:test@cluster0.brkky9q.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
certifi에 노란줄이 뜨면 터미널에 pip install certifi 명령어 입력!!
(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'})
-javascript : 웹을 움직이게 하는 코드(모든 웹서버는 HTML + CSS + javascript
unction hey()라는 규칙으로 hey라는 함수를 만들었고, alert(’안녕’)이라는 작업을 원할 때마다 반복적으로 수행
*console.log() : 매번 버튼 클릭해서 실행하는 것은 불편 하기에 alert > console.log로 바꿔 확인/마우스오른쪽클릭>검사
*변수 : let으로 변수 선언, 직관적, 알아볼 수 있게
ex) let a = 2, a = 'bob' //문자열은 작은 따옴표
*리스트 : 순서를 지켜서 가지고 있는 형태, 첫 번째 값은 [0]
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4
*딕셔너리 : 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27
*리스트 + 딕셔너리
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15
-jQuery : html 뼈대 선택해서 쉽게 조작 (=bootstrap, 남들이 만든 코드모음, 라이브러리)
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것!
(그렇게 때문에, 쓰기 전에 "임포트(미리 작성된 Javascript 코드를 가져오는 것)"를 해야한다)
*반복문 : forEach(() => {})
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
*조건문 : if (조건) {} else {}
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
*반복문+조건문
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
*append() :
temp_html 이라는 변수를 만들 때는 백틱(``) ,
태그 안에 들어갈 값은 ${},
통째로 넣을 html요소를 $('#아이디').append(변수:html)
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty()
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((a)=>{
let name = a['name']
let age a['age']
let temp_html = `<p>${a}</p>`
$('#q2').append(temp_html)
})
-Fetch : 짧은 코드로 요청을 보내고 받아옴
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
ex)기본
fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
// 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})
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'])
})
})
ex)응용
<style>
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
});
})
}
</script>
2. 참고 자료, 해당 내용이 활용되는 부분
3. 오늘 새로 배운 내용
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
