Moment의 isBetween() 사용

이 게시물은 Moment.js 버전 2.29.1을 사용합니다. Moment.js는 현재 유지 관리 모드로 간주되며 새 프로젝트에서 사용하지 않는 것이 좋습니다. 더보기 here .

이번 주에 저는 지난 10분 동안 값이 추가되었는지 확인하기 위해 외부 API에서 데이터를 가져오는 cron 작업을 수행했습니다. API는 시간별 필터링을 허용하지 않았기 때문에 그날 추가된 모든 데이터를 가져온 다음 이를 검토하고 지난 10분 동안 추가된 값이 있는지 확인해야 했습니다.

날짜 및 시간 작업은 항상 까다로우며 예외는 아닙니다. 이 기능을 위해 네이티브 JavaScript보다 Moment.js를 사용하기로 했습니다. 읽기 쉽고 이미 종속성이었기 때문입니다. 우리 게시물에 댓글을 달기 위해 시간을 내는 사람에게 감사하고 싶다고 가정해 봅시다. 제가 사용할 예시는 오늘 작성된 모든 댓글을 가져온 다음 필터링하여 지난 10분 동안 작성된 댓글을 반환하여 좋아요를 누르거나 이모티콘 🦄으로 답장할 수 있도록 하는 것입니다.

함수를 만들고 주석의 날짜와 시간이 API에서 반환되는 형식을 정의하는 것으로 시작하겠습니다.

const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";
};

필터링할 시작 시간과 종료 시간이라는 두 개의 다른 변수가 필요합니다. 시작 시간은 현재 날짜 및 시간에서 10분을 뺀 값이 되고 종료 시간은 현재 날짜 및 시간이 됩니다.

const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now
};

moment()는 현재 날짜와 시간을 얻기 위해서만 사용할 수 있지만 format()를 호출하면 전체 순간 개체 대신 깔끔하게 형식이 지정된 문자열을 다시 얻을 수 있습니다.



다음으로 댓글의 날짜와 시간이 두 변수 사이에 있는지 확인하는 방법을 살펴보겠습니다. Moment.js에는 부울을 반환하는 isBetween()라는 편리한 함수가 있습니다this. 이 메서드는 두 개의 모멘트 유사 객체를 매개변수로 사용하며, 모멘트 유사 객체는 모멘트 객체, 문자열, 숫자, 날짜 또는 배열이 될 수 있습니다. 우리의 경우 위에서 만든 문자열을 사용합니다. 이 함수는 기본적으로 배타적이지만 포괄성을 지정하기 위해 추가 매개변수를 허용한다는 점은 주목할 가치가 있습니다.

저에게 자연스러운 다음 단계는 다음과 같은 작업을 수행하는 것이었습니다. 먼저 각 댓글의 게시 날짜 및 시간에 대한 순간 개체를 만든 다음 이전 변수를 사용하여 했던 것처럼 서식을 지정합니다.

const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now

  const latestComments = todayComments.filter((comment) => 
    moment(comment.dateTime).format().isBetween(start, end)
  );
};

그러나 여기에서 콘솔에서 두 가지 사항을 확인하기 시작합니다.

// console

"Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

TypeError: moment(comment.dateTime).format().isBetween is not a function. (In 'moment(comment.time).format().isBetween(start, end)', 'moment(comment.dateTime).format().isBetween' is undefined)

이는 Moment.js가 전달하려는 날짜와 시간의 형식을 모르기 때문에 형식을 다시 지정할 수 없기 때문입니다. 댓글의 날짜 및 시간 형식을 전달하여 이 문제를 쉽게 해결할 수 있습니다.

moment(comment.dateTime, dateTimeFormat).isBetween(start, end);

후속 format() 를 제거한 방법에 주목하세요. 이는 format() 함수가 문자열을 반환하는 반면 moment() 는 객체를 반환하기 때문입니다. 객체에서 isBetween() 함수를 호출할 수 있도록 객체가 필요합니다. 이것이 우리의 완전한 기능이 다음과 같은 모습일 것입니다.

const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now

  const latestComments = todayComments.filter((comment) => 
    moment(comment.dateTime, dateTimeFormat).isBetween(start, end)
  );

  return latestComments;
};

오늘이 2020년 10월 16일이고 현재 시간이 오후 12시 10분이라고 가정하고 작동하는 기능을 살펴보겠습니다.

// example input
const comments = [
  {
    comment: 'I would love to do something similar in my website.',
    username: 'Barbara',
    dateTime: '10/16/2020 12:04:13 PM'
  },
  {
    comment: 'Great job!',
    username: 'Jane',
    dateTime: '10/16/2020 12:01:07 PM'
  },
  {
    comment: 'Keep up the good work 😊',
    username: 'Jess',
    dateTime: '10/16/2020 11:57:55 AM'
  }
 ...
];

const latestComments = getLatestComments(comments);
console.log(latestComments);
// output 
[
  {
    comment: 'I would love to do something similar in my website.',
    username: 'Barbara',
    dateTime: '10/16/2020 12:04:13 PM'
  },
  {
    comment: 'Great job!',
    username: 'Jane',
    dateTime: '10/16/2020 12:01:07 PM'
  }
]

읽어 주셔서 감사합니다! 다음 시간까지 👋

Unsplash에서 Heather Zabriskie의 표지 사진.