19.12.23 개발기록 -[Javascript] Newsfeeds 의 ~시간 전, ~분 전 구현하는 것과 기 올린 게시물의 시간에 따라 상태 변화 구현의 차이점
자 오늘 포스팅 할 내용은 무엇이냐~
Newsfeeds에 ~시간 전을 구현 했을 때와, 게시물의 기한을 정해놓고, 현재시간이 그 기한을 지나게 되면 상태가 변화하게 될 때 구현하는 코드의 차이점을 알아보자 !
우선 첫 번째로 ~ 시간전을 구현 했을 때 결과화면을 보자 !
https://hammerbrother.tistory.com/8
19.12.06 개발 기록 - [Javascript] 뉴스피드의 몇 년 전, 몇 개월, 몇 일 전, 전 몇 시간 전, 몇 분 전, 몇 초 전 만들기
오늘의 포스팅 내용은 페이스북 뉴스피드나 인스타그램 포스팅 등에서 볼 수 있는 ~~시간 전을 계산 하여 Javascript로 구현하는 Syntax이다. 뉴스피드 기능에 있어서 굉장히 중요하고 필요한 기능이라고 생각되어..
hammerbrother.tistory.com
내가 저번에 포스팅 했던 뉴스피드의 ~시간 전을 구현하는 방법이다.
오늘 포스팅에서 필요한 코드는
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
if (crrtYear > createdYear) {
minus = crrtYear - createdYear;
thirdSpan.innerHTML = minus + '년 전';
} else if (crrtMonth > createdMonth) {
minus = crrtMonth - createdMonth;
thirdSpan.innerHTML = minus + '개월 전';
} else if (crrtDate > createdDate) {
minus = crrtDate - createdDate;
thirdSpan.innerHTML = minus + '일 전';
} else if (crrtDate == createdDate) {
var crrtTime = crrtDate.getTime(),
createdTime = createdDate.getTime();
if (crrtTime > createdTime) {
sec = parseInt(crrtTime - createdTime) / 1000;
day = parseInt(sec / 60 / 60 /24);
sec = (sec - (day * 60 * 60 * 24));
hour = parseInt(sec / 60 / 60);
sec = (sec - (hour * 60 * 60));
min = parseInt(sec / 60);
sec = parseInt(sec - (min * 60));
if (hour > 0) {
thirdSpan.innerHTML = hour + '시간 전';
} else if (min > 0) {
thirdSpan.innerHTML = min + '분 전';
} else if (sec > 0) {
thirdSpan.innerHTML = sec + '초 전';
}
}
|
|
이 정도가 되겠다.
~년 전을 구현할 때에는 현재 년도(crrYear)와 게시물이 만들어진 년도(createdYear)를 비교해, 현재 년도가 더 크다면 거기서 차이만 계산해주면 되고, 마찬가지로 ~ 개월 전, ~ 일 전, 등등도 모두 현재의 값이 더 크다면 차이만 구해주면 됐었다.
그러나
위 사진과 같이 게시물의 기한을 정해두고, 현재 시간이 그 기한을 넘겼을 때 status를 정해 줄 때에는,
위와 같은 코드로 status를 부여하게 되면 정상적으로 작동하지 않았다.
처음에는 아래의 사진과 같이 코드를 짰는데,
이렇게 하니 현재 년도(nowYear)가 기한 년도(deadLineYear) 보다 작더라도, 현재 월(nowMonth)이 기한 월(deadLineMonth) 보다 크면, 게시물의 status가 'finalized' 으로 부여되었다. 예를 들어, 지금 2019년 12월 인데, 게시물의 기한을 2020년 1월로 해도 게시물의 status 는 finalized가 되는 현상이 발생했다.
그리하여, 아래 코드와 같이, nowYear > deadLineYear 이면 finalized, 만약 nowYear == deadLineYear 이면 nowMonth > deadLineMonth 일 때 finalized 를 부여하는 방식으로 해주었다.
그랬더니 아주 잘 동작하였다 !
이렇듯 ~시간전을 구현할 때와, 기한 시간과 현재시간을 비교해야할 때 구현하는 코드의 차이점을 잘 알아두도록 한다 !
이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)감사합니다 !