원래 저 const newtodo = todoinput.value와 todoinput.value의 위치가 반대였다. 강의에서는 입력값을 엔터를 누를때마다 사라지게 하는 것을 하고 있었다. 문제는 new todo가 정의가 되질 않아서 위에 있는 function을 보면 html에 li를 만들어주고 span을 만든다음 그 span을 li에 추가시키는 작업을 했다. 이게 바로 js에서 html요소를 단순히 끌어다 작업하는 것이 아니라 아예 만들어내는 방식이다. 바로 .createElement("")이것으로 말이다.어찌되었든 그걸로 만든 span에 innertext를 newtodo 즉 todoinput.value로 하였기에 console.log(li)하면 console창엔 li 그리고 span이 뜨면서 그 안에 내가 todoinput.value 즉 todo에 입력한 입력값이 나와야 한다. 근데 왜 안나오지? 뭐가 문제지? 약간의 고민이 있었다. 그리고 찾아냈다. 순서가 문제구나... 아니 더 정확히 말하자면 비어있는 값을 호출하니 아무것도 안나오지...... 이게 내 결론이었다....
자 이 과정을 잘 보면
todoinput.value를 ""으로 만들어서 비워버렸다. 이 말은 어떤 입력값을 입력해도 엔터를 누를때마다 addeventlistener에 연결된 function controltodosubmit에 의해 이 입력값들이 사라진다는 것이다. 즉 저장이 안된다 이 말이다.... 고런데 저장이 안되었다면 나중에 console.log(li)를 했을때도 입력값이 span의 텍스트로 짠 하고 등장할 수 없는 거 아닌가? 뭐지? 정답은 간단했다. todoinput.value를 비운것은 사실이었다. 그러나 비우기 전에 복사를 해놓고 비웠다. 그래서 그 복사본은 유효했던 것이다. 그 복사본이 newtodo인 것이고.....
즉 todoinput.value는 비워져서 쓸 수 없지만 newtodo는 복사가 되었기에 난 그 것을 가지고 위의 과정들을 진행시킬 수 있었던 것이다...... 삭제전 복사 백업을 해놓는 것과 같은 이치......