자바스크립트 시계 만들기 | setInterval과 padStart로 디지털 시계 구현하기

자바스크립트로 디지털 시계를 만들어보자

이번 글에서는 자바스크립트로 실시간 시계를 만드는 방법을 배워볼 것이다.
setInterval, setTimeout, Date 객체, 그리고 문자열 포맷을 위한 padStart() 함수까지 활용하여 실전 프로젝트에 가까운 시계를 만들어보자.

 

 

1. 폴더 구조와 파일 분리하기

코드를 효율적으로 관리하기 위해 기능별로 파일을 분리하는 것이 좋다. 다음과 같은 구조로 프로젝트를 구성해보자.

 

/css
  style.css
/js
  greetings.js
  clock.js
index.html

 

• greetings.js: 인사 관련 기능 담당
• clock.js: 시계 기능 담당
• index.html: 두 JavaScript 파일을 불러오기

HTML에서는 다음과 같이 두 파일을 import 한다.

 

<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>

 

✅ 팁: 기능이 많은 경우 파일을 분리하면 유지보수와 가독성이 좋아진다.

 

 

2. HTML에 시계를 표시할 공간 만들기

HTML 파일에 시계가 들어갈 h2 태그를 작성해준다.

html

 

<h2 id="clock">00:00:00</h2>

 

이제 자바스크립트에서 이 태그를 선택해서 시간을 표시해볼 차례다.

 

3. JavaScript로 시계 기능 구현하기

 

const clock = document.querySelector("#clock");

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock(); // 페이지 로딩 시 한 번 실행
setInterval(getClock, 1000); // 매초 실행

 

✔️ 사용된 주요 개념:

• new Date(): 현재 날짜와 시간 정보를 얻음
• padStart(2, "0"): 한 자리 숫자도 항상 두 자리로 표시
• setInterval(fn, 1000): 1초마다 getClock 함수 실행

 

 

4. setInterval과 setTimeout 차이 이해하기

기능설명

 

setInterval()	일정한 간격으로 함수를 반복 실행
setTimeout()	일정 시간 후 한 번만 함수 실행

 

 

function sayHello() {
  console.log("Hello");
}

setInterval(sayHello, 2000); // 2초마다 실행
setTimeout(sayHello, 2000);  // 2초 후 한 번 실행

 

5. 실시간 시계 구현 마무리

브라우저를 새로고침하면 즉시 시간이 표시되고, 이후 매초마다 시간이 갱신된다.
초 단위까지 정확하게 포맷된 디지털 시계를 구현할 수 있었다.

 

🧩 마무리하며

이번 예제를 통해 자바스크립트의 시간 관련 기능을 실전에서 어떻게 사용할 수 있는지 익혔다.
작은 기능이라도 직접 구현해보면 JavaScript의 구조와 원리를 자연스럽게 익힐 수 있다.

💡 이 시계 기능은 포트폴리오, 개인 블로그, 학습 기록 등에 유용하게 활용할 수 있다.

 

 

 

chatGPT에게 프롬프트를 받아 imagine으로 이미지를 생성하였습니다.