[Frontend/Javascript] 날짜계산하기 - 비밀번호 변경일로부터 3개월 이후

데이터를 화면에 보여주다 보면 날짜의 형식이나, 날짜를 계산하는 문제가 많이 생기게 됩니다. 예를들면, X일 이후에 안보이게 해주세요. 특정 기간에만 보여지도록 해주세요 등의 요청사항이 있습니다.

 

이런 요청사항들 중에서도 가장 보편적인 경우가 있습니다. 비밀번호 변경일로부터 3개월 이후가 되면 비밀번호 변경 팝업이 뜨는 요구사항입니다.

 

서버에서는 아래와같이 비밀번호 변경일자가 넘어옵니다.

 

var passwordUpdateDate1 = "2020-02-01";
var passwordUpdateDate2 = "20200201";

 

이제 여기서 3개월이 지났는지를 검사하기 위한 절차는 다음과 같습니다.

 

1. 변경일자를 Date 객체로 바꾸기

2. 바꾼 Date 객체에 3개월을 더하기

3. 현재 날짜와 비교하기

 

---

변경일자를 Date 객체로 바꾸기

만약에 형식이 YYYY-MM-DD 로 되어있다면 객체로 변경하기가 매우 편합니다. 다음과 같이 그저 Date 객체 생성시에 인자로 전달만 하면 됩니다.

 

var dateString = "2020-02-01";

new Date(dateString)

 

만약에 YYYYMMDD 와 같이 다닥다닥 붙어있다면 다시 YYYY-MM-DD로 만들어 주신 다음 위와같은 방법을 사용하시면 될 것 같습니다.

 

var ds = "20200201";
var dateString = ds.substr(0,4) + '-' +ds.substr(4,2) + '-' + ds.substr(6,2);

new Date(dateString);

 

---

현재 날짜와 비교하기

현재 날짜를 구하는 방법은 그저 ... new Date() 라고만 작성해 주면 됩니다. 하지만 특정 날짜에 3개월을 더해야 하기 때문에 그 방법을 먼저 알아보겠습니다.

 

3개월 더하기

var d = new Date("2020-01-01");
d.setMonth(d.getMonth() + 3);

 

이 방법을 이용하여 현재 날짜가 가입일로부터 3개월이 지났는지를 검사하는 코드를 작성해 보겠습니다.

 

// 비밀번호 변경일
var stringDate = "2020-01-01";

// 비밀번호 변경일로부터 3개월 이후 날짜
var after3month = new Date(stringDate);
after3month.setMonth(d.getMonth() + 3);

// 오늘날짜
var now = new Date();

// 변경이 필요한가?
var isExpired = now - after3month > 0;

 

이제 이 코드를 함수로 바꾸어보겠습니다.

 

function isExpired(passwordUpdateDate){
  var after3month = passwordUpdateDate;
  after3month.setMonth(passwordUpdateDate.getMonth() + 3);

  var now = new Date();

  return now - after3month > 0;
}

 

---

이제 저 함수에 문자열 날짜 값을 Date 객체로 변환하여 넣으면 true/false 값으로 3개월 이후인지 여부를 판단할 수 있습니다. true 를 반환한다면 팝업을 띄워주면 되겠죠?

 

// YYYY-MM-DD
var dateString1 = "2020-02-01";
if(isExpired(new Date(dateString1))) {
  console.log('비밀번호를 변경해주세요');
}

// YYYYMMDD
var ds = "20200201";
var dateString2 = ds.substr(0,4) + '-' +ds.substr(4,2) + '-' + ds.substr(6,2);
if(isExpired(new Date(dateString2))) {
  console.log('비밀번호를 변경해주세요');
}