타임존과 날짜 처리 라이브러리 소개 (feat. React)

개발 방법론 & 아키텍쳐

타임존과 날짜 처리 라이브러리 소개 (feat. React)

atomicdev 2024. 10. 2. 15:43

728x90

타임존과 날짜 처리 라이브러리 소개

웹 개발에서 타임존(Timezone)과 날짜(Date) 처리는 글로벌 서비스 구현 시 매우 중요한 부분입니다. 각 나라의 시간대가 다르기 때문에 사용자에게 정확한 시간을 보여주기 위해서는 클라이언트와 서버에서 시간을 올바르게 처리하는 것이 필수적입니다. 이번 글에서는 타임존을 적용하는 방법과 날짜 처리를 위한 자바스크립트 라이브러리 사용법을 예제 중심으로 설명하겠습니다.

1. 타임존(Timezone) 개념

타임존은 지구 상의 동일한 로컬 시간을 따르는 지역을 의미합니다. 국가별로 각기 다른 고유한 타임존을 사용하고 있으며, 예를 들어 미국과 한국은 다른 타임존을 가지고 있습니다. 국제 표준 시각인 UTC(Universal Time Coordinated)를 기준으로 특정 지역의 시간을 + 또는 - 시간을 더해 표현합니다.

예시:

UTC +09:00: 한국 표준시(KST)
UTC -05:00: 미국 동부 표준시(EST)

2. 글로벌 서비스에서 타임존 적용 방법

글로벌 서비스를 구축할 때는 서버는 UTC 기준 시간을 유지하고, 클라이언트에서는 해당 사용자의 로컬 타임존에 맞게 시간을 변환하여 보여주는 방식으로 진행됩니다. 예를 들어, 서버에서 한국 시간으로 저장된 시간이라도 미국 사용자에게는 현지 시간으로 보여주는 것이 사용자 경험을 크게 향상시킬 수 있습니다.

클라이언트에서 사용자의 타임존 감지

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(userTimeZone); // 사용자 브라우저에서 감지된 타임존 출력

저에서 감지된 타임존 출력

이 코드를 통해 사용자가 속한 타임존 정보를 쉽게 가져올 수 있습니다.

3. 자바스크립트 날짜 처리 라이브러리 활용

3.1 Moment.js - Deprecated (더 이상 업데이트되지 않음)

Moment.js는 자바스크립트에서 시간과 날짜를 다루는 매우 유명한 라이브러리였습니다. 하지만 성능 이슈로 인해 더 이상 사용을 권장하지 않습니다.

3.2 Day.js - Moment.js의 대안

Day.js는 Moment.js와 비슷한 API를 제공하지만, 가벼운 용량과 빠른 성능을 자랑하는 대체 라이브러리입니다. 간단하게 시간 포맷을 변경하고, 타임존을 처리할 수 있습니다.

Day.js 설치:

npm install dayjs

Day.js 사용 예제:

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

// UTC 시간을 한국 시간으로 변환
const now = dayjs().utc().tz('Asia/Seoul');
console.log(now.format());  // 한국 현지 시간 출력

위 코드에서는 UTC 시간을 가져온 후, 사용자의 타임존(예: 'Asia/Seoul')으로 변환하여 출력합니다.

3.3 Luxon - 더 많은 기능 제공

Luxon은 Day.js보다 다양한 기능을 제공하는 날짜 라이브러리입니다. 타임존 처리 및 포맷팅에서 많은 유연성을 제공합니다.

Luxon 설치:

npm install luxon

Luxon 사용 예제:

import { DateTime } from 'luxon';

// 현재 시간을 UTC로 표현
const nowInUTC = DateTime.now().toUTC().toString();
console.log(nowInUTC);  // UTC 기준 현재 시간 출력

// UTC 시간을 사용자의 로컬 타임존으로 변환
const localTime = DateTime.now().setZone('America/New_York').toString();
console.log(localTime);  // 뉴욕 시간 출력

Luxon은 타임존 기반의 날짜 처리 및 변환에 매우 강력한 기능을 제공합니다.

4. 프론트엔드에서 타임존 적용하기

사용자의 로컬 타임존에 맞춰 시간을 보여주기 위해서는 클라이언트 측에서 로컬 타임존을 감지하고, 서버에서 받은 UTC 시간을 변환하는 것이 일반적입니다.

예시:

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const serverTime = '2024-08-07T12:00:00Z'; // 서버에서 받은 UTC 시간
const localTime = dayjs(serverTime).tz(Intl.DateTimeFormat().resolvedOptions().timeZone);
console.log(localTime.format('YYYY-MM-DD HH:mm:ss'));  // 사용자 로컬 시간 출력

이 코드는 서버에서 받은 UTC 시간을 사용자의 브라우저에서 감지된 로컬 시간으로 변환해줍니다. 이는 글로벌 웹 서비스에서 매우 유용하게 사용될 수 있는 방법입니다.

5. 결론

타임존과 날짜 처리는 글로벌 웹 서비스를 구축할 때 반드시 고려해야 할 요소입니다. 자바스크립트에서 제공하는 기본 Intl API와 Day.js, Luxon 같은 강력한 라이브러리를 활용하면 클라이언트에서 사용자의 로컬 타임존을 감지하고, 서버 시간을 로컬 시간으로 변환할 수 있습니다. 이를 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

728x90