🤖 ChatGPT와 함께 공부하는 JavaScript 5일차 - 간단한 디지털 시계 만들기 미션

데일리 미션으로 시작했는데 이 망할 챗GPT가 며칠내내 에러가 심해져 데일리 코드를 받지 못하는 이슈가 생겼다..!

그동안의 기록들을 지우고 정리하는 과정을 거치니 조금 나아지긴했지만 데일리 코드를 꾸준히 받지 못할 수도 있을 것 같다..

아무튼 그래서 오늘의 미션은 간단한 디지털 시계 만들기 미션을 주었다.

🚩 내가 작성한 코드

const time = docuument.getElementById("time");

let timetId;
timetId = setInterval(function(){
    const p = document.getElementById("time");
    const now = new Date();
    let year = now.getFullYear()
    let month = now.getMonth() + 1
    let day = now.getDate()
    let hour = now.getHours()
    let min = now.getMinutes()
    let sec = now.getSeconds()

    p.textContent = `${year}/${month}/${day} ${hour}:${min}:${sec}`
},1000);

📍 발생한 문제

• docuument → document 오타로 인해 실행이 되지 않았다.
• 이미 변수 time으로 요소를 선택했는데, 안쪽에서 또 p = document.getElementById("time")로 중복 선택하고 있음.

🔧 코드 수정 후 제대로 실행됨

const time = document.getElementById("time");

setInterval(function(){
    const now = new Date();
    let year = now.getFullYear()
    let month = now.getMonth() + 1
    let day = now.getDate()
    let hour = now.getHours()
    let min = now.getMinutes()
    let sec = now.getSeconds()

    time.textContent = `${year}/${month}/${day} ${hour}:${min}:${sec}`
},1000);

📖 코드 한 줄씩 분석

• const time = document.getElementById("time"): HTML에서 시간 표시할 요소를 찾아서 저장함.
• setInterval(...): 1초마다 안에 있는 코드를 반복해서 실행함.
• new Date(): 지금 이 순간의 시간을 가져오는 내장 기능.
• .getFullYear(), .getMonth(), .getDate() 등: 각각 연도, 월, 날짜, 시, 분, 초를 뽑아내는 함수.
• textContent = ...: 화면에 글자를 넣는 코드. 텍스트를 바꿔줌.

💡 궁금했던 부분 정리해서 이해하기

1. let timetId; 왜 써야할까?

→ 나중에 멈추고 싶을 때를 대비해 변수에 기억시켜 두는 것. (지금은 안 써도 됨!)

2. setInterval() 뭐지..?

→ 일정 시간마다 반복하는 함수. 시계처럼 1초마다 반복 실행할 때 딱..!

📖 문제 원인 분석 및 주의점

• document 오타 하나로 코드가 전혀 작동하지 않을 수 있다. 철자 하나까지 정확히 써야 함.
• 이미 선택한 요소는 재사용할 수 있다. 중복 선택은 피하고 변수명을 활용하자.
• 실시간 시계를 만들 땐 setInterval과 Date를 함께 사용하는 패턴을 기억하자.

📌 의사코드 정리

1. 시간 표시할 HTML 요소를 찾는다.
2. 1초마다 다음을 반복한다:
   a. 현재 시간을 가져온다.
   b. 연도, 월, 일, 시, 분, 초를 꺼낸다.
   c. 가져온 값을 문자열로 만들어 요소에 출력한다.

✅ 배운점

 

• 오타가 있으면 코드가 절대 실행되지 않는다. 에러 메시지를 꼭 읽자.
• setInterval()은 반복 실행에 유용하다.
• Date()와 .get~() 함수들로 시간 정보 가져오는 방법 익히기.
• querySelector나 getElementById 모두 결과는 HTML 요소이므로 .textContent로 출력 가능하다.