[ JavaScript ] Date 객체에서 년,월,일 따로 출력하기

 

회사에서 엑셀 파일 다운로드 구현해뒀는데,

해당 파일 다운로드시 오늘날짜를 ( YYYY.MM.DD ) 형태로 파일명에 추가해달라는 요청이 와서

년, 월, 일을 가져오는 방법에 대해서 정리한다.

 

처음엔 그냥 Date 객체에서 getFullYear, getMonth, getDate등을 사용했는데

코드가 너무 지저분해서 다른 방법을 사용하면서 관련된 코드들을 정리해보았다!

 

 

1. getFullYear, getMonth, getDate등을 사용

getMonth에 1을 더해주고 한자리수 일 경우에 0을 추가 해주는등

너무 지저분해보여서 다른 방법을 찾아보았음!

const date = new Date()
const year = date.getFullYear()
let month = date.getMonth() + 1
if ( month.toString().length < 2 )  month = '0' + month
const day = date.getDate() 
const datePrefix = `(${year}.${month}.${day})`;  // '(2022.03.13)'

 

 

2-1. toISOString 사용 > 잘못된 예제

   이렇게 사용하면 안됨 > 아래에 3번에 추가 설명  

국제표준시 기준 ISO 8601 형식으로 표현한 문자열로 반환되는데 그 값을 가지고 slice하여 사용

'2022-03-13T08:02:45.814Z' 의 형태

const date = new Date().toISOString()
const [year, month, day] = [date.slice(0,4),date.slice(5,7),date.slice(8,10)]
const datePrefix = `(${year}.${month}.${day})`;  // '(2022.03.13)'

 

2-2. toISOString 사용 + split 사용 > 올바른 예제

위에서 저렇게 사용하면 안된다는 이유가 국제표준시 기준으로 반한되어 우리나라 시간과 9시간 차이가 있다.

그래서 저장하는 시점에 따라 현재 시간이 AM 6:00 인 경우 

전날 PM 9:00 로 반횐되어 날짜가 아예 전날짜가 찍히는 경우가 있으므로.    

아래처럼 Timezone을 변경해서 사용해야 한다.

let offset = new Date().getTimezoneOffset() * 60000 ; //대한민국의 offset 을 수동으로 추가
let dateOffset = new Date(Date.now() - offset); //  2022-03-13T17:17:29.227Z
const ISODate = dateOffset.toISOString().substring(0, 10);  // '2022-03-13'
const [year, month, day] = ISODate.split('-');
const datePrefix = `(${year}.${month}.${day})`;  // '(2022.03.13)'

관련 참고 https://anywaydevlog.tistory.com/46

 

 

2-3. toISOString 사용 + slice 사용 

맨 처음 사용한 방식처럼 slice로 자리수 지정해서 사용하는 방법도 있겠지만,

이렇게 자리수 지정하는것보다 위의 예제처럼 split을 사용하여 구분하는것이 더 좋아보인다.

let offset = new Date().getTimezoneOffset() * 60000 ; //대한민국의 offset 을 수동으로 추가
let dateOffset = new Date(Date.now() - offset).toISOString(); // '2022-03-13T17:28:30.534Z'
const [year, month, day] = [dateOffset.slice(0,4),dateOffset.slice(5,7),dateOffset.slice(8,10)]
const datePrefix = `(${year}.${month}.${day})`;  // '(2022.03.13)'

 

 

---

✔️ 참고

https://graykang.tistory.com/14

https://anywaydevlog.tistory.com/46