안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊
37일차 포스팅에서는 자바스크립트의 카멜레온 같은 키워드, this에 대해 알아보았습니다. 이제 자바스크립트의 필수 문법과 헷갈리기 쉬운 개념들은 모두 마스터하셨습니다.
앞으로 남은 3일 동안은 지금까지 배운 모든 지식을 총동원하여 종합 실습 프로젝트를 진행합니다. 우리가 만들 결과물은 브라우저의 새 탭을 열 때마다 나를 반겨주는 나만의 대시보드(크롬의 '모멘텀' 확장 프로그램 스타일)입니다. 오늘은 그 첫 번째 시간으로, 전체적인 화면 뼈대를 잡고 실시간 시계와 인사말 기능을 구현해 보겠습니다.
1. 도입
우리가 만들 대시보드는 단순히 예쁜 화면이 아닙니다. 24일차에 배운 LocalStorage로 내 이름을 기억하게 하고, 28일차와 29일차에 배운 setInterval과 padStart로 시계를 움직이게 할 것입니다.
그동안 조각조각 배웠던 기술들이 하나의 온전한 프로그램 안에서 어떻게 연결되고 상호작용하는지 직접 경험해 보시기 바랍니다.
2. 뼈대 만들기 (HTML & CSS)
화면의 중앙에 시계와 인사말이 큼직하게 들어가도록 구조를 잡고, CSS로 깔끔하게 가운데 정렬을 해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
/* 화면 전체를 꽉 채우고 가운데 정렬하는 CSS */
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #2c3e50; /* 세련된 어두운 배경 */
color: white;
font-family: 'Arial', sans-serif;
text-align: center;
}
#clock {
font-size: 100px;
margin: 0;
}
#greeting {
font-size: 40px;
margin-top: 20px;
}
.hidden {
display: none; /* 요소를 숨길 때 사용할 클래스 */
}
#login-form input {
padding: 10px;
font-size: 20px;
border: none;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="clock">00:00:00</h1>
<form id="login-form">
<input type="text" placeholder="이름이 무엇인가요?" required />
</form>
<h2 id="greeting" class="hidden"></h2>
<script src="app.js"></script>
</body>
</html>
3. 생명 불어넣기 (JavaScript)
이제 app.js 파일을 만들고, 시계 기능과 이름 저장 기능을 구현해 보겠습니다.
// app.js
// [1] 시계 기능 구현하기
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); // 1초마다 시간 업데이트
// [2] 인사말 및 LocalStorage 기능 구현하기
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
// 폼이 제출될 때 실행될 함수
function onLoginSubmit(event) {
// 폼 제출 시 페이지가 새로고침 되는 기본 동작을 막습니다.
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기
const username = loginInput.value;
// LocalStorage에 이름 저장 (24일차 복습)
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username); // 인사말 출력 함수 호출
}
// 화면에 인사말을 띄우는 함수
function paintGreetings(username) {
greeting.innerText = `안녕하세요, ${username}님!`;
greeting.classList.remove(HIDDEN_CLASSNAME); // 숨겨진 인사말 나타내기
}
// [3] 페이지가 처음 열렸을 때의 로직
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
// 저장된 이름이 없으면: 폼의 숨김 처리를 풀고 이벤트를 기다립니다.
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
// 저장된 이름이 있으면: 폼은 숨긴 채로 바로 인사말을 띄웁니다.
paintGreetings(savedUsername);
}
4. 코드 해설
화면 전환의 마법, HIDDEN_CLASSNAME: CSS에 display: none 기능을 하는 hidden이라는 클래스를 만들어 두었습니다. 자바스크립트의 classList.add와 remove를 사용하여 폼을 숨기고 인사말을 나타나게 하는 식으로 화면을 부드럽게 전환합니다.
event.preventDefault(): HTML의 form 태그는 엔터를 치거나 제출 버튼을 누르면 기본적으로 페이지를 새로고침하려는 성질이 있습니다. 우리가 만든 자바스크립트 데이터가 날아가지 않도록, 이 기본 동작을 막아주는 아주 중요한 코드입니다.
흐름 제어 (If / Else): 스크립트 맨 마지막 부분을 보면, 페이지가 로드될 때 가장 먼저 LocalStorage를 확인합니다. 값이 없으면 입력 폼을 보여주고, 값이 이미 있으면 입력 폼을 건너뛰고 바로 인사말을 그려줍니다. 덕분에 새로고침을 해도 사용자 경험이 유지됩니다.
5. 마무리
오늘은 38일차 포스팅으로, 그동안 배운 지식을 활용해 나만의 대시보드 UI를 만들고 실시간 시계와 이름 저장 기능을 완벽하게 붙여보았습니다.
단순한 예제를 넘어, 실제로 작동하는 온전한 프로그램의 틀이 잡히기 시작했습니다. 하지만 아직 대시보드라고 하기엔 화면이 조금 허전하죠?
내일 39일차 포스팅에서는 이 대시보드 위에 32일차에 배웠던 Fetch API를 가져와 현재 내 위치의 날씨를 우측 상단에 표시하고, 26일차에 만들었던 영구 저장 투두 리스트를 화면 하단에 결합해 보겠습니다. 진정한 대시보드의 완성판을 기대해 주세요!
오늘도 실습하시느라 정말 고생 많으셨습니다. 다음 시간에 만나요! 👋
'IT > Javascript' 카테고리의 다른 글
| JavaScript: 40일간의 여정 마무리 및 프론트엔드 개발자 다음 로드맵 🚀 (0) | 2026.05.10 |
|---|---|
| JavaScript: 나만의 대시보드 만들기 (2) - 날씨 정보와 투두 리스트 결합 🌤️📝 (0) | 2026.05.05 |
| JavaScript: 자바스크립트 최대의 난제? 'this' 키워드 기초 완벽 가이드 🧭 (0) | 2026.04.30 |
| JavaScript: 복잡한 코드 정리의 마법! 모듈(Import / Export) 기초 알아보기 📁 (0) | 2026.04.25 |
| JavaScript: 점 세 개의 마법! 전개 연산자(Spread)와 나머지 매개변수(Rest) (0) | 2026.04.21 |