로컬 개발환경 세팅
내 컴퓨터에 서버를 만들고 실행을 하는 로컬 개발환경을 만들어본다.
내 컴퓨터 안에 flask 서버를 만들고, 내 컴퓨터 안에 있는 html, css, javascript 파일을 크롬에서 표시하고 mongo db를 이용하여 데이터베이스에 저장을 하는 형태가 될 것이다.
그림으로 표현하면 아래와 같다.
flask 웹 프레임 워크 사용
서버를 만든다는 것은 굉장히 어려운 것이다.
서버를 만들기 위한 큰 라이브러리를 사용한다고 생각하면 되는데 이를 프레임워크라고 한다.
프레임 워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격이라고 생각하면 된다.
프레임 워크는 3분 요리/ 소스 세트라고 생각하면 된다고 한다.
웹 프레임 워크는 다양한 종류가 존재한다.
파이썬을 기반으로 하는 웹 프레임워크에는 크게 2가지 django와 flask가 존재하는 것 같다.
django와 flask 현업에서는 주로 django를 사용하기는 하지만 flask, django 둘 중에 하나만 사용할 줄 안다면, 다른 것을 배우기에는 큰 무리가 없어 보인다.
이 강의에서는 flask라는 프레임 워크를 사용하고있다.
FLASK 시작
파이참에서 flask 패키지를 다운로드 받는다.
flask 기본 사용법은 아래와 같다.
app.py에 아래 내용을 적은 다음 localhost:5000 으로 들어가면 나만의 로컬 웹 페이지를 확인할 수 있다.
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)
flask 프로젝트 구조
프로젝트 구조는 아래와 같이 설정을 해놓는다.
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)
}
})
진행과정
버킷리스트 페이지를 예로 들겠다.
버킷리스트 페이지는 아래와 같다.
기본 기능을 살펴보자
1. 버킷리스트 페이자가 뜰때 db로 부터 이미 저장된 버킷리스트 목록들을 들고온다.
2. 들고온 목록들을 html 폼으로 작성하여 html에 넣는다.
3. 사용자가 추가하고 싶은 버킷리스트를 작성한 후 기록하기 버튼을 누른다면 화면 하단에 추가 내용이 표시된다.
3가지 기능들이 어떤 순서로 코드가 돌아가는지 살펴보자.
기능1: 버킷리스트 페이자가 뜰때 db로 부터 이미 저장된 버킷리스트 목록들을 들고온다.
백엔드 부분이다 (app.py)
사용자가 버킷리스트 페이지에 접속을 하면 index.html 페이지를 보여준다.
@app.route('/')
def home():
return render_template('index.html')
프론트엔드 부분이다.(index.html)
화면이 준비되면 백엔드에 데이터베이스 정보를 Ajax를 이용하여 요청한다.
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
<< 백엔드로 부터 데이터를 받았을 시 처리할 내용이 들어감 >>
});
}
</script>
백엔드는 bucket 데이터 베이스로 부터 모든 정보를 받아온 후 다시 프론트 엔드로 정보를 넘겨준다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})
기능2 : 들고온 목록들을 html 폼으로 작성하여 html에 넣는다.
프론트 엔드는 백엔드로 부터 정보를 정상적으로 받았다면 해당 내용을 html폼으로 작성하여 추가한다.
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets'];
for (let i = 0; i < rows.length; i++) {
bucket = rows[i]["bucket"];
num = rows[i]["num"];
done = rows[i]["done"];
let temp_html = ``;
if (done == 0) {
temp_html = `
<li>
<h2>✅ ${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`;
} else {
temp_html = `
<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
alert(response["msg"])
}
});
}
기능3 : 사용자가 추가하고 싶은 버킷리스트를 작성한 후 기록하기 버튼을 누른다면 화면 하단에 추가 내용이 표시된다.
버튼을 누르면 사용자가 입력한 내용을 백엔드로 전달한다.
<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><script>
function save_bucket() {
let bucket = $('#bucket').val();
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
<< 백엔드로 부터 정보를 받았을 경우 진행 >>
}
});
}
</script>
백엔드는 프론트엔드로 부터 사용자가 입력한 정보를 전달받고 이를 데이터베이스에 저장한다.
완료되면 등록완료 메세지를 프론트엔드로 전달한다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {"bucket" : bucket_receive,
"num" : count,
"done" : 0}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료'})
버킷리스트가 정상적으로 저장이 되었다면 window.location.reload() 메서드를 통해 페이지 새로고침을 진행한다.
<script>
function save_bucket() {
let bucket = $('#bucket').val();
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload();
}
});
}
</script>
