new-js-clock을 소개합니다

open-sourcejavascripttypescriptrelease

15년도 더 전에 JS-Clock이라는 작은 jQuery 플러그인을 공개했습니다. DOM 요소 안에서 시계가 째깍거리도록 렌더링하는 단순한 위젯이었습니다. 유용하고 간결하며, 그 시대의 산물이었지요. jQuery에 의존했고, 다중 인스턴스 지원에 몇 가지 문제가 있었으며, 첫 번째 릴리스 이후 제대로 된 업데이트는 한 번도 이루어지지 않았습니다.

오늘, 그것이 바뀝니다. new-js-clock 1.0.0을 출시합니다. 원본의 정신을 그대로 유지하면서 모든 한계를 뒤로하고 TypeScript로 처음부터 다시 작성한 버전입니다. 데모 페이지에서 직접 확인해 보세요.

1.0.0의 새로운 기능

이번 릴리스에 포함된 모든 것:

  • 🔒 TypeScript — 전체 코드베이스에 걸친 포괄적인 인터페이스로 완전한 타입 안전성 확보.
  • 🌐 E2E + 유닛 테스트 스위트 — 결정론적 Jest 커버리지와 실제 브라우저에서의 Selenium E2E 테스트, 백그라운드 탭 동작에 대한 확장 검증 포함.
  • 📦 제로 의존성 — 순수 바닐라 JavaScript. jQuery 불필요.
  • 🐛 버그 수정 — 다중 인스턴스 지원이 이제 올바르게 작동합니다. 이것이 0.8 버전의 주요 문제였습니다.
  • ⚡ 모던 API — 생성된 각 시계에 적절한 인스턴스 메서드를 갖춘 깔끔하고 직관적인 API.
  • 🧪 완전 테스트 완료 — 162개의 결정론적 Jest 테스트, 줄 커버리지 99.74%, 구문 커버리지 99.02%, 함수 커버리지 100%, 브랜치 커버리지 98.32%.
  • 🐳 도커화된 E2E 그리드 — pnpm run e2e:docker로 로컬 및 CI 환경에서 헤드리스 Chrome, Firefox, Edge를 실행하는 Selenium Grid.
  • 📱 ES 모듈 — 트리 쉐이킹 지원을 갖춘 ES Module 임포트, CommonJS 및 IIFE 번들과 함께 제공.
  • 🌍 DST 인식 타임존 — 서머타임 자동 처리를 포함한 IANA 타임존 지원.
  • ⏱️ 스톱워치 모드 — 00:00:00부터 올라가는 새로운 스톱워치.
  • 🏁 랩 & 스플릿 타임 — 스톱워치 모드에서 랩 타임(델타)과 누적 시간(스플릿) 기록.
  • 📊 최고/최악 랩 — 세션에서 가장 빠른 랩과 가장 느린 랩을 찾아주는 내장 헬퍼 함수.
  • 🎯 고해상도 타이밍 — performance.now()로 측정하는 밀리초 이하 정밀도의 랩 델타.

설치

npm install new-js-clock
# 또는
pnpm add new-js-clock

브라우저에서 직접 사용할 수 있는 CDN 버전도 제공됩니다. unpkg 및 jsDelivr 링크는 README를 참고하세요.

왜 이렇게 오래 걸렸을까요?

솔직히 말하면? 인생입니다. 원래의 JS-Clock은 고인이 된 친구 Gustavo Beltrão(당시 PHP 고수로, 한 번 이상 함께 일할 수 있는 특권을 누렸습니다)의 요청으로 작성되었습니다. 기업 내부 대시보드와 다양한 시간대에서 방문하는 참가자를 위한 단일 페이지 이벤트 웹사이트에 사용하기 위해서였죠. 충분히 제 역할을 해주어서 굳이 업데이트해야 할 필요성을 느끼지 못했습니다. 하지만 jQuery는 이미 현대 프로젝트에서 사라진 지 오래고, TypeScript는 라이브러리 개발의 표준이 되었으며, 다중 인스턴스 지원의 버그는 늘 저를 괴롭혔습니다. 드디어 제대로 고치기로 마음먹었을 때, 제대로 만들어야겠다는 생각이 들었습니다. 타입, 테스트, 현대적인 모듈 시스템, 그리고 2026년에도 진정으로 유용할 수 있는 충분한 기능을 갖추어서요. 다음 상업 프로젝트에서도 이것을 사용할 계획입니다.

늦더라도 안 하는 것보다는 낫습니다.

오직 예수 그리스도께만 영광을!