밀리초를 날짜로 바꾸는 법

밀리초를 날짜로 바꾸는 법

오늘은 밀리초를 받아서 년.월.일.요일을 출력하는 함수를 만들어보자!

1. Date 객체 생성하기

• new Date()
  : new Date()를 사용하면 Date객체를 만들 수 있다.
  : 이 Date 객체에 인자를 넘기지 않으면 현재 날짜, 시간이 출력된다.

let nowDate = new Date();
console.log(nowDate);      
//Thu Apr 29 2021 19:58:14 GMT+0900 (대한민국 표준시)

• new Date(밀리초)
  : 밀리초는 1970년 1월 1일 0시 0분 0초 후의 시점이다.
  : new Date에 밀리초를 넘기면, 밀리초를 시간으로 변환해준다.

let milliseconds = 203010231540;
let date = new Date(milliseconds);

console.log(date);
//Tue Jun 08 1976 00:43:51 GMT+0900 (대한민국 표준시)

2. 년, 월, 일 가져오기

• 앞서 new Date()로 얻은 값을 아래 함수를 이용해 원하는 데이터를 얻을 수 있다.

함수	설명
getFullYear()	연도(네자리)를 반환
getMonth()	월을 반환(0~11)
getDate()	일을 반환(1~31)
getHours()	시간을 반환
getMinutes()	분을 반환
getSeconds()	초을 반환
getMilliSeconds()	밀리초을 반환
getDay()	요일을 반환(0[일] ~ 6[토]) 0은 항상 일요일을 나타냄 일월화수목금토 순서임

잠깐!! 혹시 getYear()를 주로 쓰시나요? 이제는 getFullYear()를 사용하세요!
getYear는 비표준 메소드로 더는 사용되지 않으며, 연도를 2자리로 반환합니다ㅜ

3. 밀리초를 날짜로 바꾸는 함수 만들기

• 앞서 우리는 밀리초를 변환하기 위한 핵심 개념을 배웠다.
• 이제 밀리초를 인자로 받아, 날짜로 변경하는 함수를 만들어보았다.

getMonth는 0부터 시작하므로 +1을 꼭 해주고
getDay는 0이 일요일이므로, 요일을 담은 배열을 만들어 바로 요일로 변환하자

function convertDate(milliSecond) {
  const days = ['일', '월', '화', '수', '목', '금', '토'];
  const data = new Date(milliSecond);  //Date객체 생성

  const year = data.getFullYear();    //0000년 가져오기
  const month = data.getMonth() + 1;  //월은 0부터 시작하니 +1하기
  const date = data.getDate();        //일자 가져오기
  const day = days[data.getDay()];    //요일 가져오기

  return `${year}.${month}.${date}. (${day})`;
}

• 만들어진 함수를 테스트해보자
• 세 개의 밀리초를 담은 라디오버튼을 클릭해서 결과를 확인해보자 :)

See the Pen millisecond by KumJungMin (@kumjungmin) on CodePen.

출처
아래 포스팅으로 가면 더 자세히 알 수 있어요 ^0^

raram2님의 포스팅, 당신이 innerHTML을 쓰면 안되는 이유
코어 자바스크립트, Date 객체와 날짜
hi.anna님의 포스팅, 라디오 버튼(radio) 값 가져와서 출력하기