나는 안 쓰레기 같은 Timestamp Converter를 만들었어요 (무료에요)
Source: Dev.to
API 로그를 디버깅할 때는 종종 1706745600 같은 원시 값을 바라보며 “이게 무슨 날짜지?” 라고 생각하게 됩니다.
“unix timestamp converter”를 구글에 빠르게 검색하면 보통 광고가 가득하고, “Unix timestamp (seconds)” 를 선택하는 드롭다운이 있는 페이지, 더 많은 광고, 그리고 회원가입 안내가 나타납니다.
나는 그게 지긋지긋했습니다. 주말 동안 TimeStampConverter.net 를 만들었습니다 – 바로 작동하는 타임스탬프 변환기입니다.
무엇이 다를까요?
자동 감지
아무것이나 붙여넣기만 하면 도구가 형식을 자동으로 파악합니다:
| 형식 | 예시 |
|---|---|
| Unix 타임스탬프 (초) | 1706745600 |
| Unix 타임스탬프 (밀리초) | 1706745600000 |
| ISO 8601 | 2024-01-31T12:00:00Z |
| RFC 2822 | Thu, 31 Jan 2024 12:00:00 GMT |
| 사람이 읽을 수 있는 형식 | January 31, 2024 |
드롭다운도, 추가 클릭도 없습니다.
한 번 붙여넣기, 일곱 가지 형식
한 번 붙여넣으면 모든 형식이 한 번에 표시됩니다:
Unix (seconds): 1706745600
Unix (ms): 1706745600000
ISO 8601 (UTC): 2024-01-31T17:00:00.000Z
ISO 8601 (Local): 2024-01-31T12:00:00.000-05:00
RFC 2822: Wed, 31 Jan 2024 12:00:00 -0500
Human: January 31, 2024 12:00:00 PM
Relative: 2 hours ago각 라인마다 복사 버튼이 있어 빠르게 붙여넣을 수 있습니다.
400개 이상의 시간대
검색 가능한 시간대 드롭다운으로 원하는 지역(예: “Tokyo”)을 바로 찾을 수 있습니다.
내장된 날짜 연산
- 연, 월, 일, 시, 분, 초 더하기/빼기
- 두 타임스탬프 사이의 기간 계산
- 일광 절약 시간제와 윤년을 정확히 처리
대량 변환
여러 타임스탬프를 한 줄에 하나씩 붙여넣으면 한 번에 모두 변환됩니다 – 로그 분석에 최적입니다.
URL 공유
특정 타임스탬프를 링크로 공유할 수 있습니다. 예: https://timestampconverter.net?ts=1706745600.
기본 다크 모드
많은 사람들이 새벽 2시에 디버깅하기 때문에 기본값이 다크 모드입니다.
추적 없음
분석도, 광고도, 회원가입도, 쿠키도 없습니다. 모든 작업이 클라이언트 측에서 실행됩니다.
기술 스택
나는 극도로 간단하게 유지했다:
{
"dependencies": {
"dayjs": "^1.11.10"
}
}- Vanilla JavaScript – React, Vue, 빌드 단계 없이
- day.js – 가벼운 날짜 라이브러리 (~2 KB)
- Cloudflare Pages – 전 세계 CDN을 갖춘 무료 호스팅
전체 번들 크기: ~50 KB
왜 Vanilla JS인가?
- 상태 관리가 필요 없음
- 라우팅이 필요 없음
- 가상 DOM이 필요 없음
- 빠른 로딩 – 비슷한 React 앱은 >200 KB이지만, 이 앱은 전 세계에서 100 ms 이하로 로드됩니다.
자동 감지 작동 방식
핵심은 간단한 정규식 기반 탐지기입니다:
function detectTimestampFormat(input) {
const trimmed = input.trim();
// Unix timestamp (10 digits = seconds)
if (/^\d{10}$/.test(trimmed)) {
return { type: 'unix-seconds', value: parseInt(trimmed) };
}
// Unix timestamp (13 digits = milliseconds)
if (/^\d{13}$/.test(trimmed)) {
return { type: 'unix-ms', value: parseInt(trimmed) };
}
// ISO 8601 (starts with YYYY‑MM‑DDT)
if (/^\d{4}-\d{2}-\d{2}T/.test(trimmed)) {
return { type: 'iso8601', value: trimmed };
}
// RFC 2822 (starts with day name)
if (/^[A-Za-z]{3},\s\d{2}\s[A-Za-z]{3}\s\d{4}/.test(trimmed)) {
return { type: 'rfc2822', value: trimmed };
}
// Generic date parsing with dayjs
const parsed = dayjs(trimmed);
if (parsed.isValid()) {
return { type: 'generic', value: trimmed };
}
return { type: 'invalid', value: null };
}감지되면 변환은 간단합니다:
function convertTimestamp(detected) {
let date;
switch (detected.type) {
case 'unix-seconds':
date = dayjs.unix(detected.value);
break;
case 'unix-ms':
date = dayjs(detected.value);
break;
default:
date = dayjs(detected.value);
}
return {
unixSeconds: date.unix(),
unixMs: date.valueOf(),
iso8601UTC: date.utc().format(),
iso8601Local: date.format(),
rfc2822: date.format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
humanReadable: date.format('MMMM D, YYYY h:mm:ss A'),
relative: date.fromNow()
};
}Cloudflare Pages 배포
배포는 아주 쉽습니다:
# 1. Build (vanilla JS라 빌드할 것이 없습니다!)
# 2. Deploy
wrangler pages deploy . --project-name=timestamp
# Done. Live globally in ~30 seconds.Cloudflare가 제공하는 기능:
- 무료 티어에서 무제한 대역폭
- 300개 이상의 엣지 로케이션
- 자동 HTTPS
- 모든 git 푸시마다 프리뷰 배포
- 내장형 분석
모두 $0/month 에 제공됩니다.
배운 점
- 때때로 바닐라 JS가 올바른 선택이다 – 작은 유틸리티가 성능 면에서 프레임워크를 능가할 수 있다.
- 자동 감지는 마법 같은 UX – 사용자는 “그냥 작동하는” 도구를 좋아한다.
- 다크 모드는 기본이어야 한다 – 개발 도구는 밤에 자주 사용된다.
- Cloudflare Pages는 과소평가된다 – 무료이며, 무제한이고, 전 세계 사용자에게 빠르다.
- 자신의 문제를 해결하라 – 필요로 하는 것을 만들면 그 유용성이 검증된다.
다음은?
잠재적 기능:
- 브라우저 확장 프로그램 (우클릭 → 변환)
- 프로그래밍 사용을 위한 API 엔드포인트
- 고급 날짜‑수학 (예: 영업일 계산)
- 대량 결과를 위한 내보내기 옵션 (CSV, JSON)
도움을 원하시면 자유롭게 이슈를 열거나 PR을 제출하세요!
자동 접근
- 크론 표현식 검증기
- ISO 주 번호 계산기
솔직히, 이 도구가 이미 제가 필요로 하는 것을 다 해주니 그대로 둘 수도 있습니다.
직접 사용해 보기
TimeStampConverter.net – 회원가입 없이, 추적 없이, 불필요한 것 없이. 타임스탬프만 제공합니다. 유용하다고 생각되면 북마크하세요.
FAQ
Q: 이것은 오픈 소스인가요?
A: 아직은 아니지만, 고려 중입니다. 관심이 있다면 GitHub에 올릴 예정입니다.
Q: 어떻게 수익을 창출하나요?
A: 저는 수익을 창출하지 않습니다. 운영 비용은 $0/월입니다. 언젠가 “커피 한 잔 사 주세요” 버튼을 추가할 수도 있습니다.
Q: 내 앱/API에 이걸 사용할 수 있나요?
A: 모든 작업이 클라이언트‑사이드에서 이루어지므로 가능합니다. 서버‑사이드 API 엔드포인트가 필요하면 알려 주세요 – 만들 수도 있습니다.
Q: 개인정보는 어떻게 보호되나요?
A: 모든 변환은 브라우저 내에서 이루어집니다. 제가 변환 내용을 볼 수 없습니다. Cloudflare는 기본 CDN 메트릭(지역별 요청 수, 대역폭)만 로그에 남기며 사용자 데이터는 기록하지 않습니다.
Q: 기능을 추가해 줄 수 있나요?
A: 가능할 수도 있습니다! 아래에 댓글을 남기거나 사이트를 통해 이메일을 보내 주세요.