[ JavaScript ] Date 정복하기

Node.js !== Browser

보통 서버에 데이터를 저장할 때 createdAt: new Date()와 같이 생성 시간을 지정한다.

그런데 클라이언트에서 특정 기간 내에 생성된 데이터를 서버에서 조회할 때 예상치 못한 문제가 발생할 수 있다.

브라우저와 서버의 new Date() 출력 차이

// 브라우저
// Sun Feb 16 2025 22:58:26 GMT+0900 (한국 표준시)
console.log(new Date())

// node.js
// 2025-02-16T13:58:26.381Z
console.log(new Date())

위와 같이 서버(node.js) 클라이언트(브라우저)는 각각 다른 형태의 Date를 출력한다.

이는 서버는 서버의 타임존을 기반으로 생성을 하고, 브라우저는 사용자의 로컬 타임존을 따른다.

• 브라우저 → new Date()는 사용자의 로컬 타임존 (KST, UTC+9)을 따름, 사람이 읽기 쉬운 형식으로 표현
• 서버(Node.js) → new Date()는 기본적으로 UTC (GMT+0) 기준으로 생성됨

브라우저와 서버의 Date 동기화하기

서버와 클라이언트 간 날짜를 일관되게 유지하려면 toISOString()을 활용하면 된다.

브라우저에서도 toISOString()을 사용하면 Node.js와 동일한 UTC 시간으로 변환됨.

// 브라우저
// 2025-02-16T13:58:26.381Z
console.log(new Date().toISOString())

// node.js
// 2025-02-16T13:58:26.381Z
console.log(new Date())

---

날짜 바꾸기

setDate() 사용

const today = new Date();
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
console.log(today);		// Sun Feb 16 2025 23:21:20 GMT+0900 (한국 표준시)
console.log(tomorrow);	// Mon Feb 17 2025 23:21:20 GMT+0900 (한국 표준시)

date-fns 라이브러리

import { addDays } from "date-fns";

const today = new Date();
const tomorrow = addDays(today, 1);
const dayAfterTomorrow = addDays(today, 2);

console.log(tomorrow); 			// Mon Feb 16 2025 23:21:20 GMT+0900 (한국 표준시)
console.log(dayAfterTomorrow);	// Tue Feb 17 2025 23:21:20 GMT+0900 (한국 표준시)

---

다양한 Date 객체 생성

console.log(new Date()); // 현재 날짜 & 시간 (로컬 타임존)
console.log(new Date().toISOString()); // UTC 기준의 ISO 8601 형식
console.log(new Date("2025-02-16")); // 특정 날짜 생성 (시간은 00:00:00)
console.log(new Date(2025, 1, 16)); // 2025년 2월 16일 (⚠️ Month는 0부터 시작!)
console.log(new Date(2025, 1, 16, 14, 30, 0)); // 2025-02-16 14:30:00 생성
console.log(new Date(1744672800000)); // UNIX 타임스탬프 (밀리초 단위)

---

특정 날짜에서 원하는 값 추출하기

const now = new Date();
console.log(now.getFullYear()); // 연도 (ex. 2025)
console.log(now.getMonth() + 1); // 월 (⚠️ 0부터 시작하므로 +1 필요)
console.log(now.getDate()); // 일 (1~31)
console.log(now.getDay()); // 요일 (0: 일요일, 1: 월요일 ...)
console.log(now.getHours()); // 시간 (0~23)
console.log(now.getMinutes()); // 분 (0~59)
console.log(now.getSeconds()); // 초 (0~59)

---

출력 형식 변경

다양한 방법이 있지만 제일 쉽고 깔끔한 date-fns 라이브러리 추천

const date1 = new Date();
console.log(format(date1, 'yyyy년MM월dd일 HH시mm분ss초'));	// 2025년02월16일 23시37분30초
console.log(format(date1, 'yyyy.MM.dd HH.mm.ss'));	// 2025.02.16 23.37.30
console.log(format(date1, 'yyyy년MM월dd일'));	// 2025년02월16일