안드로이드, 크롬에서는 새글 표시가 잘 나왔는데 아이폰에서는 새글 표시가 안나왔다.
그 이유가 가장 최신 글을 쓴 날짜와 글을 읽은 날짜를 비교해서 새글 표시를 노출 시켰다.
이때 날짜 비교를 하기 위해 new Date();를 사용했었다.
안드로이드, 크롬에서는 새글 표시가 잘 노출이 됐는데 아이폰에서만 노출이 안됐다.
찾아보니까 new Date()가 익스나 사파리에서는 동작하지 않는다고했다.
이 이슈를 해결하기 위해 나와있는 방법 대부분이 moment js를 사용하는 것이였다.
moment js 를 사용해서 수정해주니까 간단하게 수정할 수 있었고, 결과도 잘 나왔다.

원래 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 최근 등록된 답글이 있다면
if ("<c:out value='${newCommentDate}'/>") {
	var newCommentDate = new Date("<c:out value='${newCommentDate}'/>");
	var recentCommentViewDate;

	// 쿠키에 최근에 게시글 확인한 날짜가 있다면 가져옴
	if($.cookie('VOC_COMMENT_VIEW')) {
		recentCommentViewDate = new Date($.cookie('VOC_COMMENT_VIEW'));
		// 새로운 게시물의 날짜가 더 크다면
		if (newCommentDate > recentCommentViewDate) {
			$('#petpotVoc').addClass('setMenu-on');
		}
	} else {
		$('#petpotVoc').addClass('setMenu-on');
	}
}
1
2
3
4
5
// 글을 읽었을 경우 cookie에 현재 날짜를 저장해준다.
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/moment.js"></script>

$.cookie('VOC_COMMENT_VIEW', new Date().toISOString(), {expires: 30, path: '/'});

바꾼 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 최근 등록된 답글이 있다면
if ("<c:out value='${newCommentDate}'/>") {
	var newCommentDate = moment("<c:out value='${newCommentDate}'/>");
	var recentCommentViewDate;

	// 쿠키에 최근에 게시글 확인한 날짜가 있다면 가져옴
	if($.cookie('VOC_COMMENT_VIEW')) {
		recentCommentViewDate = moment($.cookie('VOC_COMMENT_VIEW'));
		// 새로운 게시물의 날짜가 더 크다면
		if (newCommentDate > recentCommentViewDate) {
			$('#petpotVoc').addClass('setMenu-on');
		}
	} else {
		$('#petpotVoc').addClass('setMenu-on');
	}
}
1
2
3
4
5
// 글을 읽었을 경우 cookie에 현재 날짜를 저장해준다.
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/moment.js"></script>

$.cookie('VOC_COMMENT_VIEW', moment().format('YYYY-MM-DD HH:mm:ss'), {expires: 30, path: '/'});

moment js 다운

moment/moment

moment js 사용

JavaScript Moment.js 라이브러리

아이폰 이슈

아이폰(IOS) javascript new Date 이슈