
이번 시간에 만들어 볼 장난감이다.
기능 자체는 별 것 없다.
입주자의 이름과 주소, 희망 평수 정도를 등록 (POST)한 다음..
데이터가 제대로 입력 (INSERT) 되었는지 조회 (GET)까지 해보려는 것이다.
클라이언트 화면 구성에 필요한 템플릿은 인강 측에서 미리 만들어 놓았다.
우리는 실제로 데이터를 CRUD 하기 위한 기능만 슉, 슈슉, 슈슈슉, ㅆ.. 완성 해나가는 것이다.
첫 단추부터 꼼꼼하게 끼워보록 하자.
0. Project Precets
본격적으로 프로젝트를 시작하기에 앞서 필요한 선수과정부터 밟아보도록 하자.

사진으로 한 눈에 보는 게 더 이해가 빠르겠지?
앞으로 플라스크 환경에서 프로젝트를 만들 때는 필자가 알려주는 선수과정을 가급적 외우도록 해라.
모.. 반복하고 숙달하다 보면 그냥 손이 먼저 기억할 것이다.
우선 새 폴더 (Directory)를 두 개 만들어주자.
HTML과 JS를 저장할 공간인 templates.
CSS 및 기타 이미지 파일을 임포트 할 공간인 static.
그리고 사실상 에플리케이션을 실행시켜 줄 app.py 파일을 각각 만들자.
빨간 색으로 마킹 해놓은거 보이지?
그 다음에는 패키지를 따로 설치 해줘야 한다.
자바 이클립스 환경에서 lib jar 파일을 web-content 폴더에 때려박는 과정과 유사한데..
PyCharm에서는 그냥 쏙! 쏙! 임포트 해주기만 하면 끝이다.
단축키 ctrl + alt + s 를 눌러볼래?
그럼 사진과 같이 파이썬 인터프리터라는 창이 뜰 것이다.
'+' 버튼을 눌러서 다음 세 가지 패키지를 설치 해주자.
flask
pymongo
dnspython
flask는 말 그대로 플라스크 프레임워크를 가져다가 쓰기 위함이고..
pymongo는 MongoDB Atlas 서버와 통신하기 위해 필요한 별도의 내부 서버이다.
dnspython은 추후 사용처를 설명하도록 하겠다.
여기까지 잘 따라왔으면 우리는 벌써 주방을 하나 뚝딱! 하고 만들어 준 것이다.
식재료와 조리도구는 더할 나위 없이 완벽하게 준비되었다.
이제 빅맥세트가 되었건.. 치즈버거가 되었건.. 상스치콤이 되었건..
카운터에서 요청한 주문대로 조리만 해주면 끝나는 것이다.
라고 했지만.. 우리는 지금 스스로를 풀-스텍 개발자라고 가정하고 있기 때문에..
주문 접수, 조리, 포장, 홀 서빙 전부 다 할 줄 알아야 한다.
유감이다..
그래도 소는 안 키워도 되잖아? ㅡㅡ
1. POST [CREATE]



결과적으로 어떤 기능을 구현하려는 것인지 감이 오지?
무턱대고 코드블럭부터 들이밀고 보면 내가 포플 확인하는 인사담당관이라도 한숨부터 나올 것 같다.
지금 우리가 생성 (CREATE / POST) 하고자 하는 데이터가 뭐 뭐 있지?
당장 클라이언트 화면만 보더라도..
신청자의 성명 (name).
신청자가 현 거주지 (address).
신청하고 싶은 평수 (size).
요렇게 세 가지 변수를 MongoDB 서버에 만들어줘야 한다.
기능이 어떻게 동작하는지는 감을 잡았으니 소스코드를 살펴보도록 하자.
실행파일인 app.py 파일부터 살펴보도록 하겠다.
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
플라스크에서 가져다가 쓸 클래스.. 같은 녀석들이다.
최상단에 위치해있지.
외우지 말고, 눈에 익혀두기만 해라.
필자는 어짜피 다음에도 복붙해다가 쓸 것이다.
# DB Connection
from pymongo import MongoClient
client = MongoClient('mongodb+srv://admin:1q2w3e4r!@cluster0.n5ejj.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
DB Connection이라고 주석을 달아놨지?
pymongo 내부 서버와 MongoDB Atlas 클라우드 서버를 연결해주고 하는 것이다.
저 세 라인은 하나의 패키지처럼 가져다가 쓸 것이라고 했다.
그리고 자바에서의 데이터 커넥션 풀을 예로 든 적이 있다.
# Usable Variable
# 이름: name
# 주소: address
# 평수: size
우리가 만들어 줄 변수들이야.
자바 같으면 String이나 Integer 등으로 타입을 지정해줘야 하는데
MZ 언어인 파이썬은 그런거 필요 없대.. ㅡㅡ
@app.route('/')
def home():
return render_template('index.html')
우리가 만들고 있는 app.py는 백엔드 영역이다.
그렇다면 프론트엔드 영역인 HTML과 요청 / 응답을 해줘야 할 것 아니요..
그것을 위해 만들어놓은 코드이다.
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
이제 본격적으로 POST 요청을 해볼 차례이다!
web_mars_post() 함수는 다음 세 가지 타입의 변수를 담고 있다.
name_receive
address_receive
size_receive
변수명을 지어주는 것에 제한은 없다.
조금이라도 직관적이고, 의도가 명확하게 전달되면 그만인 것이다.
각각 name과 address, size의 값을 '받겠다' 라고 선언하고 있네?
더 자세히 살펴보면..
name을 줄게! (name_give)
address를 줄게! (address_give)
size를 줄게! (size_give)
라는 값들을 각 변수에 저장하고야 말겠다는 굳은 의지를 확인할 수 있다.
그렇다면 값들은 누가 주는건데?
미리 스포하자면 index.html 파일에서 값을 전달해줄 것이다.
'홀에 슈슈버거 세트 하나요~!' 이런 식으로 말이다.
우선은 app.py만 먼저 살펴보도록 하자.
# CREATE TABLE
doc = {
'name': name_receive,
'address': address_receive,
'size': size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문이 완료되었습니다!'})
필자가 주석처리 한 부분도 꼼꼼하게 살펴보길 바란다.
말 그대로 테이블을 생성해주는 스코프이다.
물론 아틀라스 서버에서는 JSON 형식으로 CRUD가 될 것이다.
doc라는 컬럼 안에 name, address, size가 각각 위에서 선언한 변수들의 값을 저장하고 있구만..
그 값들을 하나씩 컬럼에 밀어넣어 주기 위해서 db.TABLE.insert_one(doc) 라는 함수를 쓰고 있다.
마지막으로 리턴을 해주는데..
주문이 완료되었다 라는 둥의 메시지를 JSON화 시켜주고 있다.
POST 기능 수행을 위한 벡엔드 단 구성작업은 여기까지이다.
이제는 프론트 단인 index.html을 살펴보도록 하자.
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: { name_give:name, address_give:address, size_give: size },
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
만약 IDE로 PyCharm을 쓰고 있다면 ctrl+f 단축키를 눌러라.
그리고 save_order를 찾으면 해당되는 내용이 순차적으로 나오겠지?
기본적으로 HTML 파일은 앞단 내용이 토나올 정도로 많다.
여기서도 변수를 먼저 선언해주고 있네?
app.py를 파이썬 언어로 구성하였다면, 앞 단은 JS 언어를 쓰고 있음을 알 수 있다.
name, address, size를 각각 jQuery를 이용하여 Request 내장객체처럼 값을 저장해주고 있다.
그 밑은 1 ~ 2주차에서 지겹도록 눈에 익은 ajax이다.
타입은 당연히 POST이어야만 하고..
데이터 부분을 눈여겨 보기 바란다.
name_give
address_give
size_give
뒷단인 app.py 파일에서 본 적이 있다.
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
바로 이 부분 말이다.
이제 어디서 값을 주고, 어디서 그것을 받는지 의도가 확실해졌지?
사실 여기가 핵심이다.
어렵지 않게 이해를 했다면 앞으로의 내용도 어려울 거 하나도 없다.
alert(response['msg']) 함수도 별 거 없다.
return jsonify({'msg': '주문이 완료되었습니다!'})
여기에 대한 응답 값이다.
'주문이 완료되었습니다!' 라는 메시지를 JSON화 시켜줘야 앞 단 ajax에서 오류가 뜨지 않겠지?
자자! 우리 벌써 절반까지 온거야.
나머지 GET 요청까지 완성하면 장난감 하나가 뚝딱 만들어지는 것이다.
2. GET (READ)

이전 챕터에서는 POST 기능을 구현 해보았으니
이번에는 GET 기능까지 완성함으로서 미니프로젝트를 일단락 하고자 한다.
필자는 이미 다 만들어놓은 화면에서 따로 마킹해놓은 데이터를 불러오고 있는 것이다.
어떤 식으로 동작하는지 정도는 알겠지?
그럼 소스코드를 살펴보자.
이번에도 백엔드 → 프론트엔드 순으로 리뷰를 진행할 것이다.
@app.route("/mars", methods=["GET"])
def web_mars_get():
# SELECT * FROM MARS
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})
web_mars_get() 함수는 우선 order_list 라는 변수만 담고 있다.
그런데 이 변수가 어떠한 값을 저장하고 있는가를 살펴보니..
SQL에서의 SELECT * FROM TABLE 과 같은 기능을 수행하는 녀석이다.
클라이언트 화면에 직접적으로 데이터를 노출하는 기능이다보니 백엔드 단은 그닥 볼 게 없다.
바로 HTML로 넘어가보자.
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}
앞선 1 ~ 2주차의 내용에 충실했다면 어려울 게 없는 내용이다.
당연히 GET 방식으로 요청을 받아야 하고..
데이터 타입은 따로 지정해주지 않는다.
response 함수를 자세히 살펴보도록 하자.
let rows = response['orders']
return jsonify({'orders': order_list})
앞 단의 요 녀석..
key (orders) : value (order_list)
나머지는 for문을 돌리면서 순차적으로 데이터를 뽑아주고 있다.
temp_html은 add_html이나 마찬가지이다.
실제로 HTML 화면에 추가해줄 녀석들
append 함수로 처리하고 있네..
여기까지 장난감을 하나 쪼물딱 거려봤다.
대단한 앱을 만드려는 게 아니라 GET / POST API에 익숙해지기 위함이다.
다음으로 만들어 볼 프로젝트도 그리 어렵지 않다.
비슷한 패턴이 반복되는 형태니 가능한 눈에 익도록 하자.
이상!
academy3746/Mars_ver_1.0.0: POST / READ 기능 구현 숙달을 위한 간단한 로컬서버 제작 (github.com)
GitHub - academy3746/Mars_ver_1.0.0: POST / READ 기능 구현 숙달을 위한 간단한 로컬서버 제작
POST / READ 기능 구현 숙달을 위한 간단한 로컬서버 제작. Contribute to academy3746/Mars_ver_1.0.0 development by creating an account on GitHub.
github.com

'[WEB_풀스텍] > Code Review' 카테고리의 다른 글
[Localhost] 나의 버킷리스트! (0) | 2022.07.13 |
---|---|
[Localhost] 팬명록 (0) | 2022.07.12 |
[Localhost] 내 인생 최고의 영화! (0) | 2022.07.11 |