[Worksheet 220517] 라이브러리 기초 - Date

방예서·2022년 5월 17일
ReactWorksheet
0

Worksheet

목록 보기
38/47
라이브러리 기초

라이브러리란?

라이브러리 === 개발 편의를 위한 도구의 모음. 공구!

프레임워크 === 기반 구조까지 잡혀있음. 공장!

React는 도구(라이브러리)의 모음이다.

  • 필요
    특정 기능이 필요해지고 직접 구현하기에 벅차다.
    더 나은 도구가 필요해진다.
    트렌드에 따른 새로운 기술에 대한 호기심.

  • 검색

  • 사용법 파악

  • 적용

Moment

Moment

시간과 날짜를 관리해주는 라이브러리

  • 설치
    npm install moment
    npm install moment-timezone

  • moment().format()

  • moment().tz()

  • add / subtract

  • import "moment/locale/ko"
    locale을 사용해서 국가 설정 가능

큰 사이즈, mutable

너무 큰 사이즈 때문에 (등등 다른 이유로) js 의 흐름과 잘 안 맞아서 더 이상 업데이트 안 하기로 선언. (미리 좀 말해주지...)

다른 라이브러리 추천 (Luxon, Day.js, date-fns, js-Joda)

import React, { useState, useRef } from 'react'
import moment from 'moment-timezone';
import "moment/locale/ko";

export default function MomentExample() {
  const momentDate = moment();
  const newMomentDate = momentDate.add(1, "week");
  const cloneNewMomentDate = momentDate.clone().add(1, "week");

  const [day, setDay] = useState("");
  const bdayRef = useRef(null);
  const handleBdayChange = (event) => {
    setDay(moment(event.target.value, "YYYY-MM-DD").format("dddd"));
  }

  return (
    <div>
      <h1>Moment</h1>
      <div>Immutable Check</div>
      <div>
        {momentDate.format()}
        <br />
        {newMomentDate.format()}
        <br />
        {cloneNewMomentDate.format()}
      </div>
      <br />
      <div>윤년 (korea)</div>
      <div>
      2017 1 1 에서 1년 빼기 <br />
      {moment("2017-01-01").subtract(1, "year").format()}
      </div>
      <div>
      2017 1 1 에서 365일 빼기 <br />
      {moment("2017-01-01").subtract(365, "day").format()}
      </div>
      <br />
      <div>Summer Time (NewYork)</div>
      <div>
        2018 3 10 하루 더하기 <br />
        {moment.tz("2018-03-10 13:00:00", "America/New_York").add(1, "day").format()}
      </div>
      <div>
        2018 3 10 24시간 더하기 <br />
        {moment.tz("2018-03-10 13:00:00", "America/New_York").add(24, "hour").format()}
      </div>
      <br />
      <div>한국어로 표기하기</div>
      <div>
        {moment("2021-07-17").format("YYYY년 M월 D일")}
      </div>
      <br />
      <div>생일 입력하면 무슨 요일이었는지 알려주기</div>
      <div>
        <input type="date" ref={bdayRef} onChange={handleBdayChange} /> <br />
        <div>무슨 요일이었을까?</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00:00과 2021-07-18 02:00:00은 몇시간 차이인가?</div>
      <div>
        {(moment("2021-07-17 03:00:00").diff(moment("2021-07-18 02:00:00"), "hours"))}시간 차이 난다.
      </div>
    </div>
  )
}

Day.js

Dayjs

사이즈가 매우 작고 간결하다.
immutable하다.

  • 설치
    npm install dayjs

  • locale

import 'dayjs/locale/ko'

dayjs.locale("ko");
  • timezone
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

이렇게 import 하고 사용하면 된다.

import React, { useState, useRef } from 'react'
import dayjs from 'dayjs'
import 'dayjs/locale/ko'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.locale("ko");
dayjs.extend(utc);
dayjs.extend(timezone);

export default function DayjsExample() {
  const dayjsDate = dayjs();
  const newdayjsDate = dayjsDate.add(1, "week");
  const cloneNewdayjsDate = newdayjsDate.add(1, "week");

  const [day, setDay] = useState("");
  const bdayRef = useRef(null);
  const handleBdayChange = (event) => {
    setDay(dayjs(event.target.value, "YYYY-MM-DD").format("dddd"));
  }

  return (
    <div>
      <h1>dayjs</h1>
      <div>Immutable Check</div>
      <div>
        {dayjsDate.format()}
        <br />
        {newdayjsDate.format()}
        <br />
        {cloneNewdayjsDate.format()}
      </div>
      <br />
      <div>윤년 (korea)</div>
      <div>
      2017 1 1 에서 1년 빼기 <br />
      {dayjs("2017-01-01").subtract(1, "year").format()}
      </div>
      <div>
      2017 1 1 에서 365일 빼기 <br />
      {dayjs("2017-01-01").subtract(365, "day").format()}
      </div>
      <br />
      <div>Summer Time (NewYork)</div>
      <div>
        2018 3 10 하루 더하기 <br />
        {dayjs.tz("2018-03-10 13:00:00", "America/New_York").add(1, "day").format()}
      </div>
      <div>
        2018 3 10 24시간 더하기 <br />
        {dayjs.tz("2018-03-10 13:00:00", "America/New_York").add(24, "hour").format()}
      </div>
      <br />
      <div>한국어로 표기하기</div>
      <div>
        {dayjs("2021-07-17").format("YYYY년 M월 D일")}
      </div>
      <br />
      <div>생일 입력하면 무슨 요일이었는지 알려주기</div>
      <div>
        <input type="date" ref={bdayRef} onChange={handleBdayChange} /> <br />
        <div>무슨 요일이었을까?</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00:00과 2021-07-18 02:00:00은 몇시간 차이인가?</div>
      <div>
        {(dayjs("2021-07-17 03:00:00").diff(dayjs("2021-07-18 02:00:00"), "hours"))}시간 차이 난다.
      </div>
    </div>
  )
}

date.fns

date.fns

coverage가 높다. 가장 포괄적인 date 라이브러리.

  • 설치
    npm install date-fns date-fns-tz

  • add
    함수를 import 해서 사용한다.

  • format
    함수를 import 해서 사용한다.
    두번째 인자로 형식을 지정해주는데 YYYY 대문자 쓰지 않고 yyyy로 쓴다.

  • locale
    `import { ko } from 'date-fns/locale'

  • timezone
    import { format as timezoneFormat } from 'date-fns-tz';

import React, { useState, useRef} from 'react'
import { add, sub, format, differenceInHours } from 'date-fns'
import { ko } from 'date-fns/locale'
import { format as timezoneFormat } from 'date-fns-tz';

export default function DatefnsExample() {
  const datefnsDate = new Date();
  const newdatefnsDate = add(datefnsDate, {weeks: 1});
  const cloneNewdatefnsDate = add(newdatefnsDate, {weeks: 1});

  const [day, setDay] = useState("");
  const bdayRef = useRef(null);
  const handleBdayChange = (event) => {
    setDay(format(new Date(event.target.value), "EEEE", {locale: ko}));
  }

  return (
    <div>
      <h1>date fns</h1>
      <div>Immutable Check</div>
      <div>
        {format(datefnsDate, "yyyy-MM-dd")}
        <br />
        {format(newdatefnsDate, "yyyy-MM-dd")}
        <br />
        {format(cloneNewdatefnsDate, "yyyy-MM-dd")}
      </div>
      <br />
      <div>윤년 (korea)</div>
      <div>
      2017 1 1 에서 1년 빼기 <br />
      {format(sub(new Date("2017-01-01"), {years: 1}), "yyyy-MM-dd")}
      </div>
      <div>
      2017 1 1 에서 365일 빼기 <br />
      {format(sub(new Date("2017-01-01"), {days: 365}), "yyyy-MM-dd")}
      </div>
      <br />
      <div>Summer Time (NewYork)</div>
      <div>
        2018 3 10 13시에 하루 더하기 <br />
        {timezoneFormat(add(new Date("2018-03-10 13:00:00"), {days: 1}), "yyyy-MM-dd HH:mm:ssXXX", 
        {timeZone: "America/New_York"})}
      </div>
      <div>
        2018 3 10 13시에 24시간 더하기 <br />
        {timezoneFormat(add(new Date("2018-03-10 13:00:00"), {hours: 24}), "yyyy-MM-dd HH:mm:ssXXX", 
        {timeZone: "America/New_York"})}
      </div>
      <br />
      <div>한국어로 표기하기</div>
      <div>
        {format(new Date("2021-07-17"), 'yyyy년 M월 d일')}
      </div>
      <br />
      <div>생일 입력하면 무슨 요일이었는지 알려주기</div>
      <div>
        <input type="date" ref={bdayRef} onChange={handleBdayChange} /> <br />
        <div>무슨 요일이었을까?</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00:00과 2021-07-18 02:00:00은 몇시간 차이인가?</div>
      <div>
        {`${differenceInHours(new Date("2021-07-17 03:00:00"), new Date("2021-07-18 02:00:00"))}시간 차이 난다.`}
      </div>
    </div>
  )
}

라이브러리 선택 기준

기능 / 성능 / 번들 사이즈 / tree shaking

문서 가독성 / 인기(github 스타수) / 관리 상태(최근 관리) / 관리 주체

bundle phobia

번들 사이즈 체크할 수 있는 사이트

npm trends 보여주는 사이트

profile
방예서
console.log('bang log');
이전 포스트

[Worksheet 220517] React 공식 문서 고급 - PropsTypes, Reconcilation / React Dev Tool

다음 포스트

[Worksheet 220517] React 라이브러리 - 스타일링

0개의 댓글