안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊
20일차에는 스타일을 바꾸는 classList, 21일차에는 요소를 만드는 createElement, 그리고 22일차에는 요소를 지우는 remove를 배웠습니다. 이 3일간의 여정은 바로 오늘을 위한 준비운동이었습니다.
오늘은 웹 개발 입문의 꽃이라 불리는 '인터랙티브 투두 리스트(To-Do List)'를 직접 만들어보겠습니다. 할 일을 추가하고, 다 한 일은 줄을 그어 표시하고, 필요 없으면 삭제하는 기능까지! 지금까지 배운 모든 DOM 조작 기술을 총동원해 봅시다.
1. 도입
단순히 화면에 글자를 띄우는 것을 넘어, 사용자가 직접 데이터를 추가하고 관리하는 애플리케이션을 만드는 것은 개발자로서 큰 즐거움입니다. 오늘 만들 투두 리스트는 작지만, 실제 웹 서비스가 작동하는 핵심 원리(CRUD: 생성, 읽기, 갱신, 삭제)가 모두 담겨 있습니다.
2. 구현 목표 및 로직 설계
우리가 만들 프로그램의 동작 순서는 다음과 같습니다.
- 입력: 사용자가 할 일을 입력하고 추가 버튼을 누릅니다.
- 생성 & 배치: 자바스크립트가 새로운 리스트(li)를 만들고 화면에 붙입니다.
- 완료 처리: 리스트를 클릭하면 classList를 이용해 스타일(취소선)을 바꿉니다.
- 삭제: 리스트 옆의 '삭제' 버튼을 누르면 해당 항목을 화면에서 지웁니다.
3. 예시 코드: 투두 리스트 완성하기
HTML로 뼈대를 잡고, CSS로 스타일을 정하고, JavaScript로 생명을 불어넣어 보겠습니다. 코드가 조금 길어 보일 수 있지만, 모두 우리가 배웠던 내용입니다!
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 스타일 */
li {
margin: 10px 0;
padding: 10px;
background-color: #f0f0f0;
display: flex; /* 글자와 버튼 가로 정렬 */
justify-content: space-between;
align-items: center;
}
/* 완료되었을 때 적용할 스타일 클래스 */
.completed {
text-decoration: line-through; /* 취소선 */
color: gray;
background-color: #e0e0e0;
}
/* 삭제 버튼 스타일 */
.del-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>나만의 할 일 목록</h2>
<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>
<ul id="todoList">
</ul>
<script>
const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("todoList");
// [기능 1] 할 일 추가하기
addBtn.addEventListener("click", function() {
const text = input.value;
// 빈 값 입력 방지
if (text === "") {
alert("내용을 입력해주세요!");
return;
}
// 1. 요소 생성 (li, span, button)
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
const newBtn = document.createElement("button");
// 2. 내용 채우기 & 클래스 설정
newSpan.textContent = text; // 할 일 텍스트
newBtn.textContent = "삭제";
newBtn.classList.add("del-btn"); // 삭제 버튼 스타일 적용
// [기능 2] 완료 처리 (텍스트 클릭 시)
newSpan.addEventListener("click", function() {
// 20일차: classList.toggle 활용
newLi.classList.toggle("completed");
});
// [기능 3] 삭제 처리 (삭제 버튼 클릭 시)
newBtn.addEventListener("click", function() {
// 22일차: remove 활용
newLi.remove();
});
// 3. 조립 및 배치 (span과 button을 li에 넣고, li를 ul에 넣음)
newLi.appendChild(newSpan);
newLi.appendChild(newBtn);
list.appendChild(newLi); // 21일차: appendChild 활용
// 4. 입력창 비우기
input.value = "";
});
</script>
</body>
</html>
4. 코드 설명: DOM 조작의 종합 예술
- 요소 생성의 세분화:
- 단순히 li에 글자만 넣는 것이 아니라, 텍스트를 담을 span과 삭제 기능을 담당할 button을 각각 만들었습니다. 이렇게 해야 텍스트를 눌렀을 때와 버튼을 눌렀을 때의 동작을 구분할 수 있습니다.
- 이벤트 리스너 안의 이벤트 리스너:
- addBtn을 클릭할 때마다 새로운 항목(newLi)이 생성됩니다.
- 이때 생성되는 항목 각각에 개별적인 클릭 이벤트(newSpan, newBtn)를 바로 붙여주었습니다. 덕분에 나중에 추가된 항목들도 완벽하게 동작합니다.
- 기능 연결:
- classList.toggle("completed"): 클릭 한 번으로 완료/미완료 상태를 쉽게 오갑니다.
- newLi.remove(): 삭제 버튼을 누르면 자신이 속한 줄(newLi) 전체를 깔끔하게 지웁니다.
5. 마무리
오늘은 23일차 포스팅으로, 지금까지 배운 DOM 조작 기술을 총동원하여 인터랙티브 투두 리스트를 완성했습니다. 입력값 가져오기, 요소 만들기, 스타일 바꾸기, 삭제하기가 하나의 프로그램 안에서 어떻게 어우러지는지 확인하셨나요? 이것이 바로 웹 프론트엔드 개발의 기초입니다.
그런데 한 가지 아쉬운 점이 있습니다. 열심히 할 일을 적어놓고 브라우저를 새로고침하면 어떻게 되나요? 네, 모든 데이터가 날아가 버립니다.
다음 24일차 포스팅에서는 새로고침을 해도 데이터가 사라지지 않고 저장되도록, 브라우저의 마법 주머니인 로컬 스토리지(LocalStorage)에 대해 알아보겠습니다. 드디어 데이터를 '영구 저장'하는 법을 배우게 됩니다!
오늘 완성한 코드로 여러분만의 리스트를 만들어보세요. 다음 시간에 만나요! 👋
'IT > Javascript' 카테고리의 다른 글
| JavaScript: 객체와 배열 저장하기! JSON.stringify와 JSON.parse 완벽 정리 📦 (0) | 2026.01.07 |
|---|---|
| JavaScript: 브라우저 저장소 LocalStorage 기초, 새로고침해도 데이터 유지하기 💾 (0) | 2025.12.31 |
| JavaScript: HTML 요소 삭제하기 (remove, removeChild) 기초 🗑️ (1) | 2025.12.21 |
| JavaScript: HTML 요소 동적 생성 (createElement, appendChild) 기초 🏗️ (0) | 2025.12.18 |
| JavaScript: 스타일 제어의 정석, classList (add, remove, toggle) 사용법 🎨 (0) | 2025.12.14 |