천진난만 코딩 스토리

14. Deleteing To Dos (part 1) 본문

노마드코더/바닐라 JS로 크롬 앱 만들기

14. Deleteing To Dos (part 1)

Wisdom_1104 2023. 1. 16. 21:38

- HTML -

변경사항 없음.

 

 

 

- JS -

console.log(li.id); 를 하여

X버튼을 누르는 li의 id를 console에 기록되게 함.

(이 때 id는 Date.now()인 id임)


li.id = newTodo.id; 를 하여

li.id는 newTodo.id인 작성한 ToDo의 id라고 저장함.


span.innerText = newTodo.text; 를 하여

span의 innerText에 newTodo의 text를 저장하게 함.

(실제로 저장되는 건 newTodoObj.text임)


const newTodoObj = { 를 하여

newTodoObj를 만들고 그 안에 Object를 만듬.
text: newTodo, 를 하여

text에는 newTodo를 저장하고,
id: Date.now(), 를 하여

id에는 Date.now()를 하여

밀리초(1000분의 1초)를 줌.
};


toDos.push(newTodoObj); 를 하여

toDos에 newTodoObj를 넣어줌.


paintToDo(newTodoObj); 를 하여

paintToDo에 string으로newToDo를 주는 것 대신

newTodoObj를 줌.

 

function paintToDo(newTodo) 의 

newTodo는 매개변수(parameter)임.

즉 paintToDo 함수 내에서 사용하기 때문에 마음대로 적어도 상관 없음.

paintToDo(newTodoObj);

newTodoObj는 인자(argument)임.

paintToDo라는 함수에 사용되는 실제값임.

 

그렇기에 paintToDo에 사용되는 실제 값은

newTodo(매개변수)가 아닌 newTodoObj(인자)임.

 

 

 

- 화면 -

 

 

todo를 작성하면 각 각 id가 주어지고

삭제를 하면 삭제한 li의 id가 console에 기록됨.

 

 

하지만 새로고침하면 삭제한 li가 다시 생김.