[JavaScript/VanillaJS] 날짜 계산/날짜 포맷팅(setDate/format/...)

날짜를 가지고 코딩을 해야할 때가 있다.

어떻게 해야할까? 생각할 단계엔 짜증난다.

자료를 찾고 코딩을 하며 바뀌는 결과물을 보고 있다보면 재밌어진다.

 

오늘을 기준으로 3개월 전 날짜를 구해야 할 일이 있었다.

 

날짜 계산 / date format

 

function init() { 
  var prevDate = formerDate(); //...생략
}

function formerDate() { 
  var objDate = new Date(); objDate.setMonth(objDate.getMonth() - 3); // 3개월 전

  var formerDate = formatDate(objDate);
  
  return formerDate; 
}

/** 
 * @since 2019-04-17 
 * date format function 
 */
function formatDate(date){
  var prevYear = date.getFullYear(); //2019
  var prevMonth = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; //01
  var prevDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //17
  var prev_date = prevYear + "-" + prevMonth + "-" + prevDay; //2019-01-17
  
  return prev_date;
}

 

function init( )

init( )에서 prevDate변수에 formerDate( )의 return 값을 초기화한다.

prevDate 변수는 input태그의 value에 들어갈수도 있고, 사용하기 나름이다.

주로 input에 기본 value로 사용을 한다.

 

function formerDate( )

formerDate( )에서는

objDate 변수에 Date 객체를 인스턴스화하여 초기화했다. (date로 하고싶었으나, date 변수명은 이미 다른 곳에서 사용하고 있었음...ㅜ)

 

var objDate = new Date();
objDate.setMonth(objDdate.getMonth() + 1);
//+ 1을 하는 이유는 getMonth()가 현재 달 - 1의 값을 return해주기 때문

위의 코딩을 보자. 오늘이 04월 17일이다.

getMonth( )의 경우 0부터 시작이다. (꼭 배열마냥, 첫번째 인덱스를 가져오려면 [0]인 것처럼 1월이 0으로 나온다.)

objDate.getMonth( ) 를 호출하면 3(월)이 나온다. 그래서 + 1을 해야 (내가 숨쉬고 있는) 현재의 달을 제대로 받을 수 있다.

나는 3개월 전으로 가고 싶다. 뒤로 갈 땐 가고 싶은 만큼만 적으면 된다.

 

연도(year)

getMonth( )를 언급한 김에 연도에 관련한 것도 적어본다.

getYear( )이 있고 getFullYear( )이 있다. 두 메서드는 다른 결과값을 내뱉는다. 아래 예시(캡처)를 보자.

 

 

getYear( )의 경우 전체 연도를 반환하지 않는다. 전체 연도를 반환하지 않는다? 2000년 단위를 반환하지 않는 의미같다.

MDN에서도 getYear( ) 대신 getFullYear( )를 사용하기를 권장한다. 브라우저마다 다르겠지만 getYear( )를 지원하지 않는 추세다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear

Date.prototype.getYear()

 

 

그렇다면, getFullYear( )는???

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

Date.prototype.getFullYear()

위에 비교한 사진에도 나와있듯이 자아아아알~ 출력된다. : )

 

일(date)

연도도 언급했고,  달도 이야기했으니 일을 얘기해보자.

function formatDate( )에서 보면 나는 일을 담을 변수에 day라고 적어놓았다.

javascript에서 getDay( )는 요일을 가져온다. 사용 중인 변수명 중에 prevDate라는 변수가 있어서 중복되기에 day라고 적었고 그 바로 아래 변수도 보면 prev_date라고 언더스코어(언더바, _)를 사용했다.

(헷갈릴까봐 또 얘기한다. getDay( )는 요일을 가져오는 메서드다.)

 

무튼 일도 달처럼 set을 할 수 있다. 아래를 보자.

 

let d = new Date(2019, 6, 1); // Mon Jul 01 2019 00:00:00 GMT+0900 (한국 표준시)
objDate.setDate(objDate.getDate(32)); // 일수가 가장 많을 땐 31일이다. 32일을 추가해서 set을 하면 7월의 경우 8월 1일로 set된다.

Date 객체를 인스턴스화 할 때에 년, 월, 일을 적게 되면 그 때로 초기화가 되는데, 중요한 것은 또 월이 삐뚤게 나온다.

6월은 June이고 7월은 July이다. Mon Jul ...

July가 나왔다... 0을 적었다면? 1이 나왔을 것이고, 10을 적었다면 11이 나왔을 것이다.

그렇다. 6을 적었기에 7월이 나왔다.

 

getDate(32)는 32일을 추가하는건데 7월 1일을 기준으로 32일을 추가하면 8월로 자동으로 넘어간다.

(이게 진짜 메리트라고 생각함..! 자동이라니... 로직을 직접 짰다고 생각하면 어후 길고 길어질 소스, 우웩.)

단 한 줄로 월 넘기는게 끝났다. 7일 단위, 혹은 10일, 15일 단위로 적었다고 한다면 7월 25일의 7일 뒤가 자동으로 나온다고 생각하면 된다.

 

시간, 분, 초도 getHours( ), getMinutes( ), getSeconds( )로 직접 값들을 다룰 수 있다!

 

 

function formatDate( ), 백틱( ` )

formatDate(date)는 3개월 전의 날짜를 formatting하지 않아서 Wed Apr 17 2019 17:44:06 GMT+0900 (한국 표준시) 이런 식(이따위..!)으로 나오는 date를 인자로 받아 예에에쁘게 yyyy-MM-dd 식으로 해줄 좋은 함수다.

 

위로 올라가지마세요.

바로 아래에 다시 적을게요 : )

 

function formatDate(date){
  var prevYear = date.getFullYear(); //2019
  var prevMonth = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; //01
  var prevDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //17
  var prev_date = prevYear + "-" + prevMonth + "-" + prevDay; //2019-01-17
  return prev_date;
}

formerDate( )에서 formatDate( )를 호출할 때 formatting되지 않은 date를 인자로 넘긴다.

그 인자를 받아서 쪼개버린다(!?).

연, 월, 일로 다 쪼갤 때 월과 일은 한자리 수가 나오기 마련. 그러면 2019-1-17 이렇게 format이 될텐데 우리가 원하는건 2019-01-17이다. 사실 string + 값은 예전 style이고 백틱( ` )을 사용하면 더 만족스러운 코딩을 할 수 있다.

키보드에서 tab키 위에 있는 `~ 요 버튼이 백틱( ` )버튼이다. 

백틱을 사용한 코딩은 어떤 것인가? 아래를 보자.

function formatDate(date){
  var prevYear = date.getFullYear(); //2019
  var prevMonth = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1)}` : date.getMonth() + 1; //01
  var prevDay = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate(); //17
  var prev_date = `${prevYear}-${prevMonth}-${prevDay}`; //2019-01-17
  return prev_date;
}

요렇게 사용할 수 있을 것이다.

예시(아래 캡처)를 보자면,

 

짜자잔~

3월이 별로 안예쁘게 나왔다.

 

 

`${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`

위의 코딩은 백틱을 사용한 시간이다.

10보다 아래면 0을 붙이고 아니면 그냥 그대로라는 3항연산자다.

이렇게 월과 일도 작성하면 된다.