프로젝트 세팅

새 프로젝트 생성 시에는 flask, pymongo, dnspython 을 기본적으로 설치를 하고
시작한다.

flask의 규칙에 따라
static , templates 폴더를 만들어주고,
templates에 html파일을 만들어준다.
app.py도 만들어준다!

POST(기록하기)

서버부터 만들기 bucket의 정보를 받아서, 저장하면 된다.
단, 여기서 주의할 점은 각 버킷리스트마다 완료 버튼을 눌렀을 때
어떤 버킷리스트가 완료되었는지 확인하기 위해서는
리스트마다 식별할 수 있는 이름표 같은 것이 필요한데, 알기 쉽게 숫자로 한다.

@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 = {
    'num':count,
    'bucket':bucket_receive,
    'done':0
  }
  db.bucket.insert_one(doc)

  return jsonify({'msg': '등록 완료'})

해당 부분의 코드를 좀 천천히 익혀볼 겸 코드를 읽어보려고 한다.

/bucket 경로에 POST로 Create 한다.
html let bucket의 값을 가져와 bucket 이라는 변수에 할당한다.
html ajax에서 bucket_give에 bucket을 넣어 보낸다.
bucket_give로 받은 bucket_receive 이후 데이터 베이스에 넣어주기 위해
doc = {} 형태로 db에 insert_one 으로 넣어주게 된다.

bucket_list의 모든 list를 가지고 오기 위해
bucket_list = list(db.bucket.find({},{'_id':False}))를 사용하여 저장되어 있는
list를 모두 가지고 온다!

jsonify로 '등록 완료'를 'msg'로 보내주어

success: function(response)로 담는다.
담은 후에는 window.location.reload()로 새로고침한다!

데이터가 잘 들어갔는지 mongoDB를 refresh 하여 확인해주면 완벽!

...값이 잘 들어왔다!

GET 연습

post를 한 후, 저장된 데이터를 GET으로 조회한다!

@app.route("/bucket", methods=["GET"])
def bucket_get():
  bucket_list = list(db.bucket.find({}, {'_id': False}))
  return jsonify({'buckets': bucket_list})

서버 쪽의 GET은 생각보다 단순하다.
저장한 내용을 그대로 가지고와서 return 해주면 되기 때문!

하지만 html에서 jQuery를 이용해서 html template을 붙여주려면 조금 복잡해진다 ㅠ

필요한 데이터인 bucket, num done 을 받아
아래 기존의 html template을 백틱으로 담아서 넣는다.
값이 들어가야 하는 부분을 ${} 로 받아주어 실제 입력한 데이터가 들어갈 수 있게 한다.

버킷 완료된 곳 표시하기

버킷리스트를 작성하고, 완료가 되면 체크가 되게 기능을 구현하기 위해서
앞서, list마다 부여된 번호를 가지고 조작하게 된다
num을 num_give로 넘겨주고 num_give 로 받은 것은
num_receive로 받는다. update_one으로 데이터에서 뽑아올 경우, 주의할 점은
num_receive가 숫자이기 때문에 int(num_receive)로 받아줘야한다는 것이고,
$set: {'done':1} 을 하면서 0 -> 1 로 변경될 때 미완료와 완료로 구분한다.