2021.09.26.일

최대환·2021년 9월 26일

TIL 내일배움캠프

TIL

목록 보기

54/55

🔥오늘의 각오🔥

🥅목표

[프로젝트]프론트에서 받은 시간데이터를 활용해서 db에 저장해놓는 기능
엊그제 TIL답변 적기

💪 각오

오늘 진도를 빼놔야 이번주가 편하다.

📚오늘의 공부📚

⏱ 공부시간

10시간 49분

📝 공부내용

수직 가운데 정렬

<body><div class="helper"></div><div class="container"><div></body>

    body {
        height: 1000px;
        background-color: gray;
        text-align: center;
 	}
    
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;

        /* 설명을 위해서 */
        /*width: 10px;*/
        /*background-color: red;*/
    }

    .container {
        margin: auto;
        width: 100%;
        background-color: gray;
        display: inline-block;
        vertical-align: middle;
    }

수직 가운데 정렬을 진행했다. 가짜요소를 만들고 그 가짜 요소와 가운데 정렬하고자하는 요소를 vertical-align: middle 로 맞추고 가짜요소의 height: 100%를 해주어 가운데 정렬을 하였다.

체크인/아웃 기능

mongoDB

-app.py

@app.route('/check-in', methods=['POST'])
def check_in():
    start_time = request.form['start_time']
    status = request.form['status']
    year = request.form['year']
    month = request.form['month']
    day = request.form['day']
    week = request.form['week']
    # doc = {'name': 'bobby'}
    # db.user.insert_one(doc)

    db.user.update_one({'name': 'bobby'}, {'$set': {
        'status': status,
        'date.year': year,
        'date.month': month,
        'date.week': week,
        'date.day': day,
        'date.start_time': start_time,
    }})

    return jsonify({"msg": f'{start_time}에 {status} 하셨습니다'})

@app.route('/check-out', methods=['POST'])
def check_out():
    stop_time = request.form['stop_time']
    status = request.form['status']
    study_time = request.form['study_time'][:8]

    db.user.update_one({'name': 'bobby'}, {'$set': {
        'status': status,
        'date.stop_time': stop_time,
        'date.study_time': study_time
    }})
    return jsonify({"msg": f'오늘 총 {study_time} 동안 업무를 진행하셨습니다.'})

javascript

function check_in() {
    let present_time = $("#Clock").text()

    let date_list = $("#Clockday").text().split(' ')
    let year = date_list[0]
    let month = date_list[1]
    let day = date_list[2]
    let week = date_list[3]
    $.ajax({
        type: "POST",
        url: "/check-in",
        data: {
            start_time: present_time,
            status    : "출근",
            year : year,
            month: month,
            day: day,
            week: week,
        },
        success: function (response) {
            // window.location.reload();
        }
    })
}


function check_out() {
    let present_time = $("#Clock").text()
    let study_time = $("#time").text()
    $.ajax({
        type: "POST",
        url: "/check-out",
        data: {
            stop_time: present_time,
            status: "퇴근",
            study_time: study_time,
        },
        success: function (response) {
            alert(response["msg"]);
            // window.location.reload();
        }
    })
}

아래와 같이 체크인, 아웃기능을 구현했다. 체크인 아웃 기능은 만드는데는 오랜시간이 걸리지 않았지만 어떤식으로 DB에 저장해야되는지, 그리고 어떻게하면 효율적으로 기능을 할지 고민하면서 이것저것 많이해보며 시간을 보냈다. 우선 첫번째 삽질은 체크인/아웃기능을 하나의 api로 만들려고 한거 였다. 그땐 왠지 하나의 api를 사용하는게 더 효율적이고 좋다고 생각했다. 그래서 몇시간동안 열심히 두개를 합치려고 시도했는데 합치면 합칠수록 코드가 더러워지는걸 느꼈다. 가독성이 떨어졌고 그렇게 효율적인거 같지도 않았다. 잠깐 쉬려 침대에 누워 이전 프로젝트들의 경험들을 떠올렸는데 그때 댓글기능을 할때 물론 같은 url이었지만 댓글 생성, 수정, 삭제 를 각각메소드를 나누며 api를 짰다. 비슷한 기능이면 하나의 api로 하는것도 맞는거 같고 가독성을 위해 두개의 api로 나누는것도 맞는거 같기도하다. 그 둘 사이의 균형을 맞추는게 중요한거같다.

🎯하루 회고🎯

오늘 아침에 잠깐 쉬던중 같은 내일배움캠프 수강생인 나연님의 블로그를 우연히 보았다. 그분도 매일 TIL을 쓰셨는데 정말 구체적이고 많이써서 신선한 충격이었다. 그리고 이어 나도 오늘은 저렇게 써야지 하고 쓸라했는데 막상 쓰려고 하니 너무 힘들었다. 욕심부리지말고 '블로그 올리는일을 간단한 일이다. 내가 한거 복붙해서 올려놓고 간단하게 설명만하고 회고만 하면 끝'이라는 생각을 정착시키는게 먼저인거같다.