[Localhost] 팬명록
이번에는 요런 장난감을 가지고 와봤다.
패턴 자체는 굉장히 익숙할 것이다.
POST / GET
Server / Client
API
바로 요 세 놈에게 익숙해지기 위해 했던 내용 또 하고, 또 하고, 또 하고를 반복했다.
HTML만 바뀌었을 뿐이지 서버를 담당하는 Python 파일은 거의..
아니 사실상 복사+붙여넣기 수준으로 비슷비슷하다.
동일한 기능을 수행하고 있으니까!
그만큼 숙달을 해야 하는 부분이기도 하다.
앞으로 웹 / 앱 프론트를 개발하든.. 서버를 개발하든..
가장 큰 틀은 여태까지 다룬 내용에서 크게 벗어날 수가 없다.
결국에는 몇몇 공룡 IT에서 독점하고 있는 프레임워크를 가지고 작업할 게 뻔하므로..
특히 우리는 Flask를 계속해서 다뤄보았다.
그 외에도 Django라는 프레임워크가 또 있는 걸로 알고 있는데..
필자는 Spring-Boot를 먼저 심화학습 하는거면 몰라도, 아직 쟝고까지 커버할 생각은 없다.
어쨌든 우리는 남은 시간동안 플라스크와 먼저 친숙해져야 할 것이다.
바로 시작하도록 하자.
1. POST (CREATE / UPDATE)
요 기능을 먼저 구현해보자.
SQL로 치면 테이블을 생성하고, 데이터를 INSERT (UPDATE) 하는 과정 정도가 되겠다.
GET 기능은 아직 구현하지 않았기 때문에 테이블이 제대로 생성되었는지는
직접 아틀라스 서버에 들어가서 확인 해봐야 한다.
역시.. POST 기능은 이상없이 잘 굴러가고 있다.
늘 그러하듯 이제 건물의 설계도면을 살펴봐야겠지?
[Directory]
1. static: CSS, Images...
2. templates: HTML (index.html)
[Application]
1. Python FLASK Server (app.py)
[Libraries / Packages]
1. Flask
2. Pymongo
3. DNS_Python
건물의 레이아웃 도면, 내지 공사 시방서에 해당하는 내용 쯤이 되시겠다.
어떠한 순서로 공정을 진행할 것이며, 건축자재는 무엇을 쓸 것인지 등을 대략적으로 도식화 한 것이다.
프로젝트를 생성할 때마다 다룬 내용이기 때문에 이번에는 스킵하도록 하겠다.
바로 서버단부터 만들어보도록 하자.
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
# DB Connection
from pymongo import MongoClient
client = MongoClient('mongodb+srv://admin:<password>cluster0.n5ejj.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
# Appended Variable
# 1. 닉네임: name
# 2. 응원 댓글: comment가장 먼저 플라스크에서 꺼내다가 쓸 클래스들을 지정 해줘야겠지?
스프링 부트에서 Annotation (@)을 선언하는 것과 똑같다고 보면 된다.
그 다음으로 필요한 게.. DB Connection!
플라스크 서버와 DB서버를 연결해주기 위하여 pymongo 패키지를 임포트 해준 것이다.
요 세 라인이 없으면 밑에서 아무리 SQL문을 선언해준들 오류가 뜰 것이다.
다음!
# 01 CREATE TABLE
@app.route("/homework", methods=["POST"])
def homework_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
# INSERT INTO BOARDS('NAME','COMMENT') VALUES(?,?)
doc = {
'name':name_receive,
'comment':comment_receive
}
db.boards.insert_one(doc)
return jsonify({'msg':'등록 완료!'})이번 프로젝트에서는 변수가 적어서 참 좋다.
덕분에 소스코드도 더 눈에 잘 들어오고 말이다.
일차적으로는 boards라는 이름의 테이블을 생성해주고..
컬럼 안에 name과 comment 두 개의 변수를 INSERT 해주는 것이 목적이다.
그리고 또?
잠시 후에 만들 Client의 요청에도 응답 해줘야지.
$(document).ready(function () {
set_temp()
show_comment()
});
(생략..)
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/homework',
data: {
name_give: name,
comment_give: comment
},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
})
}복잡하게 생각할 거 없다.
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']뒷 단의 플라스크 서버에서 만든 receive에 대응하는 것이 전부인 기능이다.
다만 ajax 콜은 POST 방식이므로 별도의 데이터 타입을 지정 해줘야겠지?
아틀라스 서버로까지 데이터가 온전하게 넘어갔던 부분은 초입부에 보여줬으므로 생략하겠다.
다음!
2. GET (READ)
이렇게 목록을 한꺼번에 모아 볼 수 있는 기능을 만들어 보겠다는 것이다.
근데 어째 방명록에서 담배 냄새가 나는 거 같냐? 어우.. ㅡㅡ
DB 서버도 문제없이 잘 굴러가고 있다.
당연한 거 아니겠는가?
GET API 프로세스가 어떻게 실행되고 있는지는 알겠지?
언제나 그러했듯이 설계도면을 살펴보도록 하자..
# 02 READ TABLE
@app.route("/homework", methods=["GET"])
def homework_get():
# SELECT * FROM BOARDS
board_list = list(db.boards.find({}, {'_id': False}))
return jsonify({'boards':board_list})
SELECT * FROM BOARDS
boards 테이블에 있는 모든 요소들을 조회하겠다는 뜻이다.
거기에 상응하는 pymongo의 SQL문을 긁어왔을 뿐이다.
여기까지 작성하였다면 서버에서 할 일은 끝났다.
클라이언트의 요청대로 name과 comment의 데이터를 DB서버에 요청했고..
그것을 다시 클라이언트에 되돌려주고 있으니 더 이상 500 Internal 에러가 뜰 일은 없다.
이제 모든 책임을 프론트 개발자에게 떠넘기도록 하자.
function show_comment() {
$.ajax({
type: "GET",
url: "/homework",
data: {},
success: function (response) {
let rows = response['boards']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
$('#comment-list').append(temp_html)
}
}
});
}ajax = AJAX Call
그렇게 외워라.
ajax는 무언가를 요청할 때 쓰는 JavaScript 기법이다.
이 경우에는 당연히 플라스크 서버에 GET을 요청하겠지.
나머지 succenss 함수 이하는 너무 상세하게 리뷰를 달아놓지는 않겠다.
우선 boards 테이블의 모든 데이터들을 rows 변수에 저장하고 있네.
그 다음에 for문을 돌면서 name과 comment를 각각 뽑아낼 것이다.
그 결과를 최종적으로 HTML 화면에 반영하라믄 의미에서 temp_html 변수를 선언한 것이고..
마지막으로 temp_html의 값들을 comment-list 디비전 전체에 추가하겠다고 한다.
이 정도면 GET / POST 관련 예제는 신물이 날 정도로 다뤄본 것 같다.
필자가 글의 제목부터 멘션 한거지만 지금까지 만들어놓은 모든 예제들은 내 컴퓨터에서만 돌아간다.
아직 AWS에 배포까지 하는 단계는 거치지 않았다는 거다.
다음 시간부터는 그동안 우리가 만든 예제들을 좀 더 다듬어 정식 웹 서비스로 배포해보자.
이상!