Ssa!
(sparta)웹개발 종합반 4주차 복습 본문
웹개발 종합반 4주차를 들었다. 목차를 설명하자면
- Flask (프레임워크)
- 모두의 책리뷰(미니 프로젝트)
- 나홀로메모장(미니 프로젝트)
Flask(프레임워크)
Flask에 대해 설명하자면 주변에서 많이 들었던 Node.js, Django 같은 프레임워크이다.
프레임워크라 하자 프레임워크에 대한 어떤 장 단점이 있을까? 하는 궁금증이 생겼다. 앞으로의 부트캠프와 과제에서 python을 위주로 다루니 python 프레임 워크(3가지)만 정리해봤다.
1. Django
부트캠프에서 주로 사용할 프레임워크다.
- 장점: 백엔드를 만들면 관리자 페이지를 제공한다. 다시말해 직접 행동하는 것이 적으며 대중화가 잘 되어있다.
- 단점: 제공되는 관리자 페이지를 따로 관리해야하며 python 프레임워크 중 제일 느리다.
2. Flask
과제와 공모전에서 주로 사용한 프레임워크다.
- 장점: 밑 바닥부터 웹을 짤 수 있으며 미니멀 api부터 설계가 가능하다.
- 단점: 장점이 곧 단점이 될 수 있는 것이 밑 바닥부터 웹을 짜야 한다. 그리고 제공되는 기능이 적을 수 있다.
ex) 공모전에서 flask로 웹페이지를 만들었을 때 SMTP로 회원가입을 하면 메일 전송 기능을 구현하려고 했다.
몇시간이고 구글링을 전전했지만 기능이 제대로 작동되지 않고 제공하는 기능도 적다는 것을 느꼈다.
3. FastAPI
파이썬을 사용하면서 처음 들어보는 프레임워크(?)다.
- 장점: 최근에 나와서 가장 바르고 친화적이며 비동기 프로그래밍을 지원한다
- 단점: 최근에 나와 국내에 정보량이 별로없다. 그치만 영어 문서를 읽기 좋아한다면 추천한다.
아마 저 셋 중에 내가 주로 사용할 것 같은 프레임워크는 Django일 것이다. 단점이 관리자 페이지를 따로 관리 해야한다지만 나는 백엔드의 꽃은 관리자 페이지라고 생각하여 단점이라고 느껴지지 않는다. 유일한 단점이라고 하면 느린 점(?) 아직 다량의 트래픽과 트랜잭션을 다루지 못하여 잘 모르겠지만 아마 다룰 일 생긴다면 그 때는 다른 프레임워크를 찾을지도...
Flask의 폴더 구성
Flask의 서버를 만들 때 가장 중요한 것은 폴더 구성이다
프로젝트 폴더
ㄴ static 폴더(이미지, css파일을 넣음)
ㄴ templates 폴더(html파일을 넣음) -> 보통 html 파일을 만들 때 index.html 로 naming 한다.
ㄴ app.py(서버 구동 파일)
Flask GET/POST 기본 코드
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!'})GET 요청 확인 Ajax코드
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})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!'})POST 요청 확인 Ajax코드
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})
위 코드의 연습 대상으로 미니 프로젝트를 했다. 미니 프로젝트에 대한 것을 전부 적으면 복잡해지니 4주차 숙제를 통해 과정을 적었다. {미니 프로젝트: 모두의 책리뷰, 나홀로메모장}
간단한 과정으로
API를 설계
POST으로 API를 저장해야한다.
1. 클라이언트와 서버 연결 확인하기((alert로 확인)
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기(동작)
GET으로 저장한 API를 보여준다
1. 클라이언트와 서버 연결확인하기(alert로 확인)
2. 서버부터 만들기
3. 클라리언트 만들기
4. 완성 확인하기(동작)
이 순서가 매우 중요하다
1주차에서 했던
우선 API 설계부터 해보자
1. GET으로 이름, 주소, 전화번호, 시간대를 받아 mongodb에 저장
2. POST로 mongodb에 있는 이름, 주소 전화번호, 시간대가 순서대로 작성되게 불러오기
설계를 끝마치고 위의 순서대로 작성을 하면 끝난다.
index.html
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>원페이지쇼핑몰</title>
<link
href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Do Hyeon', sans-serif;
}
.mytitle {
width: 500px;
height: 400px;
margin: auto;
background-image: url("http://kr.people.com.cn/NMediaFile/2014/0922/FOREIGN201409221055000177283683513.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.span_font_size {
font-size: 15px;
font-weight: bold;
}
.font_align {
width: 700px;
margin: auto;
}
.btn_align {
width: 100px;
margin: auto;
}
.rate-color {
color: rgb(61, 58, 232);
}
</style>
<script>
$(document).ready(function () {
q1(), order_listing();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let date = response['date']
let rate = response['rate']
let temp_html = `
<li class="rate-color">날짜: ${date} 환율: ${rate}원 </li>`
$('#names-q1').append(temp_html)
}
})
}
function order_listing() {
// 주문목록 보기 API 연결
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
let user_info = response['all_user_info'];
for (let i = 0; i < user_info.length; i++) {
let name = user_info[i]['name'];
let addr = user_info[i]['addr'];
let number = user_info[i]['number'];
let hour = user_info[i]['hour'];
let temp_html = `<tr>
<th scope="row">${name}</th>
<td>${addr}</td>
<td>${number}</td>
<td>${hour}</td>
</tr>`
$('#orders-box').append(temp_html)
}
}
})
}
function order() {
let name = $("#name").val();
let addr = $("#addr").val();
let number = $("#number").val();
let hour = $("#hour").val();
$.ajax({
type: "POST",
url: "/order",
data: {
name_give:name,
addr_give:addr,
number_give:number,
hour_give:hour
},
success: function (response) { // 성공하면
alert(response["msg"]);
window.location.reload();
}
})
}
</script>
</head>
<body>
<div class="mytitle"></div>
<div class="font_align">
<p></p>
<h3>집사 서비스
<span class="span_font_size">
가격: 50,000원/1시간
</span>
</h3>
<ul id="names-q1"></ul>
<p></p>
<h6>집안일로 피로한 당신! 단 몇 시간이라도 현실에서 벗어나고 싶습니까? 우리 집사 서비스로 그 현실에서 벗어나게 해드리겠습니다.
</h6>
<br></br>
<h3>
주문하기</h3>
<div class="form-group row">
<label for="inputname" class="col-sm-2 col-form-label">주문자 성함</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="name" placeholder="주문자 성함">
<p></p>
</div>
</div>
<div class="form-group row">
<label for="inputaddr" class="col-sm-2 col-form-label">주소</label>
<div class="col-sm-10">
<input type="addr" class="form-control" id="addr" placeholder="주소">
<p></p>
</div>
</div>
<div class="form-group row">
<label for="inputnumber" class="col-sm-2 col-form-label">전화번호</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="number" placeholder="전화번호">
<p></p>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">시간</label>
</div>
<select class="custom-select" id="hour">
<option selected="selected">-- 시간대를 선택하세요 --</option>
<option value="12:00 ~ 13:00">12:00 ~ 13:00</option>
<option value="13:00 ~ 14:00">13:00 ~ 14:00</option>
<option value="14:00 ~ 15:00">14:00 ~ 15:00</option>
<option value="15:00 ~ 16:00">15:00 ~ 16:00</option>
<option value="16:00 ~ 17:00">16:00 ~ 17:00</option>
<option value="17:00 ~ 18:00">17:00 ~ 18:00</option>
</select>
</div>
</div>
<br></br>
<div class="btn_align">
<button onclick="order()" type="button" class="btn btn-primary">신청하기</button>
</div>
</div>
<br></br>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">주소</th>
<th scope="col">전화번호</th>
<th scope="col">시간대</th>
</tr>
</thead>
<tbody id="orders-box">
</tbody>
</table>
</div>
</body>
</html>app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbhomework
## HTML 화면 보여주기
@app.route('/')
def homework():
return render_template('index.html')
# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
name_receive = request.form['name_give']
addr_receive = request.form['addr_give']
number_receive = request.form['number_give']
hour_receive = request.form['hour_give']
doc = {
'name':name_receive,
'addr':addr_receive,
'number':number_receive,
'hour':hour_receive
}
db.dbhomework.insert_one(doc)
return jsonify({'msg': '신청이 완료되었습니다.'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
user_info = list(db.dbhomework.find({}, {'_id': False}))
return jsonify({'all_user_info': user_info})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)보완할 점)
오늘 숙제를 하면서 id값을 지정해주는 것과 서버와 클라이언트 간 코드 작성 할 때의 순서가 매우 중요하다고 생각한다.
아직 멀었지만 천천히 적용해가면 익숙해질 것이라고 생각한다.
'스파르타 내일배움캠프 > 내일배움캠프 사전과제' 카테고리의 다른 글
| 파이썬 사전과제 ) 파이리 드래곤볼 깨기! (0) | 2022.08.19 |
|---|---|
| (sparta)웹개발 종합반 1 ~ 5주차 회고 (0) | 2022.08.18 |
| (sparta)웹개발 종합반 3주차 복습 (0) | 2022.08.16 |
| (sparta)웹개발 종합반 2주차 복습 (0) | 2022.08.16 |
| (sparta)웹개발 종합반 1주차 복습 (0) | 2022.08.11 |
