[JavaScript] toLocaleDateString

🐣 개인 프로젝트를 진행하다 마주친 시간

---

개인 프로젝트를 리팩토링을 진행하면서 게시글 날짜에 대해서 살펴보게 되었다. 단순히 작성일 2024년 00월 00일로 나타낼 것이 아니라, 글 작성 시간 기준으로 1분 전 / 1시간 전 / 24시간 전 / 1일 전 / 2024년 00월 00일 순으로 표시를 하고 싶었다. 아무튼 이러한 기능을 위해서 사용한 코드 toLocaleDateString에 대해서 정리해보도록 하겠다.

 

 

🐣 toLocaleDateString

---

1. 개념

Date 객체를 지정된 로캘에 따라 형식화된 문자열로 변환합니다. 이 메서드는 지역화된 날짜 형식에 따라 년, 월, 일을 반환

• locales(선택 사항): 이 매개 변수는 로캘 또는 로캘 배열을 지정. 사용할 언어 및 지역 형식을 결정. 내 경우 'ko-KR'로 설정하여 한국어와 한국 지역을 지정 가능.
• options(선택 사항): 이 매개변수는 날짜 형식을 지정하는 속성을 포함하는 개체. 이미 getDate 함수에 options 개체를 정의했당.

2. 코드

아에서 option객체는 날짜를 어떻게 형식화할지를 지정하는데, 'numeric', 'long', 'shor' 등의 옵션을 사용할 수 있다. 이를 통해 원하는 형식으로 날짜를 표시 가능하다.

const postDate = new Date();  // 예시로 현재 날짜를 사용
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = postDate.toLocaleDateString(undefined, options);

console.log(formattedDate);


// 아래와 같이 옵션 가능
const options: DateTimeFormatOptions = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};

 

1. 연도: 'numeric'
   • 이 옵션은 연도 표시 방법을 지정
   • ``숫자''로 설정하면 연도의 전체 숫자 표현이 표시(예: 2024).
2. 월: 'long'
   • 이 옵션은 월 표시 방법을 지정
   • ``long''으로 설정하면 해당 월의 전체 이름(예: 1월)이 표시
3. 요일: 'numeric'
   • 이 옵션은 날짜 표시 방법을 지정
   • ``숫자''로 설정하면 날짜의 전체 숫자 표현(예: 31)이 표시

따라서 이러한 옵션을 연도와 일에 대해 숫자''로, 월에 대해 'long'으로 설정하면 결과 날짜 형식은 한국어로 "2024년 1월 31일"과 같게 되는데, "2024"는 연도, 1"월"은 월, "일"은 일을 의미함.

 

🐣 이해했니? quiz 다!

---

console.log(new Date());
console.log(new Date().toString());
console.log(result[10].date);
console.log(new Date(result[10].date));
console.log(new Date(result[10].date).getTime());

 

정답은 아래에!

 

🐣 타입 지정?

---

• typescript를 이용하여 개발 중이기 때문에 해당 타입을 맞춰줘야 한다. 사실 계속된 타오류를 마주쳤었음🐣
• typescript에서 toLocaleDateString 옵션 객체의 경우 다음과 같은 형식을 가져야 함

interface DateTimeFormatOptions {
  localeMatcher?: 'lookup' | 'best fit';
  weekday?: 'long' | 'short' | 'narrow';
  era?: 'long' | 'short' | 'narrow';
  year?: 'numeric' | '2-digit';
  month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
  day?: 'numeric' | '2-digit';
  hour?: 'numeric' | '2-digit';
  minute?: 'numeric' | '2-digit';
  second?: 'numeric' | '2-digit';
  timeZoneName?: 'long' | 'short';
  formatMatcher?: 'basic' | 'best fit';
  hour12?: boolean;
  timeZone?: string;
}

const options: DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };

 

🐣 코드 나열~

---

  1. 코드 나열(분리 이전)

아래와 사진과 같이 (방금전/1분전/1시간전/1일전/2024~)순으로 표시 됨

const PostList: React.FC<PostListProps> = ({ result }) => {
  //시간
  const getTimesAgo = (postDate: string) => {
    const postDateTime = new Date(postDate);
    const currentDateTime = new Date();

    const timeDifference = currentDateTime.getTime() - postDateTime.getTime();
    const minutesAgo = Math.floor(timeDifference / (1000 * 60));
    const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60));
    const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

    if (minutesAgo < 1) {
      return '방금 전';
    }
    if (minutesAgo < 60) {
      return `${minutesAgo}분 전`;
    }
    if (hoursAgo < 24) {
      return `${hoursAgo}시간 전`;
    }
    if (daysAgo < 30) {
      return `${daysAgo}일 전`;
    }
    if (daysAgo >= 365) {
      const options: DateTimeFormatOptions = {
        month: 'long',
        day: 'numeric',
      };
      return postDateTime.toLocaleDateString(undefined, options);
    }
    interface DateTimeFormatOptions {
      localeMatcher?: 'lookup' | 'best fit';
      weekday?: 'long' | 'short' | 'narrow';
      era?: 'long' | 'short' | 'narrow';
      year?: 'numeric' | '2-digit';
      month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
      day?: 'numeric' | '2-digit';
      hour?: 'numeric' | '2-digit';
      minute?: 'numeric' | '2-digit';
      second?: 'numeric' | '2-digit';
      timeZoneName?: 'long' | 'short';
      formatMatcher?: 'basic' | 'best fit';
      hour12?: boolean;
      timeZone?: string;
    }

    const options2: DateTimeFormatOptions = {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    };
    return postDateTime.toLocaleDateString(undefined, options2);
  };

 

원하는 대로 시간이 슝슝! 완료!