항해99 사전 스터디 5주차
사전 스터디의 마지막 프로젝트를 공부하면서 최종적으로 과제를 제출할 때는
여러 생각이 머리속을 스쳐 지나갔다.
여러가지 복잡한 생각들을 제쳐 놓고 글을 쓰려고 한다.
프로젝트
마지막 프로젝트는 버킷리스트 만드는 것이었다.
3주차, 2주차에서 배웠던 GET과 POST가 있는 똑같은 구조였다.
특별히 다른 점이라고 하면 리스트에 자신이 하지 않을 일과 끝마친 일을
버튼을 클릭하여 구분하는 시스템이 달랐다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form["bucket_give"]
count = list(db.bucket.find({},{'_id':False}))
num = len(count) + 1
doc = {
'num':num,
'bucket': bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg':'등록 완료!'POST의 서버 코드이다.
num 이라는 것을 붙여 각 리스트에 번호를 매기고 있다.
번호는 리스트의 갯수에 +1을 각각 해주고 있다.
function show_bucket(){
$('#bucket-list').empty()
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i = 0; i < rows.length; i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let 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)
}
}
});
}GET부분의 클라이언트 코드이다.
onclick="done_bucket(${num})이렇게 각각의 리스트에 번호를 붙여주는 것을 볼 수 있다.
이후에 한가지 작업이 더 남았다.
아래와 같이, 내가 완료한 리스트의 버튼을 누르면 그 작업을 완료했다라고 표시를 해주어야 한다.
1. 여행가기 완료버튼
2. 게임하기
3. 잠자기 완료버튼
맨 위에 POST 서버 코드를 보면 이미 done이라는 것에 0이라는 숫자 값을 넣어 두었다.
그리고 바로 아래 GET 코드에는 각 리스트에 번호를 붙여주었다.
만약 완료했을 시에 각 리스트의 번호를 서버에 넘겨주고, 서버에서는 리스트 번호에 맞는 done을 0에서 1로 바꾸면 되는 것이다. 코드는 아래와 같다.
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form["num_give"]
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})POST 서버 코드이다.
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})여기 dbprac에서 배웠던 DB 수정하기 코드가 눈에 띄인다.
클라이언트에서 num을 받아서 DB 리스트에 num과 맞는것을 찾아 done의 값을 1로 수정해 주었다.
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {'num_give':num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}POST 클라이언트 코드이다.
보면 data로 num 값을 파라미터로 받아 num_give로 서버에 넘기는 것을 볼 수 있다.
이렇게 마지막 프로젝트까지 공부해보았다.
5주차 과제
여기 블로그에는 포스팅을 안했지만, 사실 550원을 주고 가비아라는 곳에서
도메인을 구매하였다. 도메인을 구매한 것은 이번이 처음이다.
마지막 과제는 AWS에서 클라우드 컴퓨터(서버용)를 빌려, 도메인 설정을 한 후에 올리는 것이었다. 하는 법을 배웠음에도 굉장히 어려웠다.
사실 이전에 프로젝트를 진행 할 때는 HEROKU(헤로쿠) 혹은 HOSTINGER(호스팅어)에서
무료로 진행하였었다. 그러나 이번에는 진짜 도메인을 구입하게 되었다.
내가 만들고, 내가 직접 구매한 도메인으로 만든 홈페이지인 만큼 왠지 정이 간다. ㅎㅎ
23년 1월 9일부터 본격적으로 나의 여정이 시작된다.
P.S. 위 홈페이지에 들어가서 글을 쓰고싶다. 라고 말하면 글을 써주시겠죠? 여러분? 오늘부터 딱 1년간은 저 도메인으로 누구든 들어갈 수 있어요. ㅎㅎ 1년후엔 비밀...
