웹개발 종합반 5주차 내용

프로젝트 수행 흐름

1. 프로젝트 폴더에서 vscode실행
2. 'app.py'만들기
3. 가상환경 구축

python3 -m venv venv

4. templates 폴더 프로젝트 폴더에 만들기
5. templates 폴더에 'index.html' 만들기
6. 필요한 라이브러리, 프레임워크 설치(이 경우엔 flask, pymongo, cerifi, dnspython)

pip install flask pymongo certifi dnspython

7. 'app.py'에 import

import certifi
from pymongo import MongoClient
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

ca = certifi.where()
client = MongoClient(
    'mongodb+srv://<username>:<password>@cluster0.iqtkosf.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.<clustername>

8. 포스팅 기능을 먼저 구현하여 DB에 안전하게 저장되는지 확인

<script>
  function save_comment() {
        let comment = $("#comment").val();
        let name = $("#name").val();

        let formData = new FormData();
        formData.append("comment_give", comment);
        formData.append("name_give", name);

        fetch("/guestbook", { method: "POST", body: formData })
          .then((res) => res.json())
          .then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }
</script>

이 과정을 풀어서 설명하자면, 'comment' id를 가진 태그의 value를 잡아서 'comment'라는 변수에 할당. 'name'이라는 id를 가진 태그의 value를 잡아서 'name'이라는 변수에 할당.
'formData'라는 변수에 "comment_give"라는 이름으로 comment를 담고, "name_give"라는 이름으로 name을 담아서 서버로 POST함.
서버에서 담아오는 'data'의 "msg"의 키값을 alert로 실행 후 브라우저를 재랜더링.

<py>
  @app.route("/guestbook", methods=["POST"])
  def guestbook_post():
    comment_receive = request.form['comment_give']
    name_receive = request.form['name_give']

    doc = {'comment': comment_receive,
           'name': name_receive}

    db.temp.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})
</py>

이 과정을 풀어서 설명하자면, 'comment_give'라는 이름으로 들어온 데이터와 'name_give'라는 이름으로 들어온 데이터를 각각 'comment_receive'와 'name_receive'라는 변수에 할당.
'doc'이라는 객체에 값을 담아서 mongoDB에 미리 설정된 클러스터에 temp라는 폴더로 삽입하고, 완료 메시지를 리턴.


이 과정이 완료되면 서버에서 전달해준 데이터를 화면에 표시하는 GET요청 과정을 진행

<py>
  @app.route("/guestbook", methods=["GET"])
  def guestbook_get():
    all_temps = list(db.temp.find({}, {'_id': False}))
    return jsonify({'result': all_temps})
</py>

이 과정을 풀어서 설명하자면, 'all_temps'라는 변수명에 DB에 설정된 클러스터의 temp 폴더로부터 데이터를 받아 할당하고 js에 'result'라는 속성에 대한 값으로 전달.

<script>
  function show_comment() {
        fetch("/guestbook")
          .then((res) => res.json())
          .then((data) => {
            $("#comment-list").empty();
            data["result"].forEach((a) => {
              let name = a["name"];
              let comment = a["comment"];

              temp_html = ` <div class="card">
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0">
                                      <p>${comment}</p>
                                      <footer class="blockquote-footer">${name}</footer>
                                    </blockquote>
                                </div>
                            </div>`;

              $("#comment-list").append(temp_html);
            });
          });
      }
</script>

이 과정을 풀어서 설명하자면, '/guestbook'이라는 URL로 부터 데이터를 받아서 'data'라는 변수에 할당. 'comment-list'라는 id를 가진 태그의 값을 전부 비움. 서버로부터 전달받은 'data'라는 변수에 대해 forEach() 함수를 돌면서 'name'과 'comment' 변수에 해당하는 데이터들을 할당.
'temp_html'이라는 변수에 추가하고자 하는 태그의 모양을 할당. 동적으로 치환하고자 하는 태그의 값을 템플릿 리터럴을 활용하여 치환.
'comment-list'라는 id값을 가진 태그에 붙여넣기.