Software Developer

느리지만 꾸준히 씁니다.

시간 오름차순 정렬

  • 과거로부터 시간 오름차순으로 정렬할 수 있다.
    • new Date() 사용 
      const schedules = [
  { id : 1, schedule : '2021-03-13T11:00:00.000Z' }, 
  { id : 2, schedule : '2019-01-13T05:00:00.000Z' },
  { id : 3, schedule : '2022-04-22T00:00:00.000Z' },
  { id : 4, schedule : '2011-04-16T12:00:00.000Z' }
];

schedules.sort((a,b)=> {
  a = new Date(a.schedule);
  b = new Date(b.schedule);
  return a - b;
});
      • 결과값
        스크린샷 2022-03-12 오후 11 49 42
    • moment.js 사용 
      const schedules = [
  { id : 1, schedule : '2021-10-01T11:00:00.000Z' }, 
  { id : 2, schedule : '2021-01-13T05:00:00.000Z' },
  { id : 3, schedule : '2025-04-22T00:00:00.000Z' },
  { id : 4, schedule : '2019-09-16T12:00:00.000Z' }
];

schedules.sort((a,b)=> {
  a = moment(a.schedule);
  b = moment(b.schedule);
  return a - b;
});
      • 결과값
        스크린샷 2022-03-13 오전 12 09 21

오늘 날짜와 비교한 시간 정렬

  • 오늘을 기준으로 날짜를 정렬해보려고 한다.
  • 오늘 날짜를 기준으로 할 경우 아직 지나지 않은 날짜가 -(마이너스)로 표기된다는 점을 주의하자
  • 조건
    1. 오늘 날짜 기준으로 아직 지나지 않은 날짜 중 가장 가까운 날짜를 더 먼 날짜보다 앞으로 뺀다
    2. 오늘 날짜 기준으로 이미 지난 날짜 중 가장 최근 날짜를 더 오래된 날짜보다 앞으로 뺀다.
    • new Date() 사용 
      const today = new Date()
const schedules = [
  { id : 1, schedule : '2021-10-01T11:00:00.000Z' }, 
  { id : 2, schedule : '2022-05-13T05:00:00.000Z' },
  { id : 3, schedule : '2025-04-22T00:00:00.000Z' },
  { id : 4, schedule : '2019-09-16T12:00:00.000Z' }
];

schedules.sort((a, b) => {
  a = new Date(a.schedule)
  b = new Date(b.schedule)
  a = Math.floor((today - a) / (1000 * 60 * 60 * 24)) 
  b = Math.floor((today - b) / (1000 * 60 * 60 * 24))
        
        
  if (a < 0) {  // 기준값이 아직 지나지 않은 날짜이고,
    if (b < 0) {  // 비교값도 아직 지나지 않은 날짜일 경우 내림차순으로 정렬
      return b - a;
    } else {  // 비교값이 지난 날짜일 경우에는 오름차순으로 정렬
      return a - b;
    }
  } else {  // 기준값과 비교값이 모두 지난 날짜일 경우에는 오름차순 정렬
    return a - b;
  }
  return 0
  })
      • date 타입의 경우 -(마이너스) 연산자를 통해 숫자로 변환할 수 있다.
      • 결과값
        스크린샷 2022-03-13 오후 5 49 12
    • moment.js 사용 
      const today = moment().format('YYYY-MM-DD HH:mm:ss');
const schedules = [
  { id : 1, schedule : '2021-10-01T11:00:00.000Z' }, 
  { id : 2, schedule : '2022-05-13T05:00:00.000Z' },
  { id : 3, schedule : '2025-04-22T00:00:00.000Z' },
  { id : 4, schedule : '2019-09-16T12:00:00.000Z' }
];

schedules.sort((a, b) => {
  a = moment(today).diff(a.schedule, 'days');
  b = moment(today).diff(b.schedule, 'days');

  const [startDateA, endDateA] = getDates(a);
  const [startDateB, endDateB] = getDates(b);

  if (endDateA > now && endDateB > now) {
    return endDateA.diff(endDateB, 'days');
  } else if (endDateA < now && endDateB > now) {
    return 1;
  } else if (endDateA >= now && endDateB < now) {
    return -1;
  } else {
    return startDateB.diff(startDateA, 'days');
  }
});

  if (a < 0) {  // 기준값이 아직 지나지 않은 날짜이고,
    if (b < 0) {  // 비교값도 아직 지나지 않은 날짜일 경우 내림차순으로 정렬
      return b - a;
    } else {  // 비교값이 지난 날짜일 경우에는 오름차순으로 정렬
      return a - b;
    }
  } else {  // 기준값과 비교값이 모두 지난 날짜일 경우에는 오름차순 정렬
    return a - b;
  }
  return 0
})
      • moment(기준날짜).diff(비교날짜, 'days') 를 이용하여 날짜의 차이를 일단위로 구할 수 있다.
      • 결과값은 new Date()를 사용했을때와 동일하다.

    하위 배열에 속해있는 날짜값으로 상위 데이터를 정렬해보자.

    • 실제 개발을 하다보면 데이터가 저렇게 깔끔하게 나오지 않고 날짜를 품고 있는 데이터를 다뤄줘야할 일이 발생할 수 있다.
    • 위 날짜 정렬을 응용해서 하위로 속해있는 날짜 데이터 값으로 상위 데이터의 순서를 변경해보려고 한다.
    • 조건
      1. 데이터 속 날짜 배열의 값을 비교하여 아직 지나지 않은 날짜의 데이터를 앞으로, 이미 지난 날짜의 데이터를 뒤로 보낸다.
      2. 아직 지나지 않은 날짜는 오늘 날짜와 가장 가까운 날짜를 데이터의 가장 앞으로 오게 한다.
      3. 이미 지난 날짜는 오늘 날짜와 가장 가까운 날짜를 이미 지난 날짜 중에서 가장 앞으로 오게 한다.
        • 위 예시에서의 schedule 데이터가 Data라는 배열 안에 각 요소로 들어가있다고 가정하자 
          const Data = [ 
 {
 id: 1,
 name: 'summer',
 schedule: [
   { id : 1, schedule : '2022-01-01T20:00:00.000Z' }, 
   { id : 2, schedule : '2022-01-21T20:00:00.000Z' },
   { id : 3, schedule : '2022-02-11T20:00:00.000Z' },
   { id : 4, schedule : '2022-03-03T20:00:00.000Z' }
 ]
 },
 {
 id: 2,
 name: 'winter',
 schedule: [
   { id : 1, schedule : '2022-03-01T13:00:00.000Z' }, 
   { id : 2, schedule : '2022-03-08T13:00:00.000Z' },
   { id : 3, schedule : '2022-03-15T13:00:00.000Z' },
   { id : 4, schedule : '2022-03-22T13:00:00.000Z' }
 ]
 },
 {
 id: 3,
 name: 'spring',
 schedule: [
   { id : 1, schedule : '2022-03-30T19:00:00.000Z' }, 
   { id : 2, schedule : '2022-04-30T19:00:00.000Z' },
   { id : 3, schedule : '2022-05-30T19:00:00.000Z' },
   { id : 4, schedule : '2022-06-30T19:00:00.000Z' }
 ]
 }
]
      • 참고: moment.js를 사용했다. 
        let countDays;  // 오늘을 기준으로 차이값을 담아줄 변수
const today = moment().format('YYYY-MM-DD HH:mm:ss');
const changeTimeToNumber = (date) => {  // 일차를 숫자로 변환해주는 함수
  for (let day of date.schedule) {  // for 문으로 모든 schedule 값을 숫자로 변환
    countDays = moment(today).diff(date.schedule, 'days');
    if (countDays < 0) { 
      break;
    }
  }
  return countDays;
};

Date.sort((a, b) => {
  const a = changeTimeToNumber(a); 
  const b = changeTimeToNumber(b);

  if (a < 0 && b < 0) return b - a;
  if (a > 0 && b > 0) return a - b;
  if (a > b) return b - a;
  if (a < b) return a - b;
  return 0;
})
        • 이렇게 해서 날짜가 원하는대로 잘 나오긴 한다.
        • 혹시 내가 틀렸다면 이메일로 둥글게..🙏

참고