날짜 라이브러리 기초

라이브러리란

라이브러리 vs 프레임워크

-라이브러리는 개발 편의를 위한 도구의 모음

-프레임워크는 기반 구조까지 잡혀있음

ex)라이브러리는 공구, 프레임워크는 공장

moment.js

import React from "react"
import moment from "moment"

export default function momentExample() {
  const momentDate = moment()//오늘 날짜
  const newMomentDate = momentDate.add(1, "week")//해당 데이터에서 일주일뒤
  const cloneNewMomentDate = newMomentDate.clone().add(1, "week")//해당 데이터에서 일주일뒤
  return (
    <div>
      <h1>Moment</h1>
      <div>Imutable Check</div>
      <div>
      {momentDate.format()}
      <br />
      {newMomentDate.format()}
      <br />
      {cloneNewMomentDate.format()}
      <br />
      </div>
    </div>

결과

첫번째 momentDate는 오늘이 나와야 되지만
두번째 newMomentDate에서 clone을 안했기 때문에 원본 데이터가 변경되어서
두 개다 같은 날짜가 나오고
세번째에서야 clone을 했기때문에 원본 데이터가 변하지 않았다.

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 = newMomentDate.clone().add(1, "week")

  const birthDayRef = useRef(null)
  const [day, setDay] = useState()
  const handleBirthDayChange = (event) => {
    setDay(moment(event.target.value, "YYYY-MM-DD").format("dddd"))
  }
  return (
    <div>
      <h1>Moment</h1>
      <div>Imutable Check</div>
      <div>
        {momentDate.format()}
        <br />
        {newMomentDate.format()}
        <br />
        {cloneNewMomentDate.format()}
        <br />
      </div>
      <div>Summer Time (New-york)</div>
      <div>
        2018년 3월 10일 13시에 하루 더하기
        {moment.tz("2018-03-10 13:00:00", "America/New_York").add(1, "day").format()}
      </div>
      <div>
        2018년 3월 10일 13시에 24시간 더하기
        {moment.tz("2018-03-10 13:00:00", "America/New_York").add(24, "hour").format()}
      </div>
      <br />
      <br />
      <div>Summer Time (korea)</div>
      <div>
        2017년 1월 1일 1년 빼기:
        {moment("2017-01-01").subtract(1, "year").format()}
      </div>
      <div>
        2017년 1월 1일 365일 빼기:
        {moment("2017-01-01").subtract(365, "day").format()}
        {/* 윤년이라 1년 뺏을 때 하고 365일 뺏을 때하고 하루 차이가 남 */}
      </div>
      <div>한국어로 표기 07-17-2021을 2021년 7월 17일로 표기하기</div>
      <div>{moment("07-17-2021").format("YYYY년 M월 D일")}</div>
      <br />
      <br />
      <div>
        <div>자기생일 요일 찾기</div>
        <input type="date" ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일이였을까</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00은 몇시간 차이인가?</div>
      <div>{moment("2021-07-17 03:00").diff(moment("2021-07-18 02:00"), "hour")}</div>
    </div>
  )
}

햐지만 이젠 2011년 이후로 업데이트를 안하기 때문에 더이상 사용은 안할 것같다.
가장 큰이유는 크기가 너무크다

dayjs

대신 이것을 사용한다

import { React, useState, useRef } from "react"
import dayjs from "dayjs"

import utc from "dayjs/plugin/utc"
import timezone from "dayjs/plugin/timezone"

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

dayjs.locale("ko") //이걸 적으면 "무슨 요일이였을까"에서 날짜 선택시 한글로 나옴

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

  const birthDayRef = useRef(null)
  const [day, setDay] = useState()
  const handleBirthDayChange = (event) => {
    setDay(dayjs(event.target.value, "YYYY-MM-DD").format("dddd"))
  }
  return (
    <div>
      <h1>dayjs</h1>
      <div>Imutable Check</div>
      <div>
        {dayjsDate.format()}
        <br />
        {newdayjsDate.format()}
        <br />
        {cloneNewdayjsDate.format()}
        <br />
      </div>
      <br />
      <br />
      <div>Summer Time (New-york)</div>
      <div>{dayjs.tz.guess()}</div>
      <div>
        2018년 3월 10일 13시에 하루 더하기
        {dayjs.tz("2018-03-10 13:00:00", "America/New_York").add(1, "day").format()}
      </div>
      <div>
        2018년 3월 10일 13시에 24시간 더하기
        {dayjs.tz("2018-03-10 13:00:00", "America/New_York").add(24, "hour").format()}
      </div>
      <br />
      <br />
      <div>leap year</div>
      <div>
        2017년 1월 1일 1년 빼기:
        {dayjs("2017-01-01").subtract(1, "year").format()}
      </div>
      <div>
        2017년 1월 1일 365일 빼기:
        {dayjs("2017-01-01").subtract(365, "day").format()}
        {/* 윤년이라 1년 뺏을 때 하고 365일 뺏을 때하고 하루 차이가 남 */}
      </div>
      <br />
      <br />
      <div>한국어로 표기 07-17-2021을 2021년 7월 17일로 표기하기</div>
      <div>{dayjs("07-17-2021").format("YYYY년 M월 D일")}</div>
      <br />
      <br />
      <div>
        <div>자기생일 요일 찾기</div>
        <input type="date" ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일이였을까</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00은 몇시간 차이인가?</div>
      <div>{dayjs("2021-07-17 03:00").diff(dayjs("2021-07-18 02:00"), "hour")}</div>
    </div>
  )
}

Datefns

가장큰특징은 원하는 기능만 뽑아서 사용가능하기 때문에
용량이 적다.

import { React, useState, useRef } from "react"
import dayjs from "dayjs"

import { add, format, sub, differenceInHours } from "date-fns"
import { format as timeZoneformat } from "date-fns-tz"
import { ko } from "date-fns/locale"
import addweeks from "date-fns/addweeks"

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

  const birthDayRef = useRef(null)
  const [day, setDay] = useState()
  const handleBirthDayChange = (event) => {
    setDay(format(new Date(event.target.value), "EEEE", { locale: ko }))
  }
  return (
    <div>
      <h1>Datefns</h1>
      <div>Imutable Check</div>
      <div>
        {format(datefnsDate, "yyyy-MM-dd")}
        <br />
        {format(newdatefnsDate, "yyyy-MM-dd")}
        <br />
        {format(cloneNewdatefnsDate, "yyyy-MM-dd")}
        <br />
      </div>
      <br />
      <br />
      <div>Summer Time (New-york)</div>
      <div>{dayjs.tz.guess()}</div>
      <div>
        2018년 3월 10일 13시에 하루 더하기
        {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시간 더하기
        {timeZoneformat(
          add(new Date("2018-03-10 13:00:00"), { timeZone: "america/New_York" }, { hours: 24 }),
          "yyyy-MM-dd HH:mm:ssXXX",
          {
            timeZone: "America/New_York",
          }
        )}
      </div>
      <br />
      <br />
      <div>leap year</div>
      <div>
        2017년 1월 1일 1년 빼기:
        {format(sub(new Date("2017-01-01"), { years: 1 }), "yyyy-MM-dd")}
      </div>
      <div>
        2017년 1월 1일 365일 빼기:
        {format(sub(new Date("2017-01-01"), { days: 365 }), "yyyy-MM-dd")}
        {/* 윤년이라 1년 뺏을 때 하고 365일 뺏을 때하고 하루 차이가 남 */}
      </div>
      <br />
      <br />
      <div>한국어로 표기 07-17-2021을 2021년 7월 17일로 표기하기</div>
      <div>{format(new Date("07-17-2021"), "yyyy년 M월 d일")}</div>
      <br />
      <br />
      <div>
        <div>자기생일 요일 찾기</div>
        <input type="date" ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일이였을까</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00은 몇시간 차이인가?</div>
      <div>{`${differenceInHours(
        new Date("2021-07-17 03:00"),
        new Date("2021-07-18 02:00")
      )}`}</div>
    </div>
  )
}