JavaScript Date 문법

최근 실무에서 작업간에 날짜와 관련된 API 데이터를 포멧하여 프론트에서 뿌려주는 작업을 자주 진행하였다. timeStamp, DateTime, YYYY-MM-DD포멧 등 자주 접하지 않았던 내용에 대한 작업을 하려다보니 이것저것 찾아보게 되었고 업무간에 로직을 짜며 각각의 속성에 대한 이해를 할 수 있었다.

앞으로도 자주 사용하게 될 내용이니 생각을 정리할 겸 글을 정리해본다..

🕑자바스크립트의 현재시간 구하기

자바스크립트에서 현재 날짜 및 시간을 구하기 위해서는 Date 객체를 사용하면 된다. Date 객체를 사용하여 현재의 날짜를 출력하면 YYYY-MM-DD와 같은 형식의 날짜 포맷으로 출력되지 않기 때문에, Date 객체에서 제공하는 추출 함수를 사용하여 날짜 포맷을 변환하는 작업이 추가적으로 필요하다.

var date1 = new Date(); // 현재 날짜 및 시간

var date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월 +1 주의)

var date3 = new Date('2014-6-4'); // 2002년 1월 1일 09:00:00

var date4 = new Date('2012-05-17 10:20:30'); // 2012년 5월 17일 10:20:30

위와 같이 Date 객체를 사용하여 현재 시스템의 날짜를 가져와서 출력하면, 평상시에 사용하는 날짜 포맷(YYYY-MM-DD HH:MM:SS)로 출력되지 않기 때문에 추출 함수를 사용하여 날짜 포맷을 변환해 주어야 한다.

날짜 포멧 변환 함수를 미리 지정하여 사용하면 여러 포멧을 바꿔가며 사용할 수가 있어 작업간에 편의하다.

📌vue에서 new Date() 사용시 주의사항

data() {return} 에 정의된 값을 this 로 접근하여 YYYY.MM.DD hh:ss를 new Date에 사용할 경우 Undefined 값이 나온다.(정확한 이유는 더 알아보아야 할것 같음) 따라서 const로 변수를 만들어 this값을 할당하여 사용하면 정상적으로 YYYY.MM.DD hh:ss값을 나타낼 수 있음.

Timestamp

Timestamp는 1970년 1월 1일부터 지금까지 경과한 시간을 millisecond로 변환한 값으로 서로 다른 시간을 비교할 때 숫자의 크기 비교만으로 시간 상의 전과 후를 비교하기 쉽다.(Number값으로 생성되므로 각각의 Timestamp를 - 연산 해주면 됨)

1. Date.now()

Date.now()는 현재 시간의 Timestamp를 리턴해준다.

const time = Date.now();
console.log(time); //1651402520695

2. Date.getTime()

Date.getTime()을 사용하면 dateTime 포멧을 Timestamp로 변형할 수 있다.

const date = new Date(); // 현재시간 dataTime으로 반환
console.log(date.getTime()); // 1651402633659

Date객체에 대한 내용들을 찾아보면 수없이 많은 내용을 속성들을 찾아 볼 수가 있는데 위에 정리한 내용들의 차이점에 대한 이해만 있다면 충분히 앞으로 작업간에 날짜와 관련된 포멧팅 작업을 하더라도 혼란스러워 하지 않고 작업을 이어나갈 수 있을 것이라고 생각한다.
(실무에서 일할수록 별것 아닌 내용이여도 기초적인 것이 가장많이 중요하다는 생각이 들었다)