[WIL]2021.10.4 - 2021.10.11

이번주에 한일

• 마이페이지 디자인 구현
• 그래프 구현
• 프로그래스바 구현
• 메인페이지 자정을 포함한 공부시간때, 공부시간을 분할해서 데이터 넣기 구현
• 노션에 공부한 내용들 정리(TIL)

한 내용

그래프

프론트에서는 chart js 백에서는 for문을를 적극 활용해서 그래프를 완성시켰다. chart js에서 그래프 형식들을 다 정해줘서 나는 백엔드에서 받은 값을 넣기만 하면 됐다.

function post_study_time_graph() {
    $.ajax({
        type: "POST",
        url: "/line-graph",
        headers: {
            Authorization:  getCookie('access_token')
        },
        data: {
            year: $("select[name=year]").val(),
            month: $("select[name=month]").val()
        },
        success: function (response) {
            let day_list = response['day_list']
            let day_time_list = response['day_time_list']

            let study_time_graph = document.getElementById('study_time_graph').getContext('2d');
            let barChart = new Chart(study_time_graph, {
                type: 'line',
                data: {
                    labels: day_list,
                    datasets: [{
                        label: "초",
                        data: day_time_list,
                        backgroundColor: 'skyblue',
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: '월별 공부시간',
                        fontSize: 30,
                        fontColor: 'green'
                        },
                    legend: {
                        display: false,
                        align: top
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                callback: function(label, index, labels) {
                                    return parseInt(label/3600) +'h';
                                    },
                                beginAtZero: true,
                                stepSize: 3600,
                            }
                        }]
                    }
                }
            });

        }
    })
}

백에서는 그달에 있는 객체들을 다 불러오고 비어있는 날에는 0을 넣었다.

# 월별 시간그래프
@app.route('/line-graph', methods=['POST'])
@login_required
def post_study_time_graph():
    user_nickname = request.user['nick_name']
    year = int(request.form['year'])
    month = int(request.form['month'])

    monthly_user_data = list(db.time.find({
        'nick_name': user_nickname,
        'year': year,
        'month': month}, {'_id': False}).sort("day", 1))

    # 만약 데이터가 없는 날짜는 0으로 처리한다.
    day_list = []
    day_time_list = []
    for i in range(31):
        day_list.append(i)
        day_time_list.append(0)

    for day in monthly_user_data:
        day_time_list[day['day']] = day['study_time']
    return jsonify({'day_list': day_list, 'day_time_list': day_time_list})

메인페이지 자정을 포함한 공부시간때, 공부시간을 분할해서 데이터 넣기 구현

생각보다 어려워서 아래와 같이 어떤식으로 코드를 짤지 계획하고 시작했다.확실히 계획하고 시작하니 한결 괜찮다는 느낌을 받았다.

end button -> onclick(checkout_choice())

if (현재시간이 자정이면){
	var 전날 공부시간을 저장 => 어디다가?쿠키
}

funtion checkout_choice {
	if (전날 공부시간이 있으면) {
		funtion midnight()
	}else{
		funtion checkout()
		}
	}
}

function checkout() {
	ajex{
	공부시간,
        status
	}
}

funtion midnight(){
	ajax{
		전날공부시간                    -> 백에서 전날 데이터로 저장
		지금까지 공부시간                -> 백에서 오늘 데이터로 저장
		status
		}
	}
}

• 노션에 공부한 내용들 정리(TIL)
  
  

  이런식으로 매일 공부한걸 정리하면서 공부를 진행해봤다. 귀찮을줄 알았는데 오히려 개념을 확실히 집고 넘어간다느느낌이 있어서 앞으로도 이렇게 할 거같다.

느낀점

이번주도 힘든 한주였다. 우리 자체 스프린트가 12일까지라 오늘까지 어떻게든 기능구현을 완료하려고 다들 열심히 해주었다. 잠도 제대로 못잤는데 그래도 기분이 태도가 되지않도록 주의해야겠다.