POMOTODO : issue (조건에 따른 홈페이지 새로고침)

POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다.

 

 

POMOTODO.kr

 

 

What is POMOTODO?

---

 

1. 문제 인식

날짜가 바뀌면 데이터를 새로 생성해서 하루의 기록들을 저장하는데

'/' post요청으로 데이터를 생성하고, '/' get요청으로 데이터를 불러오도록 설계했다

하지만 로그인하면 새로 생성된 데이터가 아닌 DB에 존재하는 가장 최근 데이터(어제의 데이터)를 불러온 뒤 새로운 데이터를 생성해서

새로고침을 눌러줘야하는 문제가 생겼다

2. 문제 원인 분석

 

console.log로 확인해 본 결과 post 요청 후 DB로 데이터를 보내고 생성하는 동안 get요청에 대한 응답이 끝나버리기 때문에 생기는 문제라고 판단했다

3. 문제 해결

 

'/'post 요청시 '유저의 id'와 '날짜' 데이터를 서버로 보내고 서버에서는 데이터를 DB에서 조회한다

정보가 있을 경우, 없을 경우 각기 다른 값을 응답하도록 하고, 클라이언트에선 응답 값을 토대로 데이터가 있을 경우는 패스,

데이터가 없을경우 1ms뒤에 새로고침 하도록 구현했다

 

4. 관련코드

//header.js
function checkData(){
    $.ajax({ 
        method : 'post',
        url : '/',
        data : {id : userId.innerHTML, yyyymmdd : yyyymmdd()},
        success : function(e) {
            if(e.message == '데이터가없음'){
                setTimeout(function(){location.reload()},1);
            }else{
                console.log(e.message)
            }
        },
        error : function(xhr, status, error) {
            console.log('홈 ajax 실패');
        }
    })
}
// '/'get 요청시 한번 검사하도록 한다
checkData();

function setClock(){
    let dateObject = new Date();
    let year = dateObject.getFullYear();
    let month = dateObject.getMonth()+1;
    let date = dateObject.getDate();
    let hour = addStringZero(dateObject.getHours());
    let min = addStringZero(dateObject.getMinutes());
    document.getElementById("POMOTODO__clock").innerHTML = year + ". " + month + ". " + date + " . " + hour+ " : " + min ; 
    //00시00분 초기화코드
    if(hour == '00' && min == '00'){
        checkData();
    }
}

window.onload = function(){
    setClock();
    setInterval(setClock,1000);
}

//server.js

app.post('/',function(req, res){
        // 서버에 날짜에 따른 데이터 생성, post요청은 홈으로 리다이렉트 할 때마다 한다 - 클라이언트의 시간이 00시 00분이면 리다이렉트 시키기 때문에 날짜변경되면 데이터 생성하도록
        // console.log(req.body.id) // ajax전달받는 데이터 id 
        // console.log(req.body.yyyymmdd) // ajax 전달받는 날짜
        if(req.body.id !== 'log in'){ //회원의 데이터만 생성
            db.collection('pomodoro').findOne({id: req.body.id, 'yyyymmdd' : req.body.yyyymmdd}, function(err, pomodoroResult){
                if(pomodoroResult==null){ // 데이터가 없으면 새로운 데이터 생성
                    db.collection('pomodoro').insertOne({ 'id' : req.body.id, 'yyyymmdd' : req.body.yyyymmdd ,'contentHTML' : '' }, function(err, result){
                        console.log('pomo생성')
                    });
                    db.collection('todolist').findOne({id: req.body.id, 'yyyymmdd' : req.body.yyyymmdd}, function(err, todolistResult){
                        if(todolistResult==null){
                            db.collection('todolist').insertOne({ 'id' : req.body.id, 'yyyymmdd' : req.body.yyyymmdd ,'todoListHTML' : '' }, function(err, result){
                                console.log('todo생성')
                            });
                            db.collection('not-todolist').findOne({id: req.body.id, 'yyyymmdd' : req.body.yyyymmdd}, function(err, nottodolistResult){
                                if(nottodolistResult==null){
                                    db.collection('not-todolist').insertOne({ 'id' : req.body.id, 'yyyymmdd' : req.body.yyyymmdd ,'notTodoListHTML' : '' }, function(err, result){
                                        console.log('not-todo생성')
                                    });
                                    res.status(200).send({ message : '데이터가없음'}); 
                                }
                            })
                        }
                    })
                }else{
                    res.status(200).send({ message : '데이터가있음'}); 
                }
            })
        }
    })

5. 느낀 점

서버에서 passport를 사용하기 때문에 응답 값을 내가 원하는 대로 받을 수 없는 상황이 발생했다.

그래서 이런저런 방법을 다 사용해봤지만 먼 길을 돌아가는 느낌을 지울 수 없었다

분명 더 좋고 빠른 방법이 존재할 거라 생각하고, 현재 여러 가지 상황을 고려해서 낸 최선의 방법이라고 생각하지만,

어쨌든 새로고침이 하루에 한 번 생기는 것 이기 때문에 많이 아쉽다

추후에 좀 더 개발에 대한 이해도가 깊어진다면 더 좋은 방법으로 수정해야겠다