실시간 데이터 업데이트¶

🎯 이 장에서 배우는 것¶

[ ] JavaScript가 웹페이지에서 하는 역할을 이해한다
[ ] AI에게 자동 새로고침 기능을 요청할 수 있다

⏱️ 예상 학습 시간: 약 15분

📚 핵심 개념¶

개념: JavaScript (웹페이지의 두뇌)¶

비유로 시작할게요!

HTML이 뼈대, CSS가 옷이라면, JavaScript는 두뇌예요.

flowchart LR A[HTML<br/>뼈대] --> B[CSS<br/>스타일] B --> C[JavaScript<br/>동작] style C fill:#fff3e0,stroke:#f57c00,stroke-width:2px

정확한 정의: JavaScript는 웹페이지에 동적 기능을 추가하는 프로그래밍 언어입니다.

예시로 확인: - 버튼 클릭 시 반응 - 5초마다 자동으로 데이터 갱신 ← 오늘 배울 것!

🔨 따라하기¶

Step 1: AI에게 자동 갱신 요청하기¶

AI에게 이렇게 말해보세요:

기존 대시보드에 5초마다 센서 데이터가 
자동으로 갱신되는 기능을 추가해줘.
페이지 새로고침 없이 값만 바뀌게 해줘.

Step 2: 받은 코드 확인하기¶

AI가 이런 형태의 코드를 줄 거예요:

// 5초(5000ms)마다 실행
setInterval(function() {
    // 센서 데이터 가져오기
    fetch('/api/sensor')
        .then(response => response.json())
        .then(data => {
            // 화면 업데이트
            document.getElementById('temp').innerText = data.temperature;
        });
}, 5000);

✅ 체크포인트: 숫자 5000이 5초를 의미해요 (밀리초 단위)

📝 전체 코드¶

<script>
setInterval(function() {
    fetch('/api/sensor')
        .then(res => res.json())
        .then(data => {
            document.getElementById('temp').innerText = data.temperature;
        });
}, 5000);
</script>

⚠️ 주의할 점¶

너무 빠른 갱신은 피하세요 - 1초 미만은 서버에 부담이 됩니다
API 주소 확인 - /api/sensor 부분을 실제 주소로 바꿔야 해요

✅ 점검하기¶

JavaScript는 웹페이지에서 어떤 역할을 하나요?

정답 확인

웹페이지에 동적 기능(클릭 반응, 자동 업데이트 등)을 추가합니다.

setInterval의 숫자 5000은 무슨 의미인가요?

정답 확인

5000밀리초 = 5초마다 코드를 반복 실행한다는 의미입니다.

🔗 다음 장 미리보기¶

다음 장: 프로젝트 완성 - 지금까지 만든 모든 기능을 합쳐 완성된 대시보드를 만들어봐요! 🎉