달력 클론코딩 (1) dayjs 에 대하여 알아보기

1. dayjs는 react에서 날짜, 시간을 표시하고 시간 계산을 위해 쓰는 라이브러리다. 

 

(1) install

npm install dayjs

yarn은 따로 보시길..

 

(2) import 

이제 다운 받은 dayjs 라이브러리를 사용해 보겠다. dayjs 자체만 import 한다고 해서 내장 함수를 다 쓸 수 없다. 몇몇 함수들은 직접 import및 상속도 받아야 한다. 

2. 많이 쓰이는 함수 알아보기 

(0) 사전 세팅 

now라는 변수에 년월일 시분초를 넣어주겠다. 다음이 dayjs를 통해 변수에 년월일, 시분초를 넣는 방법이다.

const now = dayjs("2022-11-04 16:01:30");

(1) set 함수, format 함수 

day(now).set("minute", 5)는 now에서의 분을 꺼내와서 5로 바꿔라는 뜻이다. 

.format("YYYY.MM.DD HH:mm:ss")는 작업을 끝내고 다시 now에 집어넣을 때 다음과 같은 형식으로 집어 넣으라는 뜻이다.

 

여기서 set 부분의 "minute"은 "hour", "year"등 해당 형식으로 다 쓸 수 있다. 

format에서 HH:mm:ss 중 HH는 시간을 24시간제로 표기하겠다는 뜻이다. hh로 표기하면 12시간제로 표기된다. 

 

(2) get 함수 

now에서 년월일 시분초를 빼내오는 함수이다. " "안에 적는 내용에 따라 원하는 것을 빼올 수 있다. 

 

주의점은 month의 값이 0부터 시작해서 0이 1월, 1이 2월 ... 11이 12월을 뜻한다. 

요일의 경우 0이 일요일~ 6이 토요일 순으로 진행된다. 

 

(3)add, substract 함수 

현재 시간에서 몇 시간을 빼거나 더하라는 함수이다. 

 

(4)startof, endof

dayjs(now).startof("month") => 해당 "달"의 맨 처음 날짜를 가져와라 

dayjs(now).startof("year") => 해당 "년도"의 맨 처음 날짜를 가져와라

endof는 반대 => 해당 " "의 맨 끝 날짜를 가져와라 

 

(5) 비교 함수 (isSame, isBefore, isAfter, isSameorBefore, isSameorAfter)

boolean 반환 함수들이다.

dayjs(시간 변수A).isSame(시간변수B, "비교 단위") 식으로 된다. 

비교 단위를 따로 안 적어주면 밀리세컨드 단위로 서로 같거나 다른지 비교한다. 

A.isBefore B는 A가 B보다 시간이 빠르냐 이고

A.isAfter B는 A가 B보다 후 시간대냐 이다. 

 

(6)Between 함수 

dayjs(검증할 년월일 시분초).isBetween(시간변수A, 시간변수B ,"비교단위")

A,B 둘 사이에 해당 검증할 시간이 있는지 비교, A와 B 둘의 순서는 상관 없다. 

비교 단위 안 적어주면 밀리세컨드 단위로 해당 값들 사이에 있는지 확인하고 

비교 단위 써주면 딱 그것만 같은지 확인한다. 예를 들어 A === 2077년 10월 29일 이고 B === 4002년 10월 29일 이라고 가정하자. 검증할 년월일이 2022년 10월 29일이라도 비교단위가 "date"라면 해당 값은 false 이다. 

왜냐하면 10월 29일과 10월 29일 사이에는 틈이 없기 때문에, 검증할 값 10월 29일이 그 사이에 있다고 볼 수 없기 때문이다. 

(7) 두 날짜 간의 차이를 나타내는 함수 

dayjs(A).diff(B, "차이를 나타낼 단위")이면 A -B 라는 것이다.