굉장히 오랜만에 회고를 작성한다. 5주차 마무리 이후 1~5주차를 한번 더 진행 했는데, 진행하는 동안 문법의 한계를 너무 느껴서 javascript까지 따로 공부했었다.
아무래도 코딩을 하기 위해선 전반적인 플로우도 중요하지만 사용하고자 하는 언어 문법을 먼저 알고있는 게 훨씬 더 중요한 일인 것 같다.
버킷리스트 페이지 만들어보기
- 페이지를 만드는 작업 시 생각해야 하는 순서 :
1. 어떻게 만들지 생각하고 조각 기능 구현해보기
2. 서버(api) 만들기
3. 클라이언트 페이지 만들기-
클라이언트 페이지와 서버 페이지가 서로 연결되면서 주고 받아야 하는 데이터의 형식이나 구조도 미리 생각해둬야 한다.
-
1. POST연습(기록하기)
1. 서버
- 웹페이지에서 정보를 기록하고 db에 저장할 때 사용하는 방식: POST
- 클라이언트쪽에서 서버로 기록된 정보를 전달하면, 서버측에선 클라이언트로 기록이 완료됐다는 메세지를 전달한다.
- 요청 정보 : URL= /bucket, 요청 방식 = POST
- 클라(ajax) → 서버(flask) : bucket
- 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)
- 서버부터 만들 때, db에 저장되어야 하는 요소를 전부 변수로 정의해서 doc = {}에 넣는다.
- 버킷리스트를 만들 때 클라이언트로부터 받아와야 하는 정보는 리스트의 번호(num), 리스에 적은 내용(bucket), 완료 여부(done)다.
@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':'등록 완료!'})- 클라이언트 측에서 'bucket_give'로 정보를 주면, 해당 정보를 서버에선 'bucket_receive'에 넣는다.
- 이때 count는 디비에 저장된 모든 버켓리스트를 의미하고, num은 count의 길이에서 1을 더한 값이라고 정의했다.
- 이렇게 num을 정의한 이유는 새로운 버켓이 추가될 경우, 해당 버켓의 번호는 기존에 있던 리스트의 수에서 1을 더한 값과 같기 때문.
- 그리고 이렇게 받은 정보를 doc에 저장한다.
- num은 카운트에서 1을 더한 값으로 정의했고, 이것을 클라이언트 측과 동일한 변수인 'num'에 정의했다.
- 'bucket'은 클라이언트 측에서 전달하는 정보가 bucket_receive에 정의되어 있기 때문에 bucket_receive로 정의했다.
- 'done'의 경우 완료 시 1, 아닐 경우 0 이기 때문에 기본 0으로 정의되었다.
2. 클라이언트
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()
}
});
}- save_bucket()으로 정의된 함수는, html 코드 중 [기록하기]버튼에 추가되어 있다.
- [기록하기] 버튼 클릭 시 해당 함수가 실행되는 것.
- 해당 버튼을 통해 기록하는 인풋필드의 아이디 값은 "bucket"으로 정의되어 있다.
- 사용자가 버킷리스트에 작성할 내용을 bucket이라는 변수로 정의했다. ($('bucket').val()
- save_bucket 함수가 실행될 경우:
- 정의된 변수 bucket을 'bucket_give'라고 새로 정의하여 서버로 보낸다.
- 서버에서 'bucket_give'로 받은 데이터를 디비에 저장하고, 일련의 과정이 완료되었을 때 서버에서 정의한 'msg'에 들어있는 값이 클라이언트 측의 alert의 형태로 새로고침되며 생성된다.
- alert(response["msg"]) = 서버에서 정의한 'msg'에 들어있던 내용이 팝업창의 형태로 생성
- window.location.reload() = 새로고침
2. GET연습(보여주기)
1. 서버
- 웹페이지에 기록되었던 내용이 클라이언트 페이지에 노출되는 것 (버킷리스트의 API 조회)
- 디비에 기록된 내용을 클라이언트 페이지에 옮겨담는다.
- 요청 정보 : URL= /bucket, 요청 방식 = GET
- 클라(ajax) → 서버(flask) : (없음)
- 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기
- 서버에 저장되었던 내용을 클라이언트가 받아서 보여주는 형식
- 이런 경우, 클라이언트 쪽에서 서버로 전달할 내용은 없음
@app.route("/bucket", methods=["GET"])
def bucket_get():
buckets_list = list(db.bucket.find({},{'_id':False}))
return jsonify({'buckets':buckets_list})- bucket_get()으로 정의된 함수가 실행될 경우, buckets_list에 정의된대로 bucket이라는 디비에 저장된 모든 내용들이 조회된다. 조회될 때 조건은 몽고디비 자체에서 부여하는 아이디값(_id)은 제외하고 조회하는 것.
- 서버쪽에서 클라이언트 쪽에 데이터를 전달할때, buckets_list를 'buckets'라는 값에 넣어서 전달한다.
2. 클라이언트
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>
<buttontoken interpolation">${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)
}
}
});
}- show_bucket() 함수는 페이지가 로딩되는 순간부터 실행된다.
- 서버에서 전달한 정보를 성공적으로 받았을 경우, function(response)부분부터 실행된다.
- 이때 제이슨 형식으로 데이터를 받았기 때문에, 각 버킷리스트들은 rows로 정리되어있다.
- rows는 서버에서 데이터를 전해준 'buckets'를 이용해서 정의되어 있다.
- 이때 rows안에 들어있는 특정값 (i)는 0(리스트의 처음)부터 rows의 길이 (rows.length, 작성된 버킷리스트의 수)만큼 하나씩 커지며 함수가 반복된다.
- rows에서 'bucket'으로 구분되는, 사용자가 작성한 버킷리스트의 내용을 bucket이라는 변수로 정의했다.
- rows에서 'num'으로 구분되는, 버킷리스트가 작성된 순서이자 고유 번호를 변수 num에 정의했다.
- rows에서 'done'으로 구분되는, 버킷리스트의 완료 여부는 변수 done에 저장했다.
- 만약 done이 0(완료되지 않음)일 경우:
- 체크박스 아이콘 옆에 사용자가 버킷리스트의 작성한 글 내용이 추가된다. ${bucket}
- [완료!] 버튼에 붙어있는 함수인 "done_bucket()"의 값엔 해당 버킷리스트의 고유번호인 num이 추가된다 $(num)
- 만약 done이 1(완료됨)일 경우:
- 체크박스 아이콘 옆에 사용자가 버킷리스트에 작성한 글 내용이 추가된다. ${bucket}
- 그리고 해당 경우에만 css 코드를 따로 추가 (class = "done")하여 완료되었을 때 line-through로 표시된다.
- 완성된 temp_html은 버킷리스트가 작성되는 부분(id = "bucket-list")에 추가된다.
- 그래서 show_bucket() 함수가 실행될 경우, 아이디 값이 "bucket-list"였던 곳에 이 모든 내용이 적용된다.
- 그래서 show_bucket() 함수가 실행될 경우, 아이디 값이 "bucket-list"였던 곳에 이 모든 내용이 적용된다.
3. POST연습(완료하기)
1. 서버
- 사용자가 페이지에서 특정 버킷리스트를 완성할 경우, 미완성>완성으로 변경된 내용이 디비에 새로 저장되어야 한다.
- 버킷리스트 완료 API (Update→ POST)
- 요청 정보 : URL= /bucket/done, 요청 방식 = POST
- 클라(ajax) → 서버(flask) : num (버킷 넘버)
- 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)
- 클라이언트 측에서 서버로 변경된 버킷리스트의 고유넘버(num)을 전달하면 서버는 해당 내용을 DB에 업데이트 한 후 클라이언트로 완료 메세지를 전달한다.
@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': '버킷 완료!'})- 버킷리스트의 완료여부는 고유번호로 식별하기 때문에 클라이언트로부터 받아와야하는 데이터는 "num_give"다.
- 클라이언트에서 주는 정보를 num_receive로 받아서 처리한다.
- 버켓이라는 db에 있는 내용을 업데이트하는데, 이때 업데이트 되어야할 내용은:
- 디비에 'num' 이라고 저장되었던 항목을 num_receive로 받은 데이터로 바꾼다. 이때 num_receive가 문자 형태로 받아졌기 때문에 해당 데이터를 숫자형태로 바꾸기 위해 int()를 사용한다.
- 그리고 'done' 항목의 값을 1로 변경한다.
- 완료 후 '버킷 완료!' 라는 메세지를 클라이언트로 전달한다.
2. 클라이언트
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {'num_give':num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}- [완료!] 버튼에 속해있던 함수 done_bucket(num)이 실행된다.
- 'num_give'에 버킷리스트 고유 번호인 num을 담아 서버로 전달한다.
- 서버에서 일련의 과정이 성공적으로 끝났을 경우, 서버에서 전달하는 메세지를 alert의 형태로 새로고침하며 보여준다.
- alert(response["msg"]) = 서버에서 정의한 'msg'에 들어있던 내용이 팝업창의 형태로 생성
- window.location.reload() = 새로고침
5주차 강의가 끝났다. 5주차는 코딩보단 완성된 웹사이트를 어떻게 배포하는지가 주된 목적이었지만, 배포 과정은 여기에 올리기에 비효율적으로 길기 때문에 코딩 해석을 한번 작성해봤다.
강의를 보고 코드를 따라 치면서 느끼는건 내가 이 코드들을 해석할 수 있나? 이해하고 사용하는게 맞나? 이런 질문에 어느정도 "그렇다"라고 답변할 수 있어야 한다는 것이다.
일련의 과정을 이해하는 것도 중요하지만 어쨌든 직접 코딩을 하려면 코드들의 의미, 사용하는 방법, 왜 이렇게 사용했는지 등등을 알아야 한다고 생각한다.
앞으로 더 많은 내용을 항해99를 하며 배우겠지만, 확실히 점점 헤이해지는게 느껴진다. 공부를 쉬지 않고 할 수 있도록 노력해야겠다.
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄