들어가며
본격적으로 Flask를 배우는 과정이다.
Spring boot만 써보다가 python의 웹 프레임워크인 Flask를 배우게 되니 벌써 기대가 된다.
이번 주차는 Flask의 사용법을 익히고 Spring boot와 기본적으로 얼마나 다른 지 느껴보는 시간도 갖게 될 수 있겠다!
여담이지만 IDE를 Eclipse만 쓰다가 Pyharm을 갑자기 쓰려니 적응이 안되고 보기가 힘들다.. 얼추 구조는 IntelliJ랑 비슷하게 생겨서 추후에 IntelliJ에 적응하는 데에도 도움이 될 것 같다.
시작하기 전 기본 세팅
- DB 연결 - 패키지 설치
pymongo : mongoDB를 사용할 수 있게 해주는 패키지
dnspython : 서버를 사용할 수 있게 해주는 패키지
flask : 웹 서버 개발을 위한 프레임워크
certifi : certificate verify failed 에러를 잡가 위해 필요한 패키지
- html연결 - 기본 폴더 및 파일 세팅
static : 이미지, css 파일을 넣는 폴더
templates : html 파일을 넣는 폴더
app.py : 서버 코드 작성을 위한 파이썬 파일
- app.py 기본코드
from flask import Flask, render_template, request, jsonify 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)
import하는 것들
Flask : Flask 라이브러리
render_template : html 파일을 연결해주는 라이브러리
request : request 요청을 받아주는 라이브러리
jsonify : flask에서 json으로 데이터를 보낼 수 있게 해주는 라이브러리
Flask를 사용한 ajax 통신
서버
@app.route("매핑할 주소", methods=["요청방식"])서버에 요청할 주소와 요청방식(GET, POST 등)을 정의한다.
def test():
sample_receive = request.form['클라이언트에서 받아올 데이터']
return jsonify({'msg':'post 성공'})request.form을 이용하여 클라이언트에서 보내준 데이터를 받아올 수 있다.
jsonify로 클라이언트에 json형태의 데이터를 돌려줄 수 있다.
DB
mongoDB를 사용하기 위한 기본 코드 작성
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.2mrec.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
DB에 저장할 데이터들을 json형태로 변수에 담고 insert해준다.
doc = {'sample_receive': sample_receive}
db.저장할db도큐먼트명.insert_one(doc)
클라이언트
index.html파일 생성 후 기본코드 작성
여기서는 기본코드는 생략하고 ajax코드만 작성해본다. html 기본코드 백만번 했잖아요~~!!
function ajax_test() {
sample_give = $('#sample').val()
$.ajax({
type: '요청 메소드',
url: 'API 호출 주소',
data: {'sample_give':sample_give},
success: function(data) {
alert(data['msg'])
}
)}
}
예시 코드 - 화성땅 공동구매
index.html
<!-- html 코드 생략 -->
function save_order() {
let name = $('#name').val();
let address = $('#address').val();
let size = $('#size').val();
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give:name, address_give:address, size_give:size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
<!-- html 코드 생략 -->
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.2mrec.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def web_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)
return jsonify({'msg': '주문완료'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
코드를 실행해보면 DB에 데이터가 잘 담겨있는 걸 확인할 수 있다.
조각 기능 - meta 태그
조각 기능이란?
실제 api 설계를 하기 전, 혹은 설계 후에 테스트 코드를 작성해보는 것
meta 태그란?
meta 태그를 이해하기 앞서 meta의 의미 보자.
메타는 영어의 접두사로, 다른 개념으로부터의 추상화를 가리키며 후자를 완성하거나 추가하는 데에 쓰인다. 인식론에서 접두사 meta는 "~에 대해서"라는 뜻으로 쓰인다. 이를테면 메타데이터는 데이터에 대한 데이터이다.
출처: 위키백과
그렇다면 meta 태그는 태그에 대한 데이터(정보)로 이해할 수 있다.
일반적인 html태그들은 문서가 어떻게 보이는가를 규정하고 이를 이용해 우리는 마크업을 한다. 이와 달리 meta 태그는 html에 어떤 데이터, 속성이 있는 지 등을 담고있는 태그이다.
우리는 html파일을 생성할 때 기본으로 만들어주는 템플릿에서 meta 태그를 볼 수 있는데 바로 이 코드이다
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>참고로 이 코드는 언어의 인코딩 방식을 UTF-8로 지정해주는 코드이다
meta 태그는 <head></head> 안에 들어와야하는 점과 닫는 태그가 따로 존재하지 않는다. 이게 무슨 말이냐면
예를 들어 <div> 태그는</div> 처럼 '닫는' 코드가 항상 따라 붙는다. 하지만 meta 태그의 경우 <meta></meta> 처럼 닫는 '태그'가 존재하지 않으므로 <meta ... /> 이렇게 슬래시를 붙여주거나 생략하는 형태로 사용해야한다.
meta 태그 크롤링하기
크롤링을 위한 기본 패키지 설치 및 코드 작성
- 패키지
requests : 크롤링을 하기 위해 http를 호출하는 패키지
bs4 : 크롤링해온 텍스트형식의 데이터를 soup형태로 바꿔주는 패키지
- 기본 코드
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')
meta 태그를 가져오는 방법은 기존과 크게 다르지 않다.
크롤링해 올 meta 태그를 검사 > <head>태그 안에서 찾는다.
이 태그를 크롤링 해보자
title = soup.select_one('meta[property="og:title"]')
title_content = soup.select_one('meta[property="og:title"]')['content']
print(title)
print(title_content)
결과
<meta content="보스 베이비 2" property="og:title"/>
보스 베이비 2
아주 간단하게 meta태그의 데이터를 크롤링해왔다.
마치며
새로 알게 된 부분
프로젝트를 할 때 서버에서 에러를 반환할 때 클라이언트에 alert창으로 띄워주고 싶었지만 방법을 몰랐는데 간단하게 json으로 데이터를 돌려준다음 ajax success에서 데이터를 뿌려주면 된다는 걸 깨달았다. 생각보다 간단하고 이미 알고 있었던 내용인데 활용해볼 생각을 못했다. 아직 갈 길이 멀구나...
참고
'Study > TIL' 카테고리의 다른 글
| [TIL] 5/11 항해99 3일 차 - 미니프로젝트 (0) | 2022.05.12 |
|---|---|
| [TIL] 05/10 항해99 2일 차 - 미니프로젝트 (0) | 2022.05.10 |
| [TIL] 05/09 항해99 1일 차 - 미니프로젝트 (0) | 2022.05.10 |
| [TIL] 04/08 항해99 웹개발 종합반 0주 차 : 사전준비 (2) - DB (0) | 2022.04.08 |
| [TIL] 04/08 항해99 웹개발 종합반 0주 차 : 사전준비(1) - Python (0) | 2022.04.08 |
들어가며
본격적으로 Flask를 배우는 과정이다.
Spring boot만 써보다가 python의 웹 프레임워크인 Flask를 배우게 되니 벌써 기대가 된다.
이번 주차는 Flask의 사용법을 익히고 Spring boot와 기본적으로 얼마나 다른 지 느껴보는 시간도 갖게 될 수 있겠다!
여담이지만 IDE를 Eclipse만 쓰다가 Pyharm을 갑자기 쓰려니 적응이 안되고 보기가 힘들다.. 얼추 구조는 IntelliJ랑 비슷하게 생겨서 추후에 IntelliJ에 적응하는 데에도 도움이 될 것 같다.
시작하기 전 기본 세팅
- DB 연결 - 패키지 설치
pymongo : mongoDB를 사용할 수 있게 해주는 패키지
dnspython : 서버를 사용할 수 있게 해주는 패키지
flask : 웹 서버 개발을 위한 프레임워크
certifi : certificate verify failed 에러를 잡가 위해 필요한 패키지
- html연결 - 기본 폴더 및 파일 세팅
static : 이미지, css 파일을 넣는 폴더
templates : html 파일을 넣는 폴더
app.py : 서버 코드 작성을 위한 파이썬 파일
- app.py 기본코드
from flask import Flask, render_template, request, jsonify 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)
import하는 것들
Flask : Flask 라이브러리
render_template : html 파일을 연결해주는 라이브러리
request : request 요청을 받아주는 라이브러리
jsonify : flask에서 json으로 데이터를 보낼 수 있게 해주는 라이브러리
Flask를 사용한 ajax 통신
서버
@app.route("매핑할 주소", methods=["요청방식"])서버에 요청할 주소와 요청방식(GET, POST 등)을 정의한다.
def test():
sample_receive = request.form['클라이언트에서 받아올 데이터']
return jsonify({'msg':'post 성공'})request.form을 이용하여 클라이언트에서 보내준 데이터를 받아올 수 있다.
jsonify로 클라이언트에 json형태의 데이터를 돌려줄 수 있다.
DB
mongoDB를 사용하기 위한 기본 코드 작성
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.2mrec.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
DB에 저장할 데이터들을 json형태로 변수에 담고 insert해준다.
doc = {'sample_receive': sample_receive}
db.저장할db도큐먼트명.insert_one(doc)
클라이언트
index.html파일 생성 후 기본코드 작성
여기서는 기본코드는 생략하고 ajax코드만 작성해본다. html 기본코드 백만번 했잖아요~~!!
function ajax_test() {
sample_give = $('#sample').val()
$.ajax({
type: '요청 메소드',
url: 'API 호출 주소',
data: {'sample_give':sample_give},
success: function(data) {
alert(data['msg'])
}
)}
}
예시 코드 - 화성땅 공동구매
index.html
<!-- html 코드 생략 -->
function save_order() {
let name = $('#name').val();
let address = $('#address').val();
let size = $('#size').val();
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give:name, address_give:address, size_give:size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
<!-- html 코드 생략 -->
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.2mrec.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def web_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)
return jsonify({'msg': '주문완료'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
코드를 실행해보면 DB에 데이터가 잘 담겨있는 걸 확인할 수 있다.
조각 기능 - meta 태그
조각 기능이란?
실제 api 설계를 하기 전, 혹은 설계 후에 테스트 코드를 작성해보는 것
meta 태그란?
meta 태그를 이해하기 앞서 meta의 의미 보자.
메타는 영어의 접두사로, 다른 개념으로부터의 추상화를 가리키며 후자를 완성하거나 추가하는 데에 쓰인다. 인식론에서 접두사 meta는 "~에 대해서"라는 뜻으로 쓰인다. 이를테면 메타데이터는 데이터에 대한 데이터이다.
출처: 위키백과
그렇다면 meta 태그는 태그에 대한 데이터(정보)로 이해할 수 있다.
일반적인 html태그들은 문서가 어떻게 보이는가를 규정하고 이를 이용해 우리는 마크업을 한다. 이와 달리 meta 태그는 html에 어떤 데이터, 속성이 있는 지 등을 담고있는 태그이다.
우리는 html파일을 생성할 때 기본으로 만들어주는 템플릿에서 meta 태그를 볼 수 있는데 바로 이 코드이다
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>참고로 이 코드는 언어의 인코딩 방식을 UTF-8로 지정해주는 코드이다
meta 태그는 <head></head> 안에 들어와야하는 점과 닫는 태그가 따로 존재하지 않는다. 이게 무슨 말이냐면
예를 들어 <div> 태그는</div> 처럼 '닫는' 코드가 항상 따라 붙는다. 하지만 meta 태그의 경우 <meta></meta> 처럼 닫는 '태그'가 존재하지 않으므로 <meta ... /> 이렇게 슬래시를 붙여주거나 생략하는 형태로 사용해야한다.
meta 태그 크롤링하기
크롤링을 위한 기본 패키지 설치 및 코드 작성
- 패키지
requests : 크롤링을 하기 위해 http를 호출하는 패키지
bs4 : 크롤링해온 텍스트형식의 데이터를 soup형태로 바꿔주는 패키지
- 기본 코드
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')
meta 태그를 가져오는 방법은 기존과 크게 다르지 않다.
크롤링해 올 meta 태그를 검사 > <head>태그 안에서 찾는다.
이 태그를 크롤링 해보자
title = soup.select_one('meta[property="og:title"]')
title_content = soup.select_one('meta[property="og:title"]')['content']
print(title)
print(title_content)
결과
<meta content="보스 베이비 2" property="og:title"/>
보스 베이비 2
아주 간단하게 meta태그의 데이터를 크롤링해왔다.
마치며
새로 알게 된 부분
프로젝트를 할 때 서버에서 에러를 반환할 때 클라이언트에 alert창으로 띄워주고 싶었지만 방법을 몰랐는데 간단하게 json으로 데이터를 돌려준다음 ajax success에서 데이터를 뿌려주면 된다는 걸 깨달았다. 생각보다 간단하고 이미 알고 있었던 내용인데 활용해볼 생각을 못했다. 아직 갈 길이 멀구나...
참고
'Study > TIL' 카테고리의 다른 글
| [TIL] 5/11 항해99 3일 차 - 미니프로젝트 (0) | 2022.05.12 |
|---|---|
| [TIL] 05/10 항해99 2일 차 - 미니프로젝트 (0) | 2022.05.10 |
| [TIL] 05/09 항해99 1일 차 - 미니프로젝트 (0) | 2022.05.10 |
| [TIL] 04/08 항해99 웹개발 종합반 0주 차 : 사전준비 (2) - DB (0) | 2022.04.08 |
| [TIL] 04/08 항해99 웹개발 종합반 0주 차 : 사전준비(1) - Python (0) | 2022.04.08 |
