안녕하세요.
저번 글에서는 todo list를 만들게된 동기와 만들고나서 느낀점을 간단하게 적었습니다. 이제 본격적으로 제가 어떤 과정으로 todo list를 만들었는지 소개해 보겠습니다.
HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="title">
<h2>Todo List</h2>
</div>
<div class="input-box">
<input id="input" type="text" placeholder="할 일을 입력하세요."><button id="add">+</button>
</div>
<div class="list">
<ul id="to-do-list"></ul>
</div>
<script src="./index.js"></script>
</body>
</html>Todo List
+
할 일 추가 기능 만들기
1. 요구사항 분석 및 도출 단계
- input 태그에 입력값을 넣으면 새로운 할 일이 추가되어야 한다.
- button 태그를 클릭하거나 키보드 enter를 누르면 할 일이 추가되어야 한다.
2. 설계 단계
- input 태그에 addTodo라는 할 일 추가 함수 만들기
- DOM선택자로 입력 대상 선택하기
- 할 일을 입력하게 되면 li 태그 생성하기
- li 태그 클래스명 todo 로 추가하기
- li 텍스트를 입력값으로 할당하기
- ul 태그 마지막 자식 노드로 li 태그 추가하기
- 이벤트 핸들러 등록
- 키보드 이벤트 등록하기
1) addTodoByEnter 라는 함수를 만들고 키보드 enter를 누르게 되면 addTodo 함수를 호출하도록 한다.
2) input 태그에 키보드 이벤트 핸들러 등록하기 - 마우스 이벤트 핸들러 등록하기
1) button 태그에 마우스 이벤트 핸들러 등록하기
- 키보드 이벤트 등록하기
3. 구현 단계
const addBtn = document.querySelector('#add');
const ul = document.querySelector('#to-do-list');
const input = document.querySelector('#input');function addTodo() {
const newTodo = input.value;
if (newTodo) {
const li = document.createElement('li');
li.classList.add('todo');
li.innerHTML = `<input value='${newTodo}' class="todo-input" readonly="true"></input>`;
ul.append(li);
}function addTodoByEnter(e) {
if (e.key === 'Enter' && !e.shiftKey) {
addTodo();
e.preventDefault();
}
}input.addEventListener('keypress', addTodoByEnter);addBtn.addEventListener('click', addTodo);회고
-
느낀점
DOM트리 구조 파악의 중요성 및 선택자로 무엇을 선택할지에 대한 고민하는 단계가 꼭 필요하다고 생각합니다. 무작정 코드를 만들려고 접근하다보면 아직 익숙하지 않기 때문에 초보자의 경우 방향성을 잃게 되어 원하는 기능을 구현하지 못하게 됩니다.단계별로 정리하는 것이 아주 중요한 과정이라고 생각합니다. -
배운점
- DOM트리 구조 파악
- 선택자 선택하는 방법
- 함수 만들기
- 이벤트 핸들러 등록하기
- 이벤트 객체 활용하기
