사놓지(6), 밀리초를 날짜로 바꾸는 법

gicomong·2021년 4월 29일
3
post-thumbnail

밀리초를 날짜로 바꾸는 법

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


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})`;
}

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

!codepen[kumjungmin/embed/oNBRGdj?height=499&theme-id=dark&default-tab=js,result]




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

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

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

0개의 댓글