JavaScript 학습의 기본기를 다지기 위해 js-counter-basics 실습을 진행하였습니다.
이번 글에서는 HTML, CSS, JavaScript의 연동을 통해 간단한 카운터 기능을 구현한 과정과 배운 점을 공유하고자 합니다.
실습 개요
- 폴더 이름 : js-counter-basics
- GitHub Link : https://github.com/InJungPark/js-counter-basic
이번 실습은 JavaScript의 기본 문법과 HTML, CSS와의 연동에 중점을 두었습니다. 카운터를 구현하는 과정에서 JavaScript의 이벤트 처리, DOM 조작 방법, 그리고 스타일링의 중요성을 이해하는 데 도움이 되었습니다.
1. 무엇을 만들었나?
- 버튼(Decrease, Reset, Increase)을 클릭할 때마다 숫자가 증감하거나 리셋되는 기능
- 숫자가 음수/양수/0인지에 따라 텍스트 색상을 다르게 보여주는 기능
이 기능들은 자바스크립트 DOM 조작과 이벤트 바인딩을 연습하기에 매우 좋은 예제입니다.
2. HTML구조(index.html)
먼저, 아래와 같은 간단한 HTML 구조가 필요합니다.
- id="value"를 가진 요소에 현재 카운트 값을 표시
- .btn 클래스를 가진 버튼 3개 (각각 id="decrease", id="reset", id="increase")
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>JS Counter</title>
</head>
<body>
<!-- 숫자를 표시할 영역 -->
<span id="value">0</span>
<!-- 숫자를 조작할 버튼들 -->
<button id="decrease" class="btn">Decrease</button>
<button id="reset" class="btn">Reset</button>
<button id="increase" class="btn">Increase</button>
<!-- JS 파일 연결 -->
<script src="script.js"></script>
</body>
</html>
HTML에서는 크게 어려운 부분이 없으며, #value로 카운트 표시, 3개의 버튼으로 카운트 조작을 수행합니다.
2. CSS(style.css)
아래는 예시 CSS입니다. 자유롭게 스타일링하시면 됩니다.
body {
font-family: sans-serif;
text-align: center;
margin-top: 50px;
}
#value {
display: block;
font-size: 3rem;
margin-bottom: 20px;
}
.btn {
margin: 0 10px;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
}
- 중앙 정렬, 글자 크기, 버튼 스타일 정도만 지정해도 충분히 깔끔하게 만들 수 있습니다.
3. JavaScrpit(app.js)
이제 app.js 파일에 핵심 로직을 작성합니다.
버튼을 클릭할 때마다 숫자를 증감/리셋하고, 그 값에 따라 색상을 바꾸도록 구현해 보겠습니다.
let count = 0;
const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");
// 필요한 경우 콘솔에서 제대로 선택됐는지 확인
// console.log("btns 확인 : ", btns);
btns.forEach((button) => {
button.addEventListener("click", (event) => {
// 클릭된 버튼의 id 확인
// console.log("event 확인 : ", event);
let btnElementID = event.currentTarget.id;
if (btnElementID === "decrease") {
count--;
} else if (btnElementID === "reset") {
count = 0;
} else {
count++;
}
// count 값에 따라 텍스트 색상 변화
if (count > 0) {
value.style.color = "blue";
} else if (count < 0) {
value.style.color = "red";
} else {
value.style.color = "black";
}
// 화면에 카운트 값 표시
value.textContent = count;
});
});
코드 해석
- 변수 count : 현재 카운트 상태를 담는 전역 변수.
- DOM 선택
- #value : 카운트가 표시될
- .btn : 세 개의 버튼(Decrease, Reset, Increase)
- 이벤트 바인딩 :
- forEach로 각 버튼에 click 이벤트를 등록.
- 클릭된 버튼의 id에 따라 count를 감소, 초기화, 증가합니다.
- 색상 변경 :
- count가 0보다 큰지/작은지/같은지에 따라 각각 'blue', 'red', 'black'을 적용.
- DOM 업데이트 :
- 마지막에 value.textContent = count로 DOM에 반영.
주요 기능 및 설명
1. 카운터 증가/감소 기능 구현
버튼(Decrease, Reset, Increase)을 클릭할 때마다 카운트 값이 증가하거나 감소하도록 이벤트를 연결했습니다.
- count 변수를 통해 숫자를 관리하고, 버튼 click 이벤트가 발생하면 해당 로직에 따라 count를 증감 또는 리셋합니다.
- JavaScript 이벤트 처리와 DOM 조작 방식을 간단히 익히기 좋았습니다.
2. 실시간 화면 업데이트
값이 변경될 때마다 textContent를 통해 즉시 화면에 반영했습니다.
- 사용자가 버튼을 누르는 즉시 숫자가 변하고, 조건에 따라 색상이 바뀌는 동적 웹 페이지 동작을 체험할 수 있었습니다.
- 이 과정을 통해 DOM 갱신 원리를 자연스럽게 학습했습니다.
구현 과정에서 어려웠던 점
1. 이벤트 리스너 이해
addEventListener로 버튼마다 click 이벤트를 연결하는 방식 자체는 알고 있었지만,
- 어떤 버튼이 클릭되었는지 식별하기 위해 event.currentTarget.id를 사용하고,
- 조건문(if-else)으로 카운트 로직을 분기하는 과정에서 초기에 헷갈리는 부분이 있었습니다.
하지만 반복 연습을 통해 훨씬 간결하고 직관적으로 코드를 작성할 수 있었습니다.
2. DOM 조작과 변수 사용
HTML 요소를 자바스크립트로 선택(document.querySelector 등)하고, 그 내용을 .textContent로 바꿔주는 과정이 처음에는 낯설었습니다.
- count 변수를 통해 숫자 상태를 관리하고, 이를 HTML 요소에 반영하는 흐름을 명확하게 이해하게 되었습니다.
- 특히 요소 선택(getElementById, querySelector)과 변수 업데이트(count++ 등)의 중요성을 실감했습니다.
실습을 통해 배운 점
1. JavaScript 기본 문법
- 변수 선언, 조건문, 함수, 이벤트 처리 등 기초를 실전 예제로 복습할 수 있었습니다.
2. HTML, CSS, JavaScript의 연동 방식
- HTML로 구조를 만들고, CSS로 스타일을 입힌 뒤, JavaScript로 동작을 추가하는 전형적인 웹 개발 흐름을 다시금 정리하게 되었습니다.
- 각각의 역할이 다르며, 이 조합으로 인터랙티브한 페이지를 만들 수 있다는 점이 인상 깊었습니다.
3. 사용자 인터페이스 고려
- 버튼 클릭 시 즉시 숫자가 변하고 색상도 달라지므로, 사용자에게 직관적이고 즉각적인 피드백을 제공합니다.
- 비록 간단한 예제지만, “빠른 피드백”이 사용자 경험에 얼마나 중요한지 깨달았습니다.
확장 아이디어
1. 로컬 스토리지 연동
- 새로고침 후에도 카운트 값이 유지되도록 localStorage에 저장/불러오기 기능을 구현해볼 수 있습니다.
2. 버튼 애니메이션
- 클릭 시 버튼에 가벼운 애니메이션(색상 변화나 스케일 변화 등)을 추가해 UX를 개선할 수 있습니다.
3. 사용자 입력
- 매 클릭마다 1씩 증가/감소하는 대신, 사용자가 설정한 값을 한 번에 증감하는 옵션을 추가해볼 수도 있습니다.
마무리 및 향후 학습 계획
이번 실습을 통해 자바스크립트로 DOM을 제어하고 이벤트 리스너를 활용하는 기본기를 확실히 다질 수 있었습니다.
이 다음에는 특정 숫자에 도달했을 때 애니메이션이나 배경색 변화 등 보다 다양한 기능을 붙여보면서, 사용자 경험을 강화하는 방법을 더 탐구할 계획입니다.
짧은 예제지만, 앞으로 웹 애플리케이션을 만들 때 필요한 사고방식(상태 관리, 화면 업데이트, 이벤트 처리) 등을 배울 수 있어 매우 유익했습니다.
궁금한 점이나 더 좋은 아이디어가 있다면 댓글로 남겨주세요!
