201203_TIL

오늘한 일

• twittler 기능 개선(함수 추가)
• tweet 한 날짜 인간 친화적인 방식으로 표현(ex. 1년전, 1달전, 1일전, 1시간전, 1분전, 1초전, 방금전)
• 'check new tweet' 버튼을 눌렀을 때 날짜도 랜덤으로 보이게 하기

 

오늘 느낀점

 

• 현재 시간을 기준으로 tweet 한 시간을 빼서 표현했다(new Date() - new Date(writeday)). 이 값을 이용해 if 처리했다.

function prinitTimeBefore(wrday) {
    let today = new Date();
    let writeday = new Date(wrday);
    let timeBef;

    // 년도
    if(today.getFullYear() > writeday.getFullYear()) {
        timeBef = today.getFullYear() - writeday.getFullYear() + '년';
    } // 월
    else if(today.getMonth() > writeday.getMonth()) {
        timeBef = today.getMonth() - writeday.getMonth() + '달';
    } // 일
    else if(today.getDate() > writeday.getDate()) {
        timeBef = today.getDate() - writeday.getDate() + '일';
    } // 당일인 경우
    else if(today.getDate() == writeday.getDate()) {
        let todayTime = today.getTime();
        let writedayTime = writeday.getTime();

        // 시간 비교
        if(todayTime > writedayTime) {
            let sec = parseInt(todayTime - writedayTime) / 1000;
            let day = parseInt(sec/60/60/24);
            sec = (sec - (day * 60 * 60 * 24));
            let hour = parseInt(sec/60/60);
            sec = (sec - (hour*60*60));
            let min = parseInt(sec/60);
            sec = parseInt(sec-(min*60));

            // 시간
            if(hour > 0) {
                timeBef = hour + '시간';
            } // 분
            else if(min > 0) {
                timeBef = min + '분';
            } // 초
            else if(sec > 0) {
                timeBef = sec + '초';
            } // 지금 Tweet! 하는 경우
            else {
                timeBef = '방금';
            }
        }
    }

    return `${timeBef} 전`;
}

 

• 날짜에 관한 함수를 3개로 나눠봤다. 날짜를 보이게 print(출력) 해주는 함수, 새로운 tweet이 있을 때 날짜를 실제 데이터에 push 하기전에 가공해주는 함수, 날짜를 random하게 생성해주는 함수로 나눴다. 

• 'Go Back' 버튼도 위 그림에서 파란색(페이지 로딩후)과 일치한다.
• inputTime() 함수는 실제 데이터에 들어가는 날짜이다. (ex. 2020-01-03 12:30:20 등)
• randomTime() 함수는 사용자가 'Check new tweet' 버튼을 눌렀을 때 원래 과거에 있던 tweet을 좀 더 현실적으로 보여주고 싶어 구현했다. 날짜를 현재 시간 기준으로 최대 2년 전까지 랜덤하게 생성해준다. (ex. 2018-05-12 07:15:49 등)
• printTimeBefor() 함수는 몇년전, 몇달전, 몇시간전 이렇게 표현해주는 역할을 한다. 단지, DATA에 있는 tweet 날짜를 그렇게 표현해서 보여주는 역할을 한다. 실제 데이터에 몇년전 몇달전으로 들어가게 하는 실수를 범해서는 안된다. (ex. 7달 전, 2년 전, 3시간 전 등)
• 항상 inputTime() 후에는 printTimeBefore() 를 호출해 자동 새로고침 효과를 줬다.
• 현재 사용자의 어떤 action 이 있을 때만 새로고침이 되고 있는데('Tweet!' 버튼, 'check new tweet' 버튼, 'Go Back' 버튼, 사용자 이름 label click) 이런 사용자의 action 이 없어도 주기적으로 auto refresh 해주는 기능을 추가해주고 싶다.