Javascript로 현재 시간 실시간 표시

Javascript로 현재 시간 실시간 표시하는 방법에 대해서 글을 써보려고 합니다. 사실 너무 쉬운 내용이고, 인터넷에도 관련 예제가 너무 많아서 매력적인 주제는 아닙니다. 그래도 아직 Javascript 실시간 시계를 직접 구현해 본 경험이 없어서 직접 한 번 만들어 보고, 그 과정과 후기를 남겨보겠습니다.

사실 웹페이지에서 굳이 시간을 볼 필요는 없기 때문에 실무에서는 잘 보이지 않지만, 그래도 가끔 보이긴 합니다. 꼭 실용성을 생각하지 않더라도 화면이 너무 휑하다면 디자인적인 측면에서 Javascript 실시간 시계를 넣어주는 것도 괜찮은 것 같기도 합니다. 인터넷에서 찾아서 군더더기만 제거한 예제이긴 하지만 그래도 직접 한 번 해보니 생각보다도 훨씬 코드가 간단했습니다.

완성된 Javascript 실시간 시계 미리보기

시간을 불러오는 중…

새로고침을 하지 않아도 자동으로 시간이 업데이트 되고 있습니다.

1단계: HTML 구조 만들기

먼저 시간을 표시할 HTML 요소를 준비해야 합니다. 간단한 구조로 시작해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실시간 시계</title>
    <style>
        .clock {
            font-size: 24px;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="clock" class="clock">시간을 불러오는 중...</div>
    <script>
        /* Javascript 소스코드 들어갈 부분 */
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실시간 시계</title>
    <style>
        .clock {
            font-size: 24px;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="clock" class="clock">시간을 불러오는 중...</div>
    <script>
        /* Javascript 소스코드 들어갈 부분 */
    </script>
</body>
</html>

여기서 중요한 부분은 id="clock"인 div 요소입니다. JavaScript에서 이 요소를 찾아서 시간 정보를 업데이트할 예정입니다. CSS는 최소한으로만 적용해서 글자 크기와 중앙 정렬만 설정했습니다.

2단계: JavaScript로 현재 시간 가져오기

JavaScript의 Date 객체를 사용하면 사용자의 현재 시간을 쉽게 가져올 수 있습니다. 기본적인 시간 표시 함수를 만들어보겠습니다.

function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleString();
    
    document.getElementById('clock').textContent = timeString;
}

function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleString();
    
    document.getElementById('clock').textContent = timeString;
}

이 함수는 새로운 Date 객체를 생성해서 현재 시간을 가져온 다음, toLocaleString 메서드를 사용해서 사용자의 브라우저 설정에 맞는 형식으로 포맷팅합니다. 별도의 옵션을 지정하지 않으면 사용자의 시스템 설정에 따라 자동으로 적절한 형식과 시간대로 표시됩니다.

3단계: 실시간 업데이트 구현하기

시간을 한 번만 표시하는 것이 아니라 계속해서 업데이트하려면 setInterval 함수를 사용해야 합니다. 이 함수는 지정된 시간 간격마다 특정 함수를 반복 실행합니다.

function startClock() {
    updateTime(); // 페이지 로드 시 즉시 시간 표시
    setInterval(updateTime, 1000); // 1초마다 시간 업데이트
}

// 페이지가 완전히 로드된 후 시계 시작
window.addEventListener('load', startClock);

function startClock() {
    updateTime(); // 페이지 로드 시 즉시 시간 표시
    setInterval(updateTime, 1000); // 1초마다 시간 업데이트
}

// 페이지가 완전히 로드된 후 시계 시작
window.addEventListener('load', startClock);

setInterval(updateTime, 1000)은 1000밀리초(1초)마다 updateTime 함수를 실행합니다. 페이지가 로드되자마자 시간을 표시하기 위해 updateTime()을 한 번 먼저 호출하는 것도 중요한 포인트입니다.