백엔드 기초 입문과 미니 프로젝트 03

코멘트 수정 기능 구현

각 코멘트마다 '수정'이라는 a 태그에 해당 코멘트 id와 연결되는 링크를 담았고, 이를 클릭 시 아래 백엔드로 이동한다.

@app.route("/comments/<string:id>", methods=["GET"])
def get_comment_with_id(id):
    result = db.comments.find_one({"_id": ObjectId(id)})
    result["_id"] = str(result["_id"])

    return render_template("edit.html", result=result)

 

수정 버튼을 누르면 우선 기존 코멘트 id에 기록된 내용들을 가져와 edit.html에 함께 전송한다.

 

<!-- edit.html -->
<div class="mypost" id="post-box">
  <div class="input-group mb-3">
    <input type="text" id="nickname" class="form-control" placeholder="닉네임 (최대 10자)" value={{ result["nick_name"] }}
      aria-label="nickname" maxlength="10">
    <input type="password" id="password" class="form-control" placeholder="비밀번호" aria-label="password">
  </div>

  <div class="input-group">
    <textarea id="comment" class="form-control" placeholder="코멘트를 남겨주세요. (최대 400자)" aria-label="With textarea"
      maxlength="400">{{ result['comment'] }}</textarea>
  </div>
  <div class="mybtns">
    <button onclick="editing('{{ result['_id'] }}')" type="button" class="btn btn-dark">수정</button>
  </div>
</div>

기존에 사용했던 코멘트 등록 틀만 따로 가져와 edit.html에 저장했다.
그리고 기존에 작성되었던 닉네임, 코멘트를 가져와 수정 틀에 미리 담기도록 했다.
간단히 말해서 코멘트 수정 창으로 이동하고, 기존에 작성한 정보가 이미 빈칸에 채워진 상태이도록 했다.

수정' 버튼을 누르면 아래 editing 함수가 실행된다.

async function editing(id) {
  let formData = new FormData();
  formData.append("nickname", inputChecker("닉네임", $("#nickname").val()));
  formData.append("password", inputChecker("비밀번호", $("#password").val()));
  formData.append("comment", inputChecker("코멘트", $("#comment").val()));

  const response = await fetch(`/pmy/comments/${id}`, {method: "POST", body: formData});
  const data = await response.json();
  alert(data['msg']);

  (() => {
    window.location.href = "/comments";
  })()
};

코멘트 포스팅 함수와 크게 차이가 없으며 딱 두 가지 차이가 있는데 코멘트 id를 백엔드에 넘겨준다는 점, 수정 요청이 fulfilled가 되면 /comments 페이지로 이동하도록 즉시 실행 함수를 추가한 점이다.

mongoDB 메소드로 특정 코멘트를 불러와 수정하도록 했다.

@app.route("/pmy/comments/<string:id>", methods=["POST"])
def edit_comment_with_id(id):
    nickname = request.form["nickname"]
    password = request.form["password"]
    comment = request.form["comment"]

    kst = timezone(timedelta(hours=9))
    last_edit_time = datetime.now(tz=kst)

    # 데이터 업데이트
    filter = {"_id": ObjectId(id)}
    update = {"$set": {"nick_name": nickname, "password": password, "comment": comment, "last_edit_time": last_edit_time}}
    db.comments.find_one_and_update(filter, update, return_document=False)

    return jsonify({"msg": "수정을 완료했습니다."})

코멘트가 수정된 시간이 새로운 데이터로 등록되도록 last_edit_time 변수를 생성했다.

보완이 필요한 점

1. 코멘트 수정 시 비밀번호 인증 과정을 추가해야 한다.
2. 모든 비동기 함수에 rejected 상황에 대한 코드 구현이 빠져있다.
3. MongoDB 메소드로 데이터를 수정하는게 아닌 PUT 요청으로 적용할 수는 없을까?

어려웠던 점, 의문점

1. 코멘트 수정 버튼 구현 시 href를 통해 url의 쿼리형태로 필요한 데이터를 전달하는 것과 path에 담아 전달하는 것의 차이는 무엇인가?
2. 메인 페이지에 있는 코멘트의 수정 버튼(a 태그)을 클릭하면 edit.html로 랜더링하면서 코멘트 관련 정보를 함께 보내는 방식을 취했다. 여기서 의문점은 edit.html 파일에서 pmy.css와 pmy.js 파일과 이어주기 위한 경로를 지정할 때 아래와 같이 해야 정상적으로 연결이 되었다.

<link href="../../static/css/pmy.css" rel="stylesheet">
<script src="../../static/js/pmy.js"></script>

edit.html와 index.html(메인페이지) 파일의 위치는 같다. 하지만 edit.html파일은 상대경로 지정에서 상위폴더 이동을 두번이나 해야 정상작동 하였다. index.html은 한번만 해도 되었는데 말이다. 이부분도 쉽게 이해되지 않는다. 3. 전형적인 수정 기능 구현이 무엇인지 궁금하다. 개인적으로 위와 같은 방식이 정석적인 방식이 아닐거라는 의구심이 든다.