on
자바스크립트 입문[Javascript] - 자바스크립트로 투두리스트 만들기...
자바스크립트 입문[Javascript] - 자바스크립트로 투두리스트 만들기...
2021-07-29
자바스크립트 학습일지입니다.
해당 내용은 생활코딩님, 노마드코더님, 드림코딩by엘리님 강의를 들으며 학습한 뒤 정리한 내용입니다.
이번 포스팅에선 투두리스트(todo-list)를 만들어봅시다.
먼저, todo.js 라는 자바스크립트 파일을 생성한 뒤 HTML에 import 해줍시다.
todolist를 만들기위해 html에 form과 ul을 생성해줍니다.
li는 만들지않습니다. 이제 JS로 li를 만들어 html에 추가할 수 있습니다.
JS로 html에서 만든 Form과 Input과 List를 갖고옵시다.
const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list");
toDoForm.addEventListener("submit", handleToDoSubmit);
저번 포스팅에서 다룬 addEventListener 메서드를 이용해 사용자가 submit할 때, handleToDosubmit 함수를 실행시킵시다.
우리가 원하는 것은, submit이 user가 행했을 때, input 창이 초기화되고, 사용자가 입력한 값이 저장되어 todoList에 표현되는 것입니다.
function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDoInput.value; }
따라서 위와같이, submit의 Default값인 새로고침을 preventDefault로 막아주고, 사용자가 입력한 값을 저장할 수 있도록 새로운 변수를 지정합니다.
function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; console.log(newTodo); }
input창을 초기화 할 수 있도록 위와같이 todoInput.value 값을 none로 설정해주고, 초기화해도 newToDo 값이 잘 저장했는지 확인하기 위해 console.log를 통해 확인할 수 있습니다.
이제 newToDo 값이 HTML의 Ul의 요소로 포함될 수 있도록 구현해봅시다.
function handleToDoSubmit(event) { event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; paintToDo(newToDo); }
위와 같이 paintToDo(newToDo)를 통해 저장된 newToDo를 paintToDo로 보내줍니다.
function paintToDo(newToDo) { const li = document.createElement("li") ; const span = document.createElement("span"); li.appendChild(span); span.innerText = newToDo; toDoList.appendChild(li); }
위와 같이, paintToDo에서는 배경화면을 추가하는 저번 포스팅에서 배웠던 것처럼, creatElement를 통해
li와 span을 만들어줍시다. (나중에, 삭제하는 버튼을 만들기 위해 span에 text를 넣고 li안에 span을 넣어줍시다.)
그리고 appendChild를 통해 li 안에 span 이 들어갈 수 있도록하고, innerText를 통해 span에 newToDo의 내용이 들어갑니다.
마지막으로 appendChild를 통해 toDoList의 자식으로 지정한 li가 포함됩니다.
이를 통해 브라우저에서 input에 내용을 submit하면 todo-list가 구현됩니다.
옆의 HTML을 보면 ul 의 자식요소로 li 이, li의 자식요소로 span이 포함된 것을 확인할 수 있습니다.
이제 문제가 2개가 남았습니다.
하나는,todo-list를 삭제할 수 없다는 것이고, 둘째는 todo-list가 새로고침하면 없어진다는 것입니다.
첫번째 문제를 해결해봅시다.
function paintToDo(newToDo) { const li = document.createElement("li") ; const span = document.createElement("span"); span.innerText = newToDo; const button = document.createElement("button"); button.innerText = "❌"; button.addEventListener("click", deleteToDo); li.appendChild(span); li.appendChild(button); toDoList.appendChild(li); }
먼저 버튼을 만들어줍시다. 앞서 했던 것처럼 createElemennt를 통해 button을 만들어줍시다.
button에는 ❌을 innerText로 넣어줘 삭제버튼이라는 것을 직관적으로 알수있게 해줍시다.
또한, button도 li에 포함시켜줍시다.
button이 클릭되는 것을 감지하기위해 , addEventListener 메서드에 click을 감지하고 deleteToDo의 함수를 실행시켜줍시다.
function deleteToDo(event) { const deleteToDoList = event.target.parentElement; deleteToDoList.remove(); }
deleteToDo(event)에서 우리는 toDoList의 어떤 button이 삭제되는지를 알고, 그 button에 해당하는 li를 삭제시켜줘야합니다.
따라서 event.target.parentElement를 통해 어떤 li인지 deleteToDoList로 설정해줍니다.
event. target
event.target은 이벤트가 발생한 요소를 반환해줍니다.
const myTarget = event.target;
이라는 변수가 있을 때, myTarget은 현재 이벤트가 발생한 요소를 가리킵니다. 만약 이 요소의 색상을 변경하고 싶다면 myTarget.style.color = "red"; 와 같은 DOM 메소드를 사용해야 합니다.
parentElement or parentNode
target의 property중 parentElement를 사용해 어떤 li 가 선택되었는지 알 수 있습니다.
parentElement와 parentNode는 같은 기능을 하지만, 리턴값에서 약간 다르다.
parentElement는 부모 노드가 없을 때 null 을 리턴하지만,
parentNode는 Document node를 리턴한다.
```javascript document.body.parentNode; // Returns the element document.body.parentElement; // Returns the element document.documentElement.parentNode; // Returns the Document node document.documentElement.parentElement; // Returns null ( does not have a parent ELEMENT node) ```
따라서 deleteToDoList 는 유저가 삭제버튼을 누른 li 입니다.
.remove()를 통해 li를 삭제시킬 수 있습니다.
출처
from http://seungwoolee99.tistory.com/17 by ccl(A) rewrite - 2021-07-29 18:00:28