JavaScript를 활용하면 복잡한 라이브러리 없이도 몇 줄의 코드만으로 간단한 할 일(To-Do) 목록 애플리케이션을 만들 수 있습니다. 이 글에서는 텍스트 입력창에 할 일을 입력하고 버튼을 클릭하면 목록에 항목이 추가되는 기본적인 To-Do 리스트를 직접 구현해 보겠습니다.
예제 코드
다음은 JavaScript로 할 일 목록을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="text" placeholder="Please Enter your Task Here.." id="txtData">
<button onclick="todoList()">AddTaskToDo</button>
<ul id="to_do_list">
</ul>
</body>
<script>
function todoList() {
const myTask = document.getElementById('txtData');
const addToDoList = document.getElementById('to_do_list');
let originalValue = `<li> ${myTask.value} </li>`;
myTask.value = '';
addToDoList.insertAdjacentHTML('beforeend', originalValue);
}
</script>
</html>
프로그램 실행 방법
위 프로그램을 실행하려면 먼저 파일을 "index.html"과 같은 이름으로 저장합니다. 그다음 VSCode 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server"(Live Server로 열기) 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행하면 다음과 같은 초기 화면이 나타납니다.
이제 첫 번째 할 일을 입력창에 입력해 보겠습니다.
할 일을 입력한 후 AddTaskToDo 버튼을 클릭합니다.
실행 결과
버튼을 클릭하면 입력한 할 일이 목록에 다음과 같이 추가됩니다.
이어서 또 하나의 새로운 할 일을 입력해 보겠습니다.
버튼을 다시 클릭하면 아래와 같이 두 개의 할 일이 모두 목록에 표시되는 것을 확인할 수 있습니다.
코드 핵심 정리
이 예제의 동작 원리를 간단히 살펴보면 다음과 같습니다.
- getElementById(): 입력창(#txtData)과 목록(#to_do_list) 요소를 각각 가져옵니다.
- 템플릿 리터럴: 입력된 값을 <li> 태그로 감싸 새로운 목록 항목을 생성합니다.
- insertAdjacentHTML('beforeend', ...): 기존 항목들을 유지한 채 목록 맨 끝에 새 항목을 추가합니다.
- 입력값 초기화: 항목 추가 후 입력창을 비워 다음 작업을 편리하게 입력할 수 있도록 합니다.
이처럼 insertAdjacentHTML() 메서드를 활용하면 DOM 조작만으로도 손쉽게 동적인 목록 애플리케이션을 구축할 수 있습니다. 여기에 삭제 기능이나 완료 표시 등을 추가하면 더욱 완성도 높은 To-Do 앱으로 발전시킬 수 있습니다.