내일배움단 15일 프로젝트 14일차 개발일지

#코딩 개발일지 시작의 한마디

• 14일차! 내일부터는 조금 바쁘기에 오늘 최대한 많이 해두려고 한다.

# 개발 업무내용

[오늘의 목표]

1. 질문페이지 민정님꺼랑 합치기(헤더, 푸터)
2. 시간까지 db에 나올 수 있도록 공부, 구현. (flask 프레임워크 - import datetime)
3. 메인페이지 섹션 2 백엔드 부분 정리
4. 깃허브에 정리해서 올리기!! - 다른 분들도 함께 잘 볼 수 있는지 확인

[토의 내용]

• 진전 상황 보고
• 앞으로의 구체적인 계획(서버에 올리기, 프론트 css 정리 등)

# 업무 중 이슈/고민 .. 그리고 해결한 내용

1. 질문 페이지에서 답변한 시간까지 db에 저장될 수 있도록 구현 완료

이성님이 알려주신 flask 프레임워크의 datetime 사용해서 쉽게 구현했다.

먼저, "from datetime import datetime" 으로 임포트 하고 strftime 함수를 사용해서 년, 월, 일 시간, 분을 한글로 표시할 수 있도록 했다. 그리고 db에 저장! only 파이썬으로만 쉽게 구현 가능하다.

 

처음에 단순하게 datetime.now()만 이용해서 했을 때는 11행처럼 날짜, 시간 형식으로 나왔고,

strftime 함수까지 사용하니 12, 13, 14행처럼 년, 월, 일, 시, 분이 붙은 한국어 txt로 나왔다.

 

 

참고 사이트

https://wikidocs.net/83477

04-5 시간 모듈 datetime 활용

 

 

2. 메인페이지 섹션 2 백엔드 부분

민정님, 정현님이랑 밤새 코딩,,, ㅋㅋㅋㅋㅋㅋㅋㅋ 겨우겨우 마무리했다. 금방할 줄 알았는데 생각보다는 오래 걸렸던...!ㅠㅠ

# mainpage - section 2
@app.route('/get', methods=['GET'])
def home_get():
    home_question = list(db.contents.find({}, {'_id': False, 'question': 1}))
    home_answer = list(db.contents.find({}, {'_id': False, 'answer': 1}))

    return jsonify({'home_q': home_question, 'home_a': home_answer})

서버 부분

 

<script>
        window.onload = function () {
            $.ajax({
                type: "GET",
                url: "/get",
                data: {},
                success: function (response) {
                    let questions = response['home_q']
                    let answers = response['home_a']

                    let question_0 = questions[questions.length - 3]['question']
                    let question_1 = questions[questions.length - 5]['question']
                    let question_2 = questions[questions.length - 8]['question']
                    let question_3 = questions[questions.length - 10]['question']
                    let question_4 = questions[questions.length - 13]['question']
                    let question_5 = questions[questions.length - 17]['question']
                    let question_6 = questions[questions.length - 19]['question']

                    let answer_0 = answers[answers.length - 3]['answer']
                    let answer_1 = answers[answers.length - 5]['answer']
                    let answer_2 = answers[answers.length - 8]['answer']
                    let answer_3 = answers[answers.length - 10]['answer']
                    let answer_4 = answers[answers.length - 13]['answer']
                    let answer_5 = answers[answers.length - 17]['answer']
                    let answer_6 = answers[answers.length - 19]['answer']

                    let temp_html = `<li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_0}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_0}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_1}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_1}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_2}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_2}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_3}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_3}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_4}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_4}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_5}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_5}</div>
                                            </div>
                                     </li>
                                     <li class=qna-showcard qna-showcard-1">
                                            <div class="show-question-container">
                                                <div class="show-question-text">${question_6}</div>
                                            </div>
                                            <div class="show-answer-container">
                                                <div class="show-answer-text">${answer_6}</div>
                                            </div>
                                     </li>`

                    $('#qna-showlist').append(temp_html);

클라이언트 부분

뒤에는 슬라이드 자바스크립트가 이어져서 생략했다.

랜덤으로 나오는 기능은 구현이 어려워서, questions의 length에서 내가 랜덤으로? ㅋㅋㅋㅋㅋㅋ 값을 빼서 나오도록 했다. 인간 랜덤 기능,,,^^ 더 이상 뭘 할 수가 없어서 이대로 놔뒀다. 랜덤으로 나오는 기능은 아마 프로젝트 끝나고 발전시켜야 할 것 같다.

 

 

# To-do List

전체적인 것들 정리 + 서버에 올리기