📝 Day 05 – 날짜 표현과 시간 표현 (Representing Dates & Times)

공식 문서 해당 챕터 바로가기 ! 🐱

들어가며

숫자랑 문자열이 자바스크립트에서 기본 중의 기본이라지만, 현실 프로그램은 결국 시간하고 맞짱 뜨게 된다.

게시글 언제 썼는지, 로그인 세션 언제 꺼져버릴지, 회의 일정 언제 빡세게 잡혀 있는지… 이런 걸 다루지 않으면 프로그램 꼴은 죄다 개판 난다. 날짜랑 시간을 제대로 쥐어짜서 표현하지 못하면, 아예 멀쩡한 시스템은 꿈도 못 꾼다.

JavaScript에는 전용 date 타입은 없지만, Date 객체를 통해 날짜와 시간을 다룰 수 있다. 다만 주의할 점이 있다. Date는 이미 레거시(legacy)로 간주되고 있어서 새로운 코드에서는 다른 대안을 쓰는 게 권장된다. 그렇더라도 여전히 수많은 코드에서 Date를 쓰고 있으니, 원리와 사용법은 확실히 이해할 필요가 있다.

---

Date 객체 기본

JavaScript의 날짜는 1970년 1월 1일 0시 0분 0초 UTC(epoch)부터 몇 밀리초가 지났는지를 기준으로 저장된다.

즉, 내부적으로는 단순히 숫자 하나지만, 다양한 메서드로 연·월·일·시·분·초를 꺼내거나 조작할 수 있다.

Date 객체의 범위는 epoch 기준으로 ±1억 일이나 된다.

생성 방법

// 오늘 날짜와 시간
const today = new Date();

// 문자열로 생성
const xmas1 = new Date("1995-12-25");

// 연, 월, 일
const xmas2 = new Date(1995, 11, 25); // month는 0부터 시작

// 연, 월, 일, 시, 분, 초
const xmas3 = new Date(1995, 11, 25, 9, 30, 0);

여기서 주의: new Date()를 쓰지 않고 그냥 Date()를 호출하면 Date 객체가 아니라 문자열을 반환한다.

---

주요 메서드

Date 메서드는 크게 네 가지로 나눌 수 있다.

• setXXX: 날짜·시간 값 설정
• getXXX: 날짜·시간 값 가져오기
• toXXX: 문자열로 변환
• parse, UTC: 문자열 파싱

---

get/set

연·월·일·시·분·초 등을 각각 읽거나 쓸 수 있다.

• 초, 분: 0~59
• 시: 0~23
• 요일(getDay): 0(일요일)~6(토요일)
• 월: 0(1월)~11(12월)

const xmas = new Date("1995-12-25");
console.log(xmas.getMonth());     // 11 (12월)
console.log(xmas.getFullYear()); // 1995

요일은 자동으로 계산되기 때문에 setDay 같은 메서드는 존재하지 않는다.

---

getTime / setTime

epoch(1970-01-01 UTC)부터의 밀리초를 다룬다. 날짜 비교나 계산에 유용하다.

const today = new Date();
const endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999);

const msPerDay = 24 * 60 * 60 * 1000;
let daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
daysLeft = Math.round(daysLeft);

console.log(daysLeft); // 올해 남은 일수

---

parse

문자열을 밀리초 값으로 바꿔준다.

const ipoDate = new Date();
ipoDate.setTime(Date.parse("Aug 9, 1995"));

---

예제: 디지털 시계

function JSClock() {
  const time = new Date();
  const hour = time.getHours();
  const minute = time.getMinutes();
  const second = time.getSeconds();

  let temp = String(hour % 12);
  if (temp === "0") temp = "12";

  temp += (minute < 10 ? ":0" : ":") + minute;
  temp += (second < 10 ? ":0" : ":") + second;
  temp += hour >= 12 ? " P.M." : " A.M.";
  return temp;
}

console.log(JSClock()); // 예: "3:07:45 P.M."

작동 방식:

1. 현재 시간을 가져와 시·분·초를 뽑는다.
2. hour % 12로 12시간제 변환, 0시는 12로 치환.
3. 분과 초가 한 자리면 앞에 0을 붙인다.
4. 오전/오후를 구분해 "A.M." 또는 "P.M."을 덧붙인다.

---

마무리

Date 객체는 설계가 다소 낡았지만, “시간 = epoch부터의 밀리초”라는 단순한 모델 덕분에 여전히 강력하다.

• 날짜를 다루고,
• 시간 차이를 계산하고,
• 문자열을 파싱하거나 포맷팅하는 일까지 커버한다.

다만 현대 프로젝트에서는 Date 대신 더 나은 라이브러리(예: Temporal API, dayjs, date-fns)를 고려하는 것이 좋다.