Javascript - Date객체와 사용법

javascript의 Date객체는 자주 사용되는 객체지만 종종 잊어먹는 경우가 있어 정리하고자 합니다.

 

 

JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.

 

 

JavaScript 날짜의 기반은 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것으로, 날짜와 시간의 컴퓨터 기록물을 대부분 차지하고 있는 UNIX 시간(UNIX epoch, 1970년 1월 1일 자정과의 시간 차이를 초 단위로 나타냄)과는 다릅니다.

 

 

1. Date 객체를 만드는 여러 방법

let today = new Date(); // 생성 순간의 날짜와 시간
let date1 = new Date("December 17, 1995 03:24:00");
let date2 = new Date("1995-12-17T03:24:00");
let date3 = new Date("1995-12-17")
let date4 = new Date(1995, 11, 17); // 월은 0부터 시작
let date5 = new Date(1995, 11, 17, 3, 24, 0);

 

 

2. 자주 사용되는 함수

• Date.parse()
  Date.parse () 메서드는 날짜의 문자열 표현을 구문 분석하고 1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 반환합니다. 문자열이 인식되지 않거나 경우에 따라 잘못된 날짜 값을 포함하는 경우 NaN을 반환합니다. 
  

  // Direct call :
  Date.parse(dateString);
  
  // Implicit call:
  new Date(dateString);
  
  // dateString
  // RFC2822 또는 ISO 8601 날짜를 나타내는 문자열

 

 

• toISOString()
  toISOString() 메서드는 단순화한 확장 ISO 형식(ISO 8601)의 문자열을 리턴합니다. 리턴값은 언제나 24글자 또는 27글자(각각YYYY-MM-DDTHH:mm:ss.sssZ또는±YYYYYY-MM-DDTHH:mm:ss.sssZ)입니다.시간대는 언제나 UTC이며 접미어Z로 표현합니다. (작성일 2023년 11월 13일 기준으로 output 표시)
  

  const event = new Date();
  
  console.log(event);
  // Expected output: "Mon Nov 13 2023 15:43:56 GMT+0900 (한국 표준시)"
  
  console.log(event.toString());
  // Expected output: "Mon Nov 13 2023 06:43:56 GMT+0900 (London Daylight Time)"
  
  console.log(event.toISOString());
  // Expected output: "2023-11-13T06:43:56.579Z" (한국 시간보다 -9시간 되어서 나옵니다)

  
  UTC임에 주의해야 합니다!!
  (아무생각없이 사용했다 삽질 좀 했습니다. toISOString()이 출력하는 문자열은 영국 표준시인데 한국과는 9시간이 차이가 나므로 -9시간이 출력 됩니다. 이래서 문서를 꼼꼼히 봐야... -_-)
  
  offet 맞추기는 아래 getTimezoneOffset()에서 다루겠습니다.

• getDate()
  getDate() 메서드는 현지 시간에 따라, 주어진 날짜의 일에 해당하는 1 이상 31 이하의 정수를 리턴합니다.
  (작성일 2023년 11월 13일 기준으로 output 표시)
  

  console.log(event.getDate())
  // expected Output: 13  (정수)

  
  

 

• getDay()
  getDay() 메서드는 주어진 날짜의 현지 시간 기준 요일을 리턴하며, 0은 일요일을 나타냅니다. 현재의 일을 반환하려면 getDate()를 사용해야 합니다.
  (작성일 2023년 11월 13일 기준으로 output 표시)
  

  console.log(event.getDay())
  // expected Output: 1 (정수)
  // 일요일 : 0
  // 월요일 : 1
  // 화요일 : 2
  // 수요일 : 3
  // 목요일 : 4
  // 금요일 : 5
  // 토요일 : 6

  
  

 

 

• getFullYear()
  getFullYear() 메서드는 주어진 날짜의 현지 시간 기준 연도를 리턴합니다.
  (작성일 2023년 11월 13일 기준으로 output 표시)
  

  console.log(event.getFullYear())
  // expected Output: 2023  (정수)

  
  

 

 

• getMonth()
  getMonth()메서드는 Date 객체의 월 값을 현지 시간에 맞춰 리턴합니다. 월은 0부터 시작합니다.
  (작성일 2023년 11월 13일 기준으로 output 표시)
  

  console.log(event.getMonth())
  // expected Output: 10   (정수,  11이 아님에 주의!!)

  
  

 

• getTimezoneOffset()
  getTimezoneOffset() 메서드는 현재 로케일 에 대한 시간대 오프셋 (UTC)을 분 단위로 반환합니다. 
  

  const offset = new Date().getTimezoneOffset();
  // expected Output: -540

  

• 삽질기록(반성문)
  프로젝트 기능 구현중 검색조건에 yyyy-MM-dd 형식의 문자열을 사용하는 조건이 있는데 00시~9시 사이에 검색시 하루가 당겨져서 조회되는 일이 있어 확인하니 toISOString()이 문제가 되었었습니다.(다시 한번 문서를 잘 봅시다. T_T)
  
  이를 해결하기 위해 getTimezoneOffset() 메서드를 사용할 필요가 있습니다.
  한번 사용해보도록 합시다.
  

  // getTimezoneOffset()은 현재 시간과의 차이를 분 단위로 반환합니다.
  const offset = new Date().getTimezoneOffset() * 60000;
  
  const today = new Date(Date.now() - offset);​

  
  
  분 단위로 반환하기 때문에 기존 밀리초 단위로 인자를 받는 new Date() 함수에 넣기 위해서 1000(밀리초)*60(초) 를 곱해 밀리초 단위로 만들어 줍니다.

• 그외 getHours(), getMinutes(), getSeconds(), getTime(), getMilliseconds()
  
  
  
  
  
• setDate()
  setDate() 메서드는 현재 설정된 월의 시작 부분을 기준으로 Date 객체의 날짜를 설정합니다.
  

  dateObj.setDate(dayValue);
  // dateValue - 월의 일을 나타내는 정수입니다.
  // dayValue가 해당 월의 날짜 값 범위를 벗어나면 setDate ()는 그에 따라 Date 객체를 업데이트합니다. 
  // 예를 들어, dayValue에 0이 제공되면 날짜는 이전 달의 마지막 날로 설정됩니다.
  
  
  let theBigDay = new Date(1962, 6, 7); // 1962-07-07
  theBigDay.setDate(24); // 1962-07-24
  theBigDay.setDate(32); // 1962-08-01
  theBigDay.setDate(22); // 1962-08-22
  
  
  // 하루 전/후 구하기
  let toDay = new Date();
  // 어제
  toDay.setDate(toDay.getDate() - 1);
  
  // 다음날
  toDay.setDate(toDay.getDate() + 1);

 

 

 

 

• setFullYear()
  setFullYear() 메서드는 현지 시간에 따라 지정된 날짜의 전체 연도를 설정합니다. 새로운 타임 스탬프를 리턴합니다.
  

  // Syntax
  // dateObj.setFullYear(yearValue[, monthValue[, dayValue]])
  
  var theBigDay = new Date();
  theBigDay.setFullYear(1997);

  
  monthValue 및 dayValue 매개 변수를 지정하지 않으면 getMonth() 및 getDate() 메서드가 사용됩니다.
  
  지정한 매개 변수가 예상 범위를 벗어나면 setFullYear ()가 다른 매개 변수와 Date 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, monthValue에 15를 지정하면 연도가 1 (yearValue + 1)만큼 증가하고 3은 해당 월에 사용됩니다.
  
  
  
  
  
  
• setMonth()
  setMonth() 메서드는 현재 설정된 연도에 따라 지정된 날짜의 월을 설정합니다.
  

  // Syntax
  setMonth(monthValue)
  setMonth(monthValue, dayValue)
  
  // monthValue
  // 연도의 시작에서 오프셋된 연도의 월을 나타내는 0 기반 정수입니다. 
  // 그래서 0은 1월, 11은 12월, -1은 전년도의 12월, 12는 다음 해의 1월을 나타냅니다.
  
  // dayValue
  // 선택 사항. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.
  
  
  const theBigDay = new Date();
  theBigDay.setMonth(6);
  
  // Watch out for end of month transitions
  const endOfMonth = new Date(2016, 7, 31);
  endOfMonth.setMonth(1);
  console.log(endOfMonth); //Wed Mar 02 2016 00:00:00

  
  dayValue 매개 변수를 지정하지 않으면 getDate() 메서드에서 반환 된 값이 사용됩니다.
  
  지정한 매개 변수가 예상 범위를 벗어나면 setMonth()는 그에 따라 Date 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 monthValue에 15를 사용하면 연도 값이 1 증가하고 월 값은 3이 됩니다.
  
  현재 날짜가 이 메서드의 동작에 영향을 미칩니다. 개념적으로 새로운 날짜를 반환하기 위해 매개 변수로 지정된 새 달의 첫 번째 날에 해당 월의 현재 날짜로 지정된 일 수를 추가합니다. 예를 들어 현재 값이 2016년 8월 31일인 경우 setMonth의 매개 변수에 1을 넣고 함께 호출하면 2016년 3월 2일을 반환됩니다. 이는 2016년 2월에 29일이 있기 때문입니다.
  
  

 

 

 

참고 사이트

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

• https://velog.io/@minsu2344/JS-Date.toISOString%EC%9D%98-%EC%9E%83%EC%96%B4%EB%B2%84%EB%A6%B0-9%EC%8B%9C%EA%B0%84