웹개발 종합반 팬명록 기능추가하기

날짜, 플로팅버튼, 스크롤페이드인

현재의 시간을 불러와서 js에서 추가한다.

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    year = datetime.today().year
    month = datetime.today().month
    day = datetime.today().day
    time = datetime.today().hour


    doc = {
        'name': name_receive,
        'comment': comment_receive,
        'year' : year,
        'month': month,
        'day': day,
        'time' : time
    }
    db.homework.insert_one(doc)

    return jsonify({'msg1':'기록되었습니다.'})

datetime.today()를 이용해 년/월/일/시를 함께 db에 올린다.

success: function (response) {
    let reverse = response['homework']
    let rows = reverse.reverse()

    for (let i = 0; i < rows.length; i++) {
        let name = rows[i]['name']
        let comment = rows[i]['comment']
        let year = rows[i]['year']
        let month = rows[i]['month']
        let day = rows[i]['day']
        let time = rows[i]['time']

        let temp_html = `<div class="card">
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0">
                                        <p>${comment}</p>
                                        <footer class="blockquote-footer">${name}</footer>
                                        <div class="date">${year}년 ${month}월 ${day}일 ${time}시 무렵의 기록입니다.</div>
                                    </blockquote>
                                </div>
                            </div>`
        $('#comment-list').append(temp_html)

    }
}

그담에 i 열에 대한 내용을 가져올때 년월일시를 같이 가져와서 ${}를 통해 문장을 뿌려준다.

---

localhost에서는 제대로 작동했는데, 서버로 올려서 확인하니 시간대가 맞지 않아서 파이썬에서 시간가져오는 부분을 수정하였다. ㅠㅠ 이해보단 복붙으로 해결하는 자세...핳

KST = timezone(timedelta(hours=9))

year = datetime.now(KST).year
month = datetime.now(KST).month
day = datetime.now(KST).day
time = datetime.now(KST).hour

이렇게 시간대를 설정해 줄수 있는 방식으로 바꾸었다 ^_ ㅜ

aws에서 서버시간이 다른걸까 하고 설정해봤는데 그건 정상이었음.

플로팅버튼은 

https://aboooks.tistory.com/99

[html/css] 맨 위로 가기 버튼 만들기

https://goldsystem.tistory.com/844

블로그 하단에 버튼 만들기 (플로팅 버튼)

두군데를 참조하였다... 위계를 살짝 틀린것같지만 너무 귀찮아서 이쯤에서 종료...

스크롤 페이드인은

https://seons-dev.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%8B%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-Fade-In-%ED%9A%A8%EA%B3%BC%EC%A3%BC%EA%B8%B0

(티스토리) 페이지 스크롤시 이미지 Fade In 효과주기