Moment.js 대신 Day.js를 사용해야 하는 이유

 

moment.js와 day.js는 둘 다 JavaScript에서 날짜 및 시간을 다루는 라이브러리다. 

나는 moment.js를 통해 날짜를 받아왔다. 하지만 중간 피드백에서 튜터님이 moment.js보다 day.js를 사용하는 것이

좋다고 하여 리팩토링을 해봤다.

 

그렇다면 어떤 면에서 day.js가 moment.js보다 좋다고 할 수 있는지 알아보자.

 

 

	moment.js	day.js
파일 크기	파일크기가 상당히 크다 62k (gzipped: 19.9k) --> 웹페이지 성능을 저하시킬 수 있다	moment.js에 비해 파일 크키가 작다 7.6k (gzipped: 3.2k)
API 호환성	많은 개발자들이 익숙한 API를 제공하여 기존에 moment.js를 사용하던 프로젝트에서는 호환성을 유지하기 위해 moment.js를 계속 사용하는 것이 편리할 수 있다	moment.js와 유사한 API를 제공하지만 완전히 호환되지는 않다. 그러나 대부분의 일반적인 사용 사례에서는 문제가 없으며, day.js의 가벼운 크기와 성능 향상을 기대할 수 있다.
지속적인 개발	2020년 이후에는 지속적인 개발이 중단되어 새로운 기능이나 버그 수정을 기대하기 어려울 수 있다	moment.js의 영향을 받아 지속적으로 개발되고 있으며, 새로운 기능과 업데이트가 지속적으로 제공된다.

 

 

용량차이가 많이 난다.

 

 

사용방법은 간단했다. 우선 설치를 해야 한다. 그 후 코드를 수정하면 된다.

yarn add dayjs

 

 

 

기존 moment.js를 사용한 코드

import moment from 'moment';

const moment = require('moment')

 return (
   
        <Calendar
          onChange={onChangeToday}
          value={today}
          // eng 버전
          locale="en"
          // 일요일부터 시작
          calendarType="gregory"
          tileContent={({ date, view }) => {
             const formattedDate = moment(date).format('YYYY. MM. DD.');
             if (createdAtList.find((x) => x === moment(date).format('YYYY. MM. DD.'))) {
     
              const postCount = dayCount[formattedDate] || 0;
              return (
                <>
                  <div className="habitDayContainer" key={formattedDate}></div>
                  <St.CalendarContentsContainer>
                    <div />
                    <img
                      key={formattedDate}
                      className="habitImage"
                      src={mangofavicon}
                      alt={`habit-sticker-${formattedDate}`}
                    />
                    <St.PostCount> x{postCount}</St.PostCount>
                  </St.CalendarContentsContainer>
                </>
              );
            }
            return null;
          }}
        />
        <St.CurrentDate>
          <CiCalendar />
          {/* 현재 날짜 {moment(date).format('YYYY년 MM월 DD일')} */}
          현재 날짜 {moment(date).format('YYYY년 MM월 DD일')}
        </St.CurrentDate>

  );
};

 

 

게시물을 올릴 때 createdAt에 해당하는 날짜와 달력에 있는 날짜와 같다면 달력에 게시물 수를 표시해주는 것과

현재 날짜를 표시해주는 것밖에 쓴 게 없어서 리팩토링 하는 작업은 굉장히 간단했다.

 

moment를 dayjs로 다 바꾸면 끝이였다.

 

 

 

 

---