웹 애플리케이션을 개발하다 보면 사용자의 로컬 시간대에 따라 날짜와 시간을 표시하거나 처리해야 하는 경우가 있습니다. 이때 시간대를 고려하여 정확한 날짜 다루기를 구현하는 방법에 대해 살펴보겠습니다.

1. 클라이언트 사이드에서의 날짜 표시

웹 애플리케이션의 대부분은 사용자의 로컬 시간대를 기준으로 날짜와 시간을 표시합니다. JavaScript의 Date 객체를 사용하여 클라이언트 사이드에서 현재 날짜 및 시간을 가져올 수 있습니다.

예를 들어, 다음 코드는 현재 날짜를 사용자의 로컬 시간대에 맞게 표시하는 예제입니다.

const now = new Date();
const localDateString = now.toLocaleDateString();
const localTimeString = now.toLocaleTimeString();
console.log(`Local Date: ${localDateString}`);
console.log(`Local Time: ${localTimeString}`);

2. 서버 사이드에서의 날짜 처리

서버 측에서는 클라이언트의 요청을 받아서 해당 시간대에 맞는 날짜와 시간을 정확하게 처리해야 합니다. Node.js에서는 Moment.js나 native JavaScript Date 객체를 활용하여 서버 사이드에서 시간대를 고려한 날짜 처리를 할 수 있습니다.

예를 들어, Moment.js를 사용하여 특정 시간대의 날짜를 만들고 표시하는 예제는 다음과 같습니다.

const moment = require('moment-timezone');
const nowUtc = moment.utc();
const localTime = nowUtc.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(`Local Time in New York: ${localTime}`);

3. 시간대 변환

사용자의 로컬 시간대를 고려하여 날짜와 시간을 다루는 경우, 때로는 서로 다른 시간대 간의 변환도 필요할 수 있습니다. 이때 Moment.js나 JavaScript의 Date 객체를 활용하여 시간대 간의 변환을 수행할 수 있습니다.

예를 들어, Moment.js를 사용하여 서로 다른 시간대 간의 변환을 수행하는 예제는 다음과 같습니다.

const moment = require('moment-timezone');
const sourceTime = moment('2022-01-01T12:00:00Z');
const targetTime = sourceTime.tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss');
console.log(`Target Time in Los Angeles: ${targetTime}`);

이러한 방법들을 활용하여 클라이언트와 서버 사이드에서 시간대를 고려한 날짜 다루기를 구현할 수 있습니다.

참고 문헌:

• MDN Web Docs - Date
• Moment.js Documentation