[수업 목표]
- Flask 프레임워크를 활용해서 API를 만들 수 있다.
- '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
- '스파르타피디아' API를 만들고 클라이언트와 연결한다.
느낀점
오늘은 생각보다 어려웠다.
역시 익숙하지 않기에 생기는 문제들이었다.
하지만 그렇기에 재미가 있었다.
응용할 수 있는게, 만들 수 있는 서비스가 무궁무진 해졌다.
지금의 과정이 사실상 풀스택을 정말 핵심만따서 기능들만 배우고 있는것인데
강의가 다 끝나고 나서도 계속해서 응용을 하며 익히고 또 python flask로 하던걸
node.js, express로도 해보고 싶다.
mongoDB도 너무 맘에든다.
익숙하지는 않지만 분명 만드는 재미가 있다.
01. 4주차 오늘 배울 것
- 오늘 배울 것 이야기- 4주차: Flask, 미니프로젝트1, 미니프로젝트2
- 오늘은 HTML과 mongoDB까지 연동해서 서버를 만들어봅니다!
- sparta 폴더 → projects 폴더 아래에, 다섯개 만들고 시작하기
02. Flask 시작하기 - 서버만들기
- sparta → projects → prac 폴더에서 시작!
- 윈도우 : 좌상단File → setting → Python interpreter 맥 : 좌상단Pycharm → Preference → Python Interpreter
- Flask 패키지 설치
- Flask 프레임워크
- 서버를 구동시켜주는 편한 코드 모음.
- 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다.
- 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓습니다!
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
- 이제 크롬에서 http://localhost:5000/ 으로 접속해보세요.
- 종료는 터미널 창에서 ctrl + c
- @app.route('/) 부분을 수정해서 URL을 나눌 수 있습니다!
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is My Page!'
03. Flask 시작하기 - HTML파일 주기
- 기본 폴더구조가 있다.
- 프로젝트 폴더 안에
- ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
- ㄴtemplates 폴더 (html파일을 넣어둡니다)
- ㄴapp.py 파일
- 간단한 index.html 파일을 templates 안에 만들기
function hey(){
alert('안녕!')
}
나는 버튼!- html 파일 불러오기
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
04. Flask시작하기 - 본격 API 만들기
- API는 은행의 창구를 생각해보자
- GET방식과 POST방식이 존재한다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달 → 예: google.com?q=북극곰
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정 → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
- app.py라는 백엔드와 index.html이라는 프론트엔드가 통신을 한다.
- index.html에서는 script태그내에 함수를 만들어 GET 요청 확인 Ajax코드를 만든다.
- app.py에서는 @app.route로 정의되는 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!'})
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})
05. [화성땅 공동구매] - 프로젝트 세팅
- 패키지 설치하기
- 3개 : flask, pymongo, dnspython
06. [화성땅 공동구매] - 뼈대 준비하기
- app.py에 뼈대
- index.html (templates 폴더에다가) 에 뼈대
- 몽고DB 아틀라스 준비
07. [화성땅 공동구매] - POST 연습(주문 저장)
1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)
- 서버에서는 @app_route를 통해 mars_post() 함수를 만들어서 내부에 request로 받고 jsonify를 리턴한다.
@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.orders.insert_one(doc)
return jsonify({'msg': '주문 완료!'})
- 클라이언트에서는 ajax요청을 post방식으로 data에 실어서 보낸다.
- 이때 ajax요청은 save_order함수내에서 선언되고 이것은 버튼에 onclick의 값으로 들어간다.
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()
}
});
}
08. [화성땅 공동구매] - GET 연습(주문 보여주기)
1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기
- 서버는 받을 것 없이 orders 에 주문정보를 담아서 내려주기만 하면 됩니다!
@app.route("/mars", methods=["GET"])
def mars_get():
orders_list = list(db.orders.find({},{'_id':False}))
return jsonify({'orders':orders_list})
- 클라이언트는 응답을 잘 받아서 for문으로
function show_order() {
$('#order-box').empty()
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}
09. [스파르타피디아] - 프로젝트 세팅
**sparta → projects → movie 폴더에서 시작!**
- flask폴더구조 만들어주고
- 패키지를 설치한다.
- 5개 : flask, pymongo, dnspython, bs4, requests
10. [스파르타피디아] - 조각 기능 구현해보기
- 본격적으로 만들기 이전에 우선 사용하려는 기능이 정상적으로 작동하는지 간단히 알아본다.
- URL을 카톡같은데 붙여넣으면 자동으로 나오는 부분들이 있다.
- 그것을 meta태그내의 open graph 줄여서 og라고 하는데 이것을 사용할것이다.
- bs4를 사용해서 영화사이트 전체를 크롤링하고
- 그 중 soup.select_one을 이용해 'meta[property="og:image"]' 를 가져온다.
11. [스파르타피디아] - 뼈대 준비하기
- app.py에는 벡앤드 기본뼈대를
- index.html에는 프론트엔드 기본뼈대를 붙여넣어준다.
12. [스파르타피디아] - POST 연습(포스팅하기)
1. 요청 정보 : URL= /movie, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : url, star, comment
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)
- 서버에는 movie_post 함수를 app.route만들어서 기존에 하던대로 만든다.
- db.movies.insert_one(doc) 로 DB에 저장하는걸 잊지말자
- 클라이언트에서는 url, star, comment를 각각 html에서 id로 불러와 ajax콜로 보내주면 된다.
- 보내주고 나면window.location.reload() 로 새로고침 한번을 해준다.
- 프로젝트를 실행하기 전에 몽고DB에서 기존의 movies를 삭제해준다.
13. [스파르타피디아] - GET 연습(보여주기)
1. 요청 정보 : URL= /movie, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기
- 같은 방식의 API요청과 DB통신을 계속해서 연습하고있다.
- 위에 써져 있는 순서대로 지금까지 배운것을 잘 응용하면 된다.
14. 4주차 끝 & 숙제 설명
**1주차에 완성한 팬명록을 완성해주세요!**
두 가지 기능을 수행해야 합니다.
1) 응원 남기기(POST): 정보 입력 후 '응원 남기기' 버튼클릭 시 주문목록에 추가
2) 응원 보기(GET): 페이지 로딩 후 하단 응원 목록이 자동으로 보이기
아래 완성본을 참고해주세요!
[<http://spartacodingclub.shop/web/homework>](<http://spartacodingclub.shop/web/homework>)
'항해99' 카테고리의 다른 글
| [항해99] TIL 사전과제 스터디 D-37 (0) | 2022.06.04 |
|---|---|
| [항해99] TIL 웹개발 종합반 5주차 D-38 (0) | 2022.06.03 |
| [항해99] TIL 웹개발 종합반 3주차 D-40 (0) | 2022.06.02 |
| [항해99] TIL 웹개발 종합반 2주차 D-41 (0) | 2022.05.31 |
| [항해99] TIL 웹개발 종합반 1주차 D-42 (0) | 2022.05.30 |