Day.js로 날짜 다루기

Day.js란?

"날짜/시간을 쉽게 다루는 라이브러리"

---

1. 왜 Day.js를 쓰냐?

JavaScript 기본 Date의 문제점

// 기본 Date - 불편함
const date = new Date("2024-12-09");
const year = date.getFullYear();
const month = date.getMonth() + 1;  // 0부터 시작해서 +1 해야 함
const day = date.getDate();

const formatted = `${year}년 ${month}월 ${day}일`;
// "2024년 12월 9일" - 앞에 0 안 붙음

문제점:

• 월이 0부터 시작 (1월 = 0)
• 포맷팅 번거로움
• 날짜 계산 복잡함
• 타임존 처리 어려움

Day.js 사용 - 편함!

import dayjs from "dayjs";

const formatted = dayjs("2024-12-09").format("YYYY년 MM월 DD일");
// "2024년 12월 09일" - 간단함!

---

2. 코드 분석

formatDate 함수

export const formatDate = (date: string, format?: string) => {
  return dayjs(date).format(format ? format : "YYYY년 MM월 DD일");
};

동작 방식

1) dayjs(date)

dayjs("2024-12-09")
// Day.js 객체로 변환

2) .format()

.format("YYYY년 MM월 DD일")
// "2024년 12월 09일"

format 파라미터

format?: string

• ?: 선택적 파라미터 (안 넣어도 됨)
• 안 넣으면 기본값 "YYYY년 MM월 DD일" 사용

---

3. 포맷 옵션

기본 포맷들

// 사용 예시
formatDate("2024-12-09", "YYYY-MM-DD")
// "2024-12-09"

formatDate("2024-12-09", "YYYY/MM/DD")
// "2024/12/09"

formatDate("2024-12-09", "MM월 DD일")
// "12월 09일"

formatDate("2024-12-09", "YYYY.MM.DD HH:mm:ss")
// "2024.12.09 00:00:00"

포맷 문자 설명

문자	의미	예시
YYYY	년도 (4자리)	2024
YY	년도 (2자리)	24
MM	월 (2자리)	12
M	월 (1자리)	12
DD	일 (2자리)	09
D	일 (1자리)	9
HH	시 (24시간, 2자리)	14
mm	분 (2자리)	05
ss	초 (2자리)	30

---

4. 실제 사용 예시

책 출간일 표시

// Book.tsx
interface Book {
  title: string;
  pubDate: string;  // "2024-12-09T10:30:00"
}

function BookItem({ book }: { book: Book }) {
  return (
    <div>
      <h3>{book.title}</h3>
      <p>출간일: {formatDate(book.pubDate)}</p>
      {/* "출간일: 2024년 12월 09일" */}
    </div>
  );
}

주문 날짜 표시

// Order.tsx
function OrderItem({ order }) {
  return (
    <div>
      <p>주문일: {formatDate(order.createdAt, "YYYY.MM.DD HH:mm")}</p>
      {/* "주문일: 2024.12.09 14:30" */}
    </div>
  );
}

---

5. Day.js의 다른 기능들

날짜 비교

import dayjs from "dayjs";

const date1 = dayjs("2024-12-09");
const date2 = dayjs("2024-12-10");

date1.isBefore(date2);  // true
date1.isAfter(date2);   // false
date1.isSame(date2);    // false

날짜 계산

// 7일 후
dayjs().add(7, "day").format("YYYY-MM-DD");

// 1개월 전
dayjs().subtract(1, "month").format("YYYY-MM-DD");

// 오늘 날짜
dayjs().format("YYYY-MM-DD");

상대 시간 표시

import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/ko";

dayjs.extend(relativeTime);
dayjs.locale("ko");

dayjs("2024-12-08").fromNow();
// "1일 전"

dayjs("2024-12-10").fromNow();
// "1일 후"

---

6. Moment.js vs Day.js

Moment.js (예전)

• 용량: 약 230KB
• 사용률 감소 중
• 공식적으로 유지보수 중단

Day.js (최신)

• 용량: 약 2KB (100배 작음!)
• Moment.js와 API 비슷
• 활발히 개발 중
• 실무에서 Day.js 권장

---

7. 설치 및 사용

설치

npm install dayjs

기본 사용

import dayjs from "dayjs";

// 현재 시간
const now = dayjs();

// 특정 날짜
const date = dayjs("2024-12-09");

// 포맷팅
const formatted = dayjs().format("YYYY-MM-DD");

---

8. formatNumber 함수도 설명

export const formatNumber = (number: number): string => {
  return number.toLocaleString();
};

뭐 하는 거냐?

"숫자를 읽기 쉽게 콤마 찍어줌"

formatNumber(1234567);
// "1,234,567"

formatNumber(10000);
// "10,000"

실제 사용

// 책 가격 표시
<p>가격: {formatNumber(book.price)}원</p>
// "가격: 15,000원"

// 재고 수량
<p>재고: {formatNumber(book.stock)}개</p>
// "재고: 1,234개"

---

9. 실무 활용 예시

utils 폴더 구조

src/
  utils/
    format.ts          ← 이 파일
    validation.ts
    storage.ts

여러 곳에서 재사용

// BookList.tsx
import { formatDate, formatNumber } from "@/utils/format";

function BookList() {
  return (
    <div>
      <p>가격: {formatNumber(book.price)}원</p>
      <p>출간: {formatDate(book.pubDate)}</p>
    </div>
  );
}

// OrderList.tsx
import { formatDate, formatNumber } from "@/utils/format";

function OrderList() {
  return (
    <div>
      <p>주문금액: {formatNumber(order.totalPrice)}원</p>
      <p>주문일: {formatDate(order.createdAt, "YYYY.MM.DD")}</p>
    </div>
  );
}

---

10. TypeScript 타입 설명

export const formatDate = (date: string, format?: string) => {
  return dayjs(date).format(format ? format : "YYYY년 MM월 DD일");
};

파라미터 타입

• date: string: 날짜 문자열 (필수)
• format?: string: 포맷 문자열 (선택)

반환 타입

• 자동으로 string 추론됨

사용 예시

// ✅ 정상
formatDate("2024-12-09");
formatDate("2024-12-09", "YYYY-MM-DD");

// ❌ 에러 (타입 불일치)
formatDate(20241209);  // string이 아님
formatDate("2024-12-09", 123);  // format이 string이 아님

---

정리

Day.js

• 날짜/시간 다루는 라이브러리
• 가볍고 사용하기 쉬움
• Moment.js 대체제
• 실무 표준

formatDate 함수

• 날짜 문자열을 원하는 형식으로 변환
• 기본 포맷: "YYYY년 MM월 DD일"
• 커스텀 포맷 가능

formatNumber 함수

• 숫자에 콤마 찍어줌
• 가격, 수량 표시할 때 사용

"날짜 다룰 땐 Day.js가 최고!"