#TIL28

Date

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

날짜

Date.prototype.getFullYear()

• 현지 시간 기준 연도(네 자리 연도면 네 자리로)를 반환

Date.prototype.getMonth()

• 현지 시간 기준 월(0–11)을 반환

Date.prototype.getDate()

• 현지 시간 기준 일(1–31)을 반환

Date.prototype.getDay()

• 현지 시간 기준 요일(0–6)을 반환

<예시>

<script>
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  const date = today.getDate();
  console.log(`${year}년 ${month + 1}월 ${date}일`); 
    //2021년 9월 1일
</script>

시간

Date.prototype.getHours()

• 현지 시간 기준 시(0–23)를 반환

Date.prototype.getMinutes()

• 현지 시간 기준 분(0–59)을 반환

Date.prototype.getSeconds()

• 현지 시간 기준 초(0–59)를 반환

<예시>

<script>
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  console.log(`${hours}:${minutes}:${seconds}`); //18:55:9
</script>

---

String.prototype.padStart()

• padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환
• 채워넣기는 대상 문자열의 시작(좌측)부터 적용
• 문법) str.padStart(targetLength [, padString])
• targetLength:
  • 목표 문자열 길이
  • 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환
• padString:
  • 선택옵션
  • 현재 문자열에 채워넣을 다른 문자열을 의미
  • 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음
  • 기본값은 " "
• 반환값: 시작점부터 주어진 문자열로 채워 목표 길이를 만족하는 String

<예시>

출처) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padEnd()

• padEnd() 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환

• 채워넣기는 대상 문자열의 끝(우측)부터 적용

• 문법) str.padEnd(targetLength [, padString])

• targetLength:

  • 목표 문자열 길이
  • 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환

• padString:

  • 선택옵션
  • 현재 문자열에 채워넣을 다른 문자열을 의미
  • 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음
  • 기본값은 " "

• 반환값: 끝부터 주어진 문자열로 채워 목표 길이를 만족하는 String

  <예시>
  
  출처) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
  

---

두 자리 수 시계 만들기

• new Date()로 가져온 시간은 숫자 데이터(Number)
• padStart()는 String(문자데이터)로 변환해서 사용가능
• padStart()의 두번째 인수에 '0'을 입력해 현재 시간의 숫자가 한 자리 수 일경우 앞에 0을 채워줌
• setInterval(함수, 시간): 시간 간격마다 함수 실행
• setInterval() 함수를 통해 1초 간격으로 getClock 함수 실행
• setInterval() 함수는 1초 뒤에 실행되므로 처음에 getClock()를 먼저 호출

<script>
  const clock = document.querySelector('h2#clock');

  function getClock () {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,'0');
    const minutes = String(date.getMinutes()).padStart(2,'0');
    const seconds = String(date.getSeconds()).padStart(2,'0');
    clock.textContent = `${hours}:${minutes}:${seconds}`;
  }
  
  getClock();
  
  setInterval(getClock, 1000);
</script>

두 자리 수 달력 만들기

• Date.prototype.getMonth()은 월(0–11)을 반환하므로 +1을 하여 현재 날짜와 맞추기
• new Date()로 가져온 시간은 숫자 데이터(Number)
• padStart()는 String(문자데이터)로 변환해서 사용가능

<script>
  const dateEl = document.querySelector('h2#date');
  
  const today = new Date();
  const year = String(today.getFullYear()).padStart(2,'0');
  const month = String(today.getMonth() + 1).padStart(2,'0');
  const date = String(today.getDate()).padStart(2,'0');
  
  dateEl.innerText = `${year}년 ${month}월 ${date}일`;
</script>