Assignment 6 과제 기술 정리글입니다.
과제 레파지토리

현재 날짜와 시간 계산하기

Date 객체를 사용해 현재 날짜와 시간을 구할 수 있습니다.

Date 메소드

Date 객체 자체로도 현재 날짜와 시간을 구할 수 있지만, 저희가 원하는 형식의 데이터 폼을 얻기 위해 다양한 메소드를 이용해야 합니다.

날짜 관련 Date 메소드

getFullYear() : 현재 연도를 반환합니다.
getMonth() : 1월을 숫자 0 기준으로 현재 월-1 값을 반환합니다. 즉, 8월이라면 7을 반환합니다.
getDate() : 현재 일을 반환합니다.
getDay() : 일요일 숫자 0을 기준으로 현재 요일의 숫자를 반환합니다. 즉 수요일이라면 4를 반환합니다.

// 2021년 8월 18일 수요일이라면,
const currentDate = new Date();
const year = currentDate.getFullYear(); // 2021
const month = currentDate.getMonth(); // 7
const date = currentDate.getDate(); // 18
const day = currentDate.getDay(); // 3

시간 관련 Date 메소드

hour : 현재 시를 반환합니다.
minutes : 현재 분을 반환합니다.
seconds : 현재 초를 반환합니다.

const currentTime = new Date();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

데이터 Form 맞추기

미리 정의한 배열을 이용해 Date 날짜 form 맞추기

날짜와 관련된 Date 메소드의 경우 해당 날짜에 맞는 숫자를 반환합니다. 따라서 숫자가 아닌 문자 폼을 맞추기 위해 상수로 미리 정의한 후, 인덱스를 이용해 표현합니다.

// 영어 날짜의 경우
export const getFormDateUS = (curDate) => {
  const year = currentDate.getFullYear(); // 2021
  const month = currentDate.getMonth(); // 7
  const date = currentDate.getDate(); // 18
  const day = currentDate.getDay(); // 3

  return `${DATE_STR.daysEN[day]}, ${DATE_STR.MonthsEN[month]} ${date}, ${year}`;
};

// constants.js
const DATE_STR = {
  daysKR: [
    "일요일","월요일","화요일","수요일","목요일","금요일","토요일",
  ],
  daysEN: [
      "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"
      ],
  MonthsEN: [
      "January","February","March","April","May","June","July","August","September","October","November","December",
  ],
};

시간 form 맞추기

시간의 경우 숫자라 따로 변환할 건 없지만, 편의상 한 자릿수의 숫자는 앞에 0을 채워주는 것이 보기에 좋습니다.
따라서 템플릿 문자열을 이용해 현재 숫자가 10보다 작을 때 앞에 0을 채워주면서 시간 폼을 구성할 수 있습니다.

const getFormTime = (curTime) => {
  const currentTime = new Date();
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  return `${hour < 10 ? `0${hour}` : hour}:${
    minutes < 10 ? `0${minutes}` : minutes
  }:${seconds < 10 ? `0${seconds}` : seconds}`;
};

setInterval 함수를 이용한 실시간 시계 구현

setInterval 함수를 이용하면 일정한 시간 간격으로 작업을 실행시킬 수 있습니다. 즉, setInterval 함수 안에 시간 구하는 로직을 작성하고 시간 간격을 1초로 설정한다면 매초 갱신되는 시계를 구현할 수 있습니다.

useEffect를 이용해 setInterval 함수를 실행시키고 뒷정리 함수를 이용해 제거해 줍니다.

const [time, setTime] = useState(
  new Date().toLocaleTimeString("en-US", TIME_FORM)
);

useEffect(() => {
  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString("en-US", TIME_FORM));
  }, 1000);
  return () => {
    clearInterval(timer);
  };
}, []);

Date 객체의 locale 관련 메소드

Date 객체의 locale 관련 메소드를 이용하면 위의 예제처럼 힘들게 값을 구하고 폼을 구성할 필요가 없습니다.

locale 관련 메소드를 이용한 날짜, 시간 구하기