1~3 주차 배운점 요약
1~3주차 배운점:
- 웹사이트 뼈대 만들기(html) , 꾸미기 (css) , 동적인 작동 (JS)
- j query 와 ajax 사용해서 api 호출하기
- mongo db 클라우드에 db 구축하기
- 파이썬으로 api 통해, DB 접속 & 조작하기
4~5주차 배울점:
- 로컬 개발 환경- 내 컴퓨터에 서버를 만들고 크롬에서 테스트를 해보는것
- 배포하기
4주차 배운점
Flask 로 서버 만들기
- 서버를 구동시켜주는 하나의 프레임 워크
- flask 를 사용하려면 패키지 설치 필수!
- static 폴더 (css, image 파일)
- templates 폴더 (html 파일)
- app.py 파일에 파이썬 코드를 짠다
- templates 폴더에 만들어둔 index.html 파일을 사용해서 로컬호스트 5000에 서버를 만들어보자
from flask import Flask, render_template #render_template 사용해서 index.html 파일 렌더링하기
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)API 만들기
- http methods (클라이언트는 http method 종류를 통해 서버에게 어떤 요청을 하는지 알려준다)
- GET: 데이터 조회를 요청할 때 사용
- 데이터 전달 url 뒤에 물음표를 붙여 key=value 로 전달
- 예)네이버영화 랭킹페이지에서 20221010 현재상영 영화순위를 보여줘
- https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=cur&date=20221010
- POST: 데이터 생성, 업데이트, 삭제 할때 사용
- 예) 회원가입, 비밀번호 수정 등
- html body에 key:value 값으로 데이터 전달
- GET: 데이터 조회를 요청할 때 사용
- ajax를 사용하려면 jquery를 임포트 해야한다 (html 파일에 ajax 코드를 작성한다
- HTML 파일은 프론트엔드
- app.py 파일에 api 요청 코드를 작성한다
- flask server 백엔드
GET 요청 확인 Ajax
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})
</script>
// /test라는 창구에서 title_give 라는 키 값으로 "봄날은간다"라는 데이터를 가져가는 API 요청이다.
// 요청이 잘 완료되면 서버가 주는 리턴값 'msg': '이 요청은 GET!' 콘솔에 찍어 준다 GET 요청 API 코드
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']) # <- test 라는 창구
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)
# ajax 요청을 실행하고 데이터를 보기쉽게 전달하기 위해 request 와 jasonify를 임포트 한다
# /test 라는 창구에서 title_give라는 이름으로 요청을 받아서 title_receive라는 변수에 넣어주고 print () 한다
# ajax 요청이 success 이면 'msg': '이 요청은 GET!' 를 리턴해준다
POST 요청 확인 Ajax
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})
// /test title_give 라는 '봄날은간다'라는 데이터를 가져간다
// 요청 success 하게 되면 콘솔에 서버가 돌려주는 값 'msg': '이 요청은 POST!'을 찍어준다 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!'})
#/ test라는 창구에서 post를 받는 요청은 여기로 와라
# 버튼을 누르면 hey()이 작동하고 /서버는 test POST 요청으로 프론트에서 title_give 데이터 가져와 title_recieve 라는 변수로 저장해서 그 데이터 값을 print 한다
# 함수가 success하게 작동하면 jsonify 된 형식으로 'msg': '이 요청은 POST!' 값을 리턴 한다 4주차 어려운점:
강의 자료에서 너무 휘리릭 컴퓨터, 프로그래밍 개념을 훑고 지나갔다.
롸..? 조금더 친절한 설명이 있으면 좋겠다… 구글링을 하다보니 내가 안다고 생각한것들을 정확한 개념 정리가 안된 것 같아 하나씩 다시 정리하고 넘어가야겠다.
https://developer.mozilla.org/en-US/docs/Web
코드 오류
- app.py 파일에 내 mongodb 연결을 안했더니 데이터가 저장되지 않았다
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.v0amks8.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.dbsparta- api POST 로 불러온 데이터를 db에 저장하기위해 doc = {}, db.orders.insert_one(doc) 를 안해서 저장이 안됐다
@app.route("/mars", methods=["POST"])
def save_order():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
print(name_receive, address_receive, size_receive)
return jsonify({'msg': '구매 완료!'})
# 올바른 코드
@app.route("/mars", methods=["POST"])
def save_order():
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': '구매 완료!'})
웹개발자가 되고 싶은 수딩의 코딩 일지