날짜 데이터 원칙: 저장용 vs 표시용

zeroha·2025년 8월 11일

HTML . CSS . JS

목록 보기
7/7

날짜 데이터 처리 원칙: 데이터와 표현의 분리

소프트웨어 개발에서 날짜와 시간 데이터는 데이터 계층(Data Layer)에서 다루는 방식과 표현 계층(Presentation Layer)에서 다루는 방식을 명확히 분리해야 함. 이는 데이터의 무결성을 보장하고 시스템 간의 호환성을 유지하며, 사용자에게는 유의미한 정보를 제공하기 위한 핵심적인 아키텍처 원칙임.

1. 데이터 계층: 타임스탬프(Timestamp)로 저장 (.getTime())

애플리케이션에서 날짜 데이터가 생성, 저장, 서버 간 전송될 때는 숫자 형태의 타임스탬프를 사용하는 것이 표준임. JavaScript에서는 new Date().getTime() 메서드로 이 값을 얻음.

* 정의

getTime()은 Unix Epoch Time (1970년 1월 1일 00:00:00 UTC)을 기준으로 현재까지 경과한 시간을 밀리초(milliseconds) 단위의 정수(Integer)로 반환함. 이 숫자 값을 '타임스탬프'라 칭함.

* 사용 이유

절대적 기준점: 타임스탬프는 시간대(Timezone)나 서머타임(DST)의 영향을 받지 않는 절대적인 시간 값임. 미국 서버에서 저장한 값이든 한국 사용자 브라우저에서 생성한 값이든 1723394400000은 항상 동일한 특정 시점을 가리킴. 이로 인해 데이터 불일치 문제가 발생하지 않음.

효율적인 연산: 숫자 타입은 문자열에 비해 비교, 정렬, 차이 계산 등 연산에 매우 효율적임. 예를 들어, 게시물이 작성된 후 얼마나 시간이 지났는지 계산하는 로직은 단순히 타임스탬프 간의 뺄셈으로 구현 가능함.

데이터베이스 친화성: 대부분의 데이터베이스 시스템은 숫자 타입의 인덱싱(indexing)과 쿼리 성능이 문자열보다 훨씬 뛰어남. '최근 24시간 내 작성된 글'과 같은 시간 기반 쿼리를 매우 빠르고 효율적으로 처리할 수 있음.

* 코드 예시 (데이터 저장)

// 서버 또는 클라이언트에서 데이터를 생성
const newPost = {
  id: 123,
  title: "오늘의 일기",
  // 'date' 필드에는 순수한 숫자 값인 타임스탬프를 저장함
  date: new Date().getTime(), 
};

// 이 객체를 API를 통해 서버로 전송하거나 데이터베이스에 저장함
// DB에는 { id: 123, ..., date: 1723394400000 } 형태로 기록됨

2. 표현 계층: 지역화된 문자열로 변환 (.toLocaleString())

데이터 계층에 저장된 타임스탬프를 사용자 인터페이스(UI)에 표시할 때는, 해당 사용자가 이해하기 쉬운 형식의 문자열로 변환해야 함. 이때 toLocaleString()과 같은 포맷팅(Formatting) 메서드가 사용됨.

* 정의

toLocaleString()은 Date 객체가 가진 시간 정보를 특정 로케일(Locale)의 관습에 맞는 문자열로 변환하는 메서드임. 로케일은 언어, 국가, 문화권에 따른 표기법의 집합을 의미함.

* 핵심 개념: 로케일(Locale)

이 메서드의 가장 큰 특징은 동일한 시간 값이라도 로케일 인자에 따라 결과물이 달라진다는 것임. 이는 국제적인 서비스를 만들 때 매우 중요함.


const timestamp = 1723394400000;
const dateObject = new Date(timestamp);

// 한국 사용자에게 보여줄 형식
console.log(dateObject.toLocaleString('ko-KR')); 
// 출력: "2025. 8. 12. 오전 12:40:00"

// 미국 사용자에게 보여줄 형식
console.log(dateObject.toLocaleString('en-US')); 
// 출력: "8/12/2025, 12:40:00 AM"
// 참고: 더 정교한 날짜 포맷팅이 필요할 경우, JavaScript의 내장 객체인 
// Intl.DateTimeFormat을 사용하면 '연도, 월, 일, 요일' 등을 훨씬 더 세밀하게 제어할 수 있음. 
// toLocaleString()은 내부적으로 이 Intl API를 활용함.

* 사용 이유

사용자 경험(UX): 사용자는 자신에게 가장 익숙한 형식으로 날짜와 시간을 인지할 수 있어 서비스 사용성이 향상됨.

관심사 분리: 데이터의 원본(타임스탬프)은 그대로 둔 채, 표현 방식만 자유롭게 변경할 수 있음. "오후 12:40", "25년 8월 12일", "방금 전" 등 다양한 형태로 가공하여 보여줄 수 있음.

* 코드 예시 (데이터 표시)


// 데이터베이스로부터 'savedPost' 객체를 받았다고 가정
const savedPost = { id: 123, title: "오늘의 일기", date: 1723394400000 };

// 1. 저장된 타임스탬프(숫자)를 기반으로 Date 객체를 메모리에 생성
const postDate = new Date(savedPost.date);

// 2. 사용자의 로케일에 맞는 문자열로 변환하여 화면에 표시
const displayDate = postDate.toLocaleString('ko-KR', { dateStyle: 'long', timeStyle: 'short' });

// 최종적으로 UI에 displayDate("2025년 8월 12일 오후 12:40")를 렌더링함
profile
하 영

0개의 댓글