4주차 숙제 중 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4주차 숙제 중

undefined주차

김*성

・

추천

・

조회수

답변 완료

app.py, index.html, style.css (정답 코드에서 style을 css파일로 분리한 환경입니다.)

설치되어 있는 python interpreter 로는 해설 방송 언급된 대로 flask, pymongo, dnspython 입니다.

이 상태에서 set_temp(); 가 없는 상태에선

개발자 툴에서 위와 같은 오류 문구가 뜨고,

set_temp(); 를 추가하면

위와 같은 오류 문구가 뜹니다 ㅜㅜ

또 대부분의 코드가 예시 답변과 영상 속 코드와 비슷하여, 코드 상의 차이가 없어보이는데

이름과 메시지 입력 시 mongoDB 데이터 베이스로 정보가 post 되긴하나..

다시 로컬웹사이트 내 그 정보가 다시 Get 되는 것 같진 않아 질문드리고 싶습니다 ㅜㅜ

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>돈 많은 백수들</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"/>
    <link rel="stylesheet" href="../static/guestbookStyle.css"/>
    <link
            href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
            rel="stylesheet"
    />
    <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
            rel="stylesheet"
    />
    <link
            href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap"
            rel="stylesheet"
    />

    <!-- 방명록 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            set_temp();
            show_comment();
        });

    function save_comment() {
        let name = $('#name').val()
        let comment = $('#comment').val()

        $.ajax({
            type: 'POST',
            url: '/homework',
            data: {'name_give': name, 'comment_give': comment},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        })
    }

    function show_comment() {
        $('#comment_list').empty()
        $.ajax({
            type: "GET",
            url: "/homework",
            data: {},
            success: function (response) {
                let rows = response['comments']
                for (let i = 0; i <rows.length; i++){
                    let name = rows[i]['name']
                    let comment = rows[i]['comment']

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

                    $('#comment_list').append(temp_html)
                }
            }
        });
    }
</script>
    <!-- 방명록 종료 -->
</head>
<body>
<!-- navbar -->
<nav class="navbar">
    <div class="navbar__logo"><a href="">돈 많 백</a></div>
    <ul class="navbar__menu">
        <a href="">
            <li>돈많백?</li>
        </a>
        <a href="">
            <li>팀원TMI</li>
        </a>
        <a href="">
            <li>목표</li>
        </a>
        <a href="">
            <li>방명록</li>
        </a>
    </ul>
</nav>
<!-- navbar 종료 -->

<!-- 방명록 -->
<!-- 1. 패키지 설치  -->
<!-- flask, pymongo, dnspython -->

    <div class="mypic">
        <h1>돈많백팀에 응원을 남겨주세요</h1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">이름을 입력해주세요.</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">메시지를 입력해주세요.</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">댓글 남기기</button>
    </div>
    <div class="mycards" id="comment-list">
    </div>


</body>
</html>

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

from pymongo import MongoClient
client = MongoClient("mongodb+srv://test:sparta@cluster0.kfz2usy.mongodb.net/?retryWrites=true&w=majority")
db = client.sparta

@app.route('/')
def home():
   return render_template('guestbookIndex.html')

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form["name_give"]
    comment_receive = request.form["comment_give"]

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

    db.homework.insert_one(doc)
    return jsonify({'msg':'감사합니다!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments':comment_list})


if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

body {
    /* font-family: 'Do Hyeon', sans-serif; */
    /* font-family: 'Nanum Gothic', sans-serif; */
    font-family: 'Noto Sans KR', sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 8px 12px;
    border-bottom: 1px solid black;
}

.navbar__logo {
    font-size: 24px;
    font-weight: bolder;
}

.navbar__menu {
    display: flex;
    list-style: none;
    padding-left: 0;
}

/* .navbar__menu a {
  width: 100%;
} */

.navbar__menu li {
    padding: 8px 12px;
    margin-left: 4px;
}

.navbar__menu li:hover {
    color: white;
    padding: 8px 12px;
    background-color: black;
    border-radius: 8px;
}


.dynamic-g {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
    background: grey;
}

.lg-text {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 5px;
}

#dynamic {
    color: red;

}


@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 8px 24px;
    }

    .navbar__logo {
        margin-bottom: 4px;
    }

    .navbar__menu {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar__menu a {
        width: 100%;
    }

    .navbar__menu li {
        text-align: center;
        margin: 4px 0;
    }
}

.guest_room {
    width: 605px;
    height: 540px;
    overflow-y: scroll;
    overflow-x: hidden;
}


.guestbook-image {
    flex: 0 0 10rem;
    height: 9rem;
    background-size: cover;


    display: flex;
    align-items: center;
    justify-content: center;
}


.background-1 {
    background-image: url("/모각코3월/미니미배경1.png");
    margin: 15px;
}

.background-2 {
    background-image: url("/모각코3월/미니미배경2.png");
    margin: 15px;
}

.background-3 {
    background-image: url("/모각코3월/미니미배경3.png");
    margin: 15px;
}


.guestbook-image > img {
    width: 85%;
}


.guest_box {
    background-color: rgb(185, 154, 243);
    color: aliceblue;
    padding: 7px;
    margin: 15px;
}


.guest_name {
    color: rgb(98, 96, 245);
    font-weight: bold;
}

.guest_record {
    justify-content: center;
    font-weight: bold;
    line-height: 30px;
    margin: 15px;
}


.guest {
    height: 180px;
    width: 600px;
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
}

/*방명록 CSS*/



.mypic {
    width: 100%;
    height: 300px;

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://img.freepik.com/free-photo/business-hands-joined-together-teamwork_53876-14936.jpg?w=2000');
    background-position: center 60%;
    background-size: cover;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mypost {
    width: 95%;
    max-width: 500px;
    margin: 20px auto 20px auto;

    box-shadow: 0px 0px 3px 0px black;
    padding: 20px;
}

.mypost > button {
    margin-top: 15px;
}

.mycards {
    width: 95%;
    max-width: 500px;
    margin: auto;
}

.mycards > .card {
    margin-top: 10px;
    margin-bottom: 10px;
}

댓글 알림