[Javascript] Date 기본 사용법

이전글 : [Javascript] UTC와 KST

Date 기본 사용법

자바스크립트에는 Date라는 객체를 사용하여 시간을 다양한 방법으로 표현할 수 있습니다.

 

현재 시간 확인하기

const date = new Date()
console.log(date)
// Sun Aug 07 2022 20:00:00 GMT+0900 (Korean Standard Time)

Date 객체를 인자없이 생성하면 현지 시간에 맞춰 시간 정보를 반환합니다.

GMT+0900 은 GMT보다 9시간 빠른 한국 표준시임을 나타냅니다.

GMT란?
Grenwich Mean Time의 약자로, 영국 런던 그리니치 천문대를 기점으로 하는 협정 세계시입니다.
위치가 기준이 되는 GMT는 지구의 자전에 영향을 받아 조금씩 늦어지는 현상이 발생했습니다.
이에 1972년에 새롭게 재정된 UTC를 사용하기 시작했습니다.

사실 UTC와 GMT는 초의 소숫점단위의 차이로 매우 근사하기에 혼용되어 사용되지만,
정확한 계산이 필요한 기술적 표기에선 UTC를 사용합니다.

 

 

⚠️ 주의 : 시간은 항상 현지 시간을 기준으로 합니다.

날짜를 설정하거나, 불러올 때 그 기준은 항상 현지 시간입니다.

저는 지금 한국에 있기 때문에 Date 메서드를 사용하면 기본으로 UTC+0900으로 설정됩니다.

 

 

📌 요구사항: 글이 작성된 시간을 알고싶어요!

shelly는 자신이 만든 블로그에 글을 쓴 시간을 표시하고 싶어합니다.
이 기능을 구현하기 위해서 글 생성 API를 호출할 때 파라미터로 현재 시간을 함께 담아 보내려고 합니다. 

axios.post({
  title: 'Date 알아보기!',
  content: 'new Date()를 사용하면 현재 시간 정보를 알 수 있어요!',
  createdAt: new Date()
})

 

---

 

특정 시간으로 설정하기

/** 1번째 방법 */
const date1 = new Date('July 20, 2022 00:20:18')

/** 2번째 방법 */
const date2 = new Date(2022, 6, 20, 0, 20, 18)

/** 3번째 방법 */
const date3 = new Date()
date.setYear(2022)
date.setMonth(6)
date.setDate(20)
date.setHours(0)
date.setMinutes(20)
date.setSeconds(18)

// Wed Jul 20 2022 00:20:18 GMT+0900 (Korean Standard Time)

 

위의 세 가지 방법을 활용하여 date1, date2, date3을 모두 동일한 시간 2022년 7월 20일 00시 20분 18초로 설정되었습니다.

이 외에도 다양한 방법으로 날짜를 설정할 수 있으니  MDN에서 더 알아보세요!

 

 

⚠️ 주의 : 월은 0부터 시작합니다.

0은 1월을, 11은 12월을 의미합니다. 즉, date.setMonth(6)는 날짜를 7월로 설정하라는 의미입니다. 

헷갈리지 않게 주의하세요!

 

---

 

설정된 날짜 확인하기

const today = new Date('July 20, 2022 00:20:18')

const year = today.getYear() // 2022
const month = today.getMonth() // 6
const date = today.getDate() // 20
const day = today.getDay() // 3
const hour = today.getHours() // 0
const minutes = today.getMinutes() // 20
const seconds = today.getSeconds() // 18

위의 메서드를 사용하여 특정 날짜정보를 알 수 있습니다.

 

 

⚠️ 주의 : 요일은 0부터 시작합니다.

0은 일요일을 6은 토요일입니다.

즉, today.getDay() 의 반환값이 3이라는 것은, 수요일을 의미합니다.

 

---

 

UTC 기준으로 확인하기

앞서 말했듯이 Date는 현지시간을 기준으로 값을 반환합니다. 그럼 이번에는 UTC를 기준으로 Date를 다루는 방법을 알아봅시다!

const today = new Date(2022, 7, 8, 9, 0, 0)
today.setUTCHours(12)

today.toString()
// Mon Aug 08 2022 21:00:00 GMT+0900 (Korean Standard Time)

today.toUTCString()
// 'Mon, 08 Aug 2022 12:00:00 GMT

today.getUTCHours()
// 12

UTC를 기준으로 12시로 설정하면, 현지(한국)시각은 9시간 빠르기 때문에 21시가 됩니다. 

* UTC보다 9시간 빠르다는 것을 UTC+0900 혹은 GMT+0900 으로 표기합니다.

 

위에서 알아본 특정 시간으로 설정하기와 설정된 날짜 확인하기의 함수 이름에 UTC를 추가하면 UTC기준으로 값을 알 수 있습니다.

• setHours() -> setUTCHours()
• getHours() -> getUTCHours()

 

 

📌 요구사항: 글이 작성된 현지시간을 알고싶어요!

shelly는 글 작성 API를 호출하여 글을 생성하고, 글이 생성된 시각을 콘솔에 출력하기를 원합니다.

/**
  response는 아래와 같이 생성된 글의 정보를 반환한다고 가정하자.
  {
    title: 'Date 알아보기!',
    content: 'new Date()를 사용하면 현재 시간 정보를 알 수 있어요!',
    createdAt: 'Tue Aug 16 2022 12:40:00 GMT'
  }
*/
const response = await axios.post({
  title: 'Date 알아보기!',
  content: 'new Date()를 사용하면 현재 시간 정보를 알 수 있어요!',
})

const dateKST = new Date(response.createdAt)

console.log(dateKST)
// Tue Aug 16 2022 21:40:00 GMT+0900 (Korean Standard Time)

Date 객체는 특별한 설정이 없다면 현지 시간으로 변환하여 반환하기 때문에,

전달받은 createdAt 값을 Date객체에 넣으면 KST 기준 시각을 알 수 있습니다.

 

---

 

Date가 지원해주는 함수에 대해 더 알아보고 싶다면 MDN 사이트를 참고해보세요 😉