ToDo - Set up

이번에는 todo 리스트를 만들어보자

일단 todo.js 파일을 생성하여 추가해준 다음, 사용자가 todo를 입력하기 위한 form을 만들어준다.

변경이 적용된 모습

이제 리스트를 만들건데, JS로 li 를 추가할 것이기 때문에 ul 안에는 아무것도 작성하지 않도록 한다.

그럼 이제 form과 ul을 JS로 가져가보자

 

이제 우리는 greetings의 form에서 했던 것과 똑같은 것을 반복할건데,

이는 function을 만들어서 form의 기본 동작인 submit을 막을 거라는 말이다.

 

방금 발생한 event를 handleToDoSubmit 함수의 첫번째 인자로 주는 함수를 생성

이제 input창에 무언가를 입력하고 enter를 눌러도 새로고침이 일어나지 않는다.

새로고침이 일어나지 않음

 

다음으로는 input의 value를 얻을 것이다.

이때 toDoInput을 전체 document에서 찾을지, toDoForm 안에서만 찾을지를 선택할 수 있다.

같은 동작을 하는 서로 다른 두 줄의 코드

이제 함수에 toDoInput.value 값을 console 창에 출력하는 코드를 추가하면

이렇게 값을 가져오는 것을 확인할 수 있다.

 

이제는 input 창에 to do 를 입력하고 Enter를 누를 때마다, 입력한 것을 비우도록 만들어보자

 

이렇게 하기 위해서는 toDoInput.value 값에 빈 문자열을 지정해주면 되는데, 그전에 toDoInput.value 값을 저장하게 만들어야 한다.

이때 알아둬야 하는 것은 toDoInput.value 를 비웠다고 해서 newToDo가 비워지는 것을 의미하는 것은 아니라는 거다. 

왜냐하면 const newTodo = toDoInput.value; 의 시점에서 우리가 하는 건 input의 value를 새로운 변수에 복사하는 것이기 때문이고, 그 이후에 input의 value를 가지고 무얼하든 newTodo 에는 아무런 영향이 없다.

 

위의 사실을 console.log 두 줄로 확인해보면

먼저 toDoInput.value가 출력되고 newTodo가 출력된 것을 확인할 수 있다.(두 번째 console.log의 toDoInput.value는 출력되지 않았다.)

사실 클릭해보면 toDoInput.value가 출력되긴 했는데, 빈 문자열을 지정해서 빈 칸으로 출려된 것을 확인할 수 있다.

값이 있긴 있음