이번 강의부터는 AWS사용을 해야하니 아래 글 통해서 가입 및 보안설정 해야합니다.
[버킷리스트] - 프로젝트 세팅
가장 먼저 프로젝트 폴더를 만들고 그 안에 가상환경인 venv를 만든다
python3 -m venv venv
가상환경 활성화 해준다
source venv/bin/activate
필요한 라이브러리를 설치 해준다
pip install flask pymongo dnspython
벡엔드, 프론트엔드 파일 생성후 기본 틀 작성
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)templates > index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<title>인생 버킷리스트</title>
<style>
* {
font-family: "Gowun Dodum", sans-serif;
}
.mypic {
width: 100%;
height: 200px;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypic > h1 {
font-size: 30px;
}
.mybox {
width: 95%;
max-width: 700px;
padding: 20px;
box-shadow: 0px 0px 10px 0px lightblue;
margin: 20px auto;
}
.mybucket {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mybucket > input {
width: 70%;
}
.mybox > li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 10px;
min-height: 48px;
}
.mybox > li > h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox > li > h2.done {
text-decoration: line-through;
}
</style>
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
console.log(data)
alert(data["msg"]);
})
}
function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input
id="bucket"
class="form-control"
type="text"
placeholder="이루고 싶은 것을 입력하세요"
/>
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
</body>
</html>서버 실행해주기
python3 app.py
여기까지 기본 세팅끝
POST,GET 연습하기
[버킷리스트] - POST 연습하기 (버킷리스트 기록)
데이터 명세
localhost:5000에 접속하면 필요한 데이터가 뭔지 바로 확인이 가능하다
버킷리스트 프로젝트는 '버킷 리스트' 하나가 필요한 것을 알수 있다.
클라이언트와 서버 연결 확인하기
app.py에 마지막줄인 app.run('0.0.0.0', port=5000, debug=True)
보면 port번호가 5000이라서 연결 확인할 때 아무 브라우저에서 http://localhost:5000으로 접속하면 된다
만약 Mac유저분들중에 해당 포트가 사용중이라고 뜨면 포트번호를 5001 또는 원하시는 포트를 넣고 시도해보시길 바랍니다.
서버 만들기
서버의 역할이란?
해당 데이터를 받았으면 DB에 저장주는 역할
app.py의 일부
# 2. 데이터베이스 세팅
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.fzjk15v.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
# 1. 저장 할 무언가 -> 데이터 베이스
# 3. 데이터 베이스 세팅후 JSON형식으로 doc에 저장
doc = {
'bucket' : bucket_receive
}
# 4. DB에 저장
db.bucket.insert_one(doc)
return jsonify({'msg': '저장 완료!'})#1. 데이터를 저장하기전 어디에 저장할건지 생각
#2. 사용할 데이터베이스의 세팅(라이브러리 호출) - 몽고DB 사용
#3. 세팅을 완료후 이제 몽고DB 연결이 완료! 통신을 해야하는데 JSON으로 할 예정이니 변수명 = { '데이터명': 삽입할 데이터 }
#4. db.[저장할 DB명].insert_one으로 DB에 넣어서 저장
클라이언트 만들기
프론트엔드 -> save_bucket()
해야하는 일은?
인풋을 받아야하는 부분을 읽어다가 데이터를 싫어 줘야 한다
function save_bucket() {
let bucket = $('#bucket').val() #1
let formData = new FormData();
formData.append("bucket_give", bucket); #2
fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload(); #3
});#1. html의 데이터를 let bucket에 저장
<input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />- $('#input id') -> input id랑 동일 해야한다
#2. formData를 fetch로 보내기전 보낼 데이터를 추가
formData.append("bucket_give", bucket)에 bucket_give는
app.py에 있는 request.form['bucket_give'] 일치 해야한다.#3. window.location.reload() => 리프레쉬
완성 확인하기
테스트 해보기
원하는 버킷리스트 적고 기록하기 버튼 클릭!
몽고DB에 추가된것을 확인 할수 있습니다.
[버킷리스트] - GET 연습하기 (버킷리스트 보여주기)
DB에는 저장된것을 알수 있지만...
호주에서 스카이다이빙 하기 밑에 제가 추가한 평냉 투어가 없다는걸 알수 있습니다.
그래서 여기선 GET으로 데이터를 불러서 붙여주도록 하겠습니다.
데이터 명세
붙여줄 데이터는 저장한 버킷리스트 데이터입니다
클라이언트와 서버 연결 확인
https:localhost:Port# 으로 연결 되어 있나 확인
몽고DB Atlas 접속 확인
서버 만들기
여기서 서버의 역할은?
모든 bucket을 내려 주기
app.py의 일부분
@app.route("/bucket", methods=["GET"])
def bucket_get():
#1. db안에 있는 bucket 데이터를 싹 가지고 옵니다
all_buckets = list(db.bucket.find({},{'_id':False}))
#2. JSON형식으로 불러온 데이터를 넣습니다
return jsonify({'result': 'all_buckets'})#1. list 자료구조로 bucket안에 저장된 모든 데이터를 리스트인 all_bucket에 저장합니다.
#2. 저장된 db데이터를 JSON형식으로 리턴합니다.
클라이언트 만들기
index.html의 일부분
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result'] #1 rows에 'result' 받기
$('#bucket-list').empty() #6 데이터집어 넣기전 리셋
#2 반복문으로 데이터 돌아주기
rows.forEach((a) => {
let bucket = a['bucket'] #3 bucket 데이터 하나씩 받기
#4. html 형식으로 데이터 추가
let temp_html = `<li>
<h2>✅ ${bucket}</h2>
</li>`
$('#bucket-list').append(temp_html) #5.
})
})
}#1. 서버에서 return한 result을 rows로 받아준다
#2. 리스트가 나오면 반복문인 forEach를 써서 데이터를 뽑아줘야한다.
#3. DB에 'bucket'으로 된 데이터 bucket 자료구조에 담기
#4. temp_html에 html형식 + DB에서 호출한 데이터 넣어주기
#5. temp-html를 #bucket-list에 넣어준다
#6. 맨 처음에 들어가 있는 목록 지워주기(유저가 넣지 않은 데이터)
fetch로 통해 /bucket보내면 @app.route("/bucket", methods=["GET"])으로 들어와서 {'result': 'all_buckets'}을 받아옵니다
What: show_bucket 함수에 /bucket을
How: fetch로
where: app.py에 있는 @app.route("/bucket", methods=["GET"])으로
why: 클라이언트 & 서버을 통신하기 위해서
완성 확인하기
이전 데이터는 사라지고 유저가 넣은 데이터만 들어가 있습니다.
